body{background-color:#0f1424;font-family:Rubik,sans-serif;font-optical-sizing:auto;color:#bdc1ff;display:flex;align-items:center;justify-content:center}#main-container{display:flex;flex-direction:column;justify-content:center;align-items:center}#avatar{background-color:#1c1f4a;box-sizing:border-box;width:320px;height:200px;margin:20px;border-radius:10px;justify-content:flex-start}#first-section{background-color:#5847eb;border-radius:10px;height:130px;display:flex;justify-content:center;align-items:center}#profile-picture{width:70px;border:3px solid hsl(236,100%,87%);border-radius:50%;margin:5px}#name{margin-left:5px}#name h1{font-size:15px;font-weight:300;margin:0;padding:0}#name h2{font-weight:400;margin:0;padding:0}#timeframes{list-style-type:none;display:flex;justify-content:space-between;align-items:center;margin:0 30px;padding:0}li{margin-top:20px;font-weight:300;cursor:pointer;color:#6f76c8}li.active{color:#bdc1ff;font-weight:500}li:hover{text-shadow:1px 1px 5px hsla(235,45%,61%,.419)}.attribution{font-size:11px;text-align:center}.attribution a{color:#3e52a3}@media only screen and (min-width: 1160px){body{height:100vh}#main-container{display:grid;gap:20px;grid-template-columns:repeat(4,260px);grid-template-rows:repeat(2,220px);box-sizing:border-box}#avatar{width:260px;height:460px;grid-row:1 /span 2;box-sizing:border-box;display:block}#first-section{display:block;height:320px}#timeframes{display:block}#profile-picture{margin-left:30px;margin-top:40px}#name{margin-top:30px;margin-left:30px}#name h1{font-size:20px}#name h2{font-size:40px}}.cards{box-sizing:border-box;width:320px;height:180px;margin:20px;padding:0;background-repeat:no-repeat;background-position:top right;border-radius:10px;display:flex;flex-direction:column;justify-content:flex-end}#Work{background-color:#ff8c66;background-image:url(/images/icon-work.svg)}#Play{background-color:#56c2e6;background-image:url(/images/icon-play.svg)}#Study{background-color:#ff5c7c;background-image:url(/images/icon-study.svg)}#Exercise{background-color:#4acf81;background-image:url(/images/icon-exercise.svg)}#Social{background-color:#7536d3;background-image:url(/images/icon-social.svg)}#Self-care{background-color:#f1c65b;background-image:url(/images/icon-self-care.svg)}.info{box-sizing:border-box;margin:0;background-color:#1c1f4a;border-radius:10px;width:320px;height:132px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-left:30px;padding-right:30px;cursor:pointer}.info:hover{background-color:#3c4280}.first-line,.second-line{display:flex;justify-content:space-between;align-items:center;margin:5px;padding:0;width:100%}.title{color:#bdc1ff;font-weight:500;font-size:18px;padding:0;margin:0}.ellipsis{width:10%;height:auto;padding:0;margin:0;cursor:pointer}.actual{font-weight:300;font-size:30px;padding:0;margin:0}.previous{font-weight:300;font-size:15px;padding:0;margin:0}@media only screen and (min-width: 1160px){.cards{width:260px;height:220px}.info{width:260px;height:170px;display:initial}.first-line{padding-top:25px;padding-bottom:10px}.second-line{display:block}.actual{font-size:50px;padding-bottom:5px}}