:root{--Blue:#5847eb;--work:#ff8c66;--play:#56c2e6;--study:#ff5c7c;--exercise:#4acf81;--social:#7536d3;--selfcare:#f1c65b;--Verydarkblue:#0f1424;--Darkblue:#1c1f4a;--Desaturatedblue:#6f76c8;--PaleBlue:#bdc1ff}.work{background-color:var(--work)}.play{background-color:var(--play)}.study{background-color:var(--study)}.exercise{background-color:var(--exercise)}.social{background-color:var(--social)}.selfcare{background-color:var(--selfcare)}body,html{font-size:18px;background-color:var(--Verydarkblue);color:#fff;width:100%;height:100%;font-weight:300;box-sizing:border-box}body{display:flex;align-items:center;justify-content:center}.mainBox{background-color:var(--Darkblue);width:240px;height:420px}.mainBox,.topBox{display:flex;flex-direction:column;border-radius:16px}.topBox{height:300px;background-color:var(--Desaturatedblue);padding:24px}.logo{margin-top:24px;border:2px solid #fff;width:90px;height:90px;border-radius:50%;position:relative}.littleTitle{font-size:12px;font-weight:200;color:#ddd;margin-top:24px}.name{font-size:2rem;font-weight:300}.botBox{padding:24px;display:flex;flex-direction:column;justify-content:space-evenly;gap:12px;color:var(--PaleBlue);font-size:16px}.botBox p{width:max-content}.botBox p:hover{color:#ddd;cursor:pointer}.active{color:#ddd}.stats{height:420px;width:900px;padding:0 24px;display:flex;flex-wrap:wrap;gap:24px}.statsBox{width:220px;border-radius:12px;overflow:hidden}.imgg{height:45px;text-align:right;position:relative;z-index:0;padding:4px}.statsMain{background-color:var(--Darkblue);border-bottom-right-radius:12px;border-bottom-left-radius:12px;padding:24px}.statsName{display:flex;justify-content:space-between;align-items:center;text-transform:capitalize}.statsTime{font-size:3rem;margin-top:12px}.statsLast{font-size:12px;color:#ccc;margin-top:4px}