*{margin:0;padding:0;box-sizing:border-box;font-family:Rubik,sans-serif;color:#fff}body,#root{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#0f1424}div{border-radius:.625rem}main{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}.account-container{grid-row:1 / span 2;display:flex;flex-direction:column;background-color:#1c1f4a}.profile-container{height:70%;padding:1.25rem 0 0 1.25rem;background-color:#5746ea}.avatar{width:30%;border:solid .188rem white;border-radius:3.125rem;margin-bottom:1.25rem}.name{font-weight:300;width:50%}.timeframe-container{padding:1.25rem;display:flex;flex-direction:column;gap:.625rem}.timeframe-container>h3{font-size:1.125rem;font-weight:300;color:#bdc1ff}.timeframe-container>h3:hover{cursor:pointer;color:#fff}.timeframe-container>h3.selected{color:#fff}.activity-container{position:relative}.image-container{position:absolute;top:0;left:0;width:100%;height:50%;display:flex;justify-content:flex-end;z-index:0;overflow:hidden;padding:0 1.25rem}.image-container>img{height:50%;position:relative;top:-.313rem}.stats-container{position:relative;z-index:1;margin-top:1.875rem;padding:1.25rem;background-color:#1c1f4a}.stats-container:hover{cursor:pointer;background-color:#34397b}.stats-header{display:flex;justify-content:space-between;margin-bottom:1.25rem}.activity-type{font-size:1.125rem;font-weight:500}.more-btn{height:100%}.more-btn:hover{width:10%;filter:brightness(0) invert(1)}.hours-current{font-weight:300;font-size:2.5rem;margin-bottom:.625rem}.hours-previous{font-size:1rem;font-weight:400;color:#bdc1ff}.work{background-color:#ff8c66}.play{background-color:#56c2e6}.study{background-color:#ff5c7c}.exercise{background-color:#4acf81}.social{background-color:#7536d3}.self-care{background-color:#f1c65b}footer,footer>a{margin-top:1.875rem;color:#bdc1ff;text-align:center}@media screen and (max-width: 700px){body,#root{padding:1.25rem}main{display:flex;flex-direction:column;width:100%}.name{width:100%;font-size:1.125rem}.avatar{width:auto;width:25%;margin:0}.profile-container{display:flex;align-items:center;gap:1.25rem;padding:1.875rem;height:50%}.timeframe-container{flex-direction:row;justify-content:space-between;width:100%}.hours-container{display:flex;justify-content:space-between;align-items:center}.hours-current{font-size:2rem;margin:0}.hours-previous{font-size:.875rem}.stats-container{width:100%}}