*{box-sizing:border-box;margin:0;padding:0}html{font-family:"Rubik",sans-serif}body{background-color:#0f1424}.grid{display:grid;padding:4rem 5%;row-gap:2rem}@media screen and (min-width: 1100px){.grid{grid-template-columns:300px 1fr;column-gap:4rem;padding:0 5%;height:100vh;max-width:1440px;margin:0 auto;align-content:center}}.stat-card-bar{display:flex;justify-content:flex-end;padding-right:1rem;height:3.5rem;position:relative;overflow:hidden;border-radius:1rem 1rem 0 0}.stat-card-bar.orange{background-color:#ff8c66}.stat-card:hover .stat-card-bar.orange{background-color:#ff906b}.stat-card-bar.blue{background-color:#56c2e6}.stat-card:hover .stat-card-bar.blue{background-color:#5bc4e6}.stat-card-bar.pink{background-color:#ff5c7c}.stat-card:hover .stat-card-bar.pink{background-color:#ff6181}.stat-card-bar.green{background-color:#4acf81}.stat-card:hover .stat-card-bar.green{background-color:#4ed084}.stat-card-bar.purple{background-color:#7536d3}.stat-card:hover .stat-card-bar.purple{background-color:#783ad4}.stat-card-bar.yellow{background-color:#f1c65b}.stat-card:hover .stat-card-bar.yellow{background-color:#f1c85f}.stat-card-bar img{position:absolute;height:4rem;bottom:0;transform-origin:bottom;transition:transform .3s}.stat-card:hover .stat-card-bar img{transform:rotate(-45deg)}.stat-cards{display:grid;row-gap:2rem}@media screen and (min-width: 800px){.stat-cards{grid-template-columns:1fr 1fr;column-gap:2rem}}@media screen and (min-width: 1100px){.stat-cards{grid-template-columns:1fr 1fr 1fr}}.stat-card{position:relative}.stat-card__title{color:#fff}.stat-card__menu-toggle{background-color:transparent;border:0;cursor:pointer}.stat-card__time{font-size:3.5em;color:#fff;margin-top:1.5rem;width:max-content}.stat-card__last-time{color:#6f76c8;margin:.8rem 0 .5rem}.stat-card-content{border-radius:1rem;background-color:#1c1f4a;padding:1.5rem;position:relative;margin-top:-1rem}.stat-card:hover .stat-card-content{background-color:#292f70}.stat-card-header{display:flex;justify-content:space-between}.header{position:sticky;top:-7.5rem;z-index:1000}@media screen and (max-width: 1099.9px){.header.sticky{margin:0 -5%}}@media screen and (min-width: 1100px){.header{display:flex;flex-direction:column}}.user-card{background-color:#5847eb;padding:1.5rem;border-radius:1rem;position:relative;display:flex}@media screen and (min-width: 1100px){.user-card{display:block;flex:1}}.user-card-header{display:flex;flex-direction:column;justify-content:center;margin-left:1rem}@media screen and (min-width: 1100px){.user-card-header{margin-left:0}}.user-avatar{width:4rem;border-radius:50%;border:3px solid #fff}@media screen and (min-width: 1100px){.user-avatar{width:5rem}}.user-name-prefix{color:#6f76c8}@media screen and (min-width: 1100px){.user-name-prefix{margin:1rem 0}}.user-name{color:#bdc1ff;font-weight:300;font-size:20px}@media screen and (min-width: 1100px){.user-name{font-size:3rem;line-height:1}}.filters-bar{background-color:#1c1f4a;padding:2.5rem 1.5rem 1.5rem;border-radius:0 0 1rem 1rem;display:flex;justify-content:space-between;font-size:18px;margin-top:-1rem}@media screen and (min-width: 1100px){.filters-bar{display:grid;row-gap:1.5rem}}@media screen and (max-width: 1099.9px){.sticky .filters-bar{background-color:rgba(28,31,74,.8);backdrop-filter:blur(10px)}}.filter-input{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.filter-label{color:#6f76c8;cursor:pointer}.filter-input:checked+.filter-label{color:#fff}