:root{--font-inter:"Inter",sans-serif;--limegreen:#1db489;--brightred:#dc414c;--facebook:#198ff5;--twitter:#1ca0f2;--instagram-start:#fdc468;--instagram-middle:#ee867c;--instagram-end:#df4996;--youtube:#c4032a;--toggle-bg-light:#aeb3cb;--toggle-bg-start:#378fe6;--toggle-bg-end:#3eda82;--toggle-light:#868cac;--toggle-button-light:#f0f2f9;--dark-bg:#1e202a;--dark-top-bg:#1f212e;--dark-card:#252a41;--dark-card-hover:#343b56;--dark-text1:#8b97c6;--dark-text2:#fff;--light-bg:#fff;--light-top-bg:#f5f7ff;--light-card:#f0f2fa;--light-card-hover:#e0e4f0;--light-text1:#63677e;--light-text2:#1e202a;--background:var(--light-bg);--text-color:var(--light-text2);--text-color2:var(--light-text1);--card-bg:var(--light-card);--card-hover:var(--light-card-hover);--toggle:var(--toggle-light);--toggle-bg:var(--toggle-bg-light);--toggle-button:var(--toggle-button-light)}@media (prefers-color-scheme:dark){:root{--background:var(--dark-bg);--text-color:var(--dark-text2);--text-color2:var(--dark-text1);--card-bg:var(--dark-card);--card-hover:var(--dark-card-hover);--toggle:var(--light-bg);--toggle-bg:linear-gradient(225deg,var(--toggle-bg-end) 0%,var(--toggle-bg-start) 98.02%);--toggle-button:var(--dark-bg)}}body.light{--background:var(--light-bg);--text-color:var(--light-text2);--text-color2:var(--light-text1);--card-bg:var(--light-card);--card-hover:var(--light-card-hover);--toggle:var(--toggle-light);--toggle-bg:var(--toggle-bg-light);--toggle-button:var(--toggle-button-light)}body.dark{--background:var(--dark-bg);--text-color:var(--dark-text2);--text-color2:var(--dark-text1);--card-bg:var(--dark-card);--card-hover:var(--dark-card-hover);--toggle:var(--light-bg);--toggle-bg:linear-gradient(225deg,var(--toggle-bg-end) 0%,var(--toggle-bg-start) 98.02%);--toggle-button:var(--dark-bg)}html{box-sizing:border-box;font-size:100%}*,:after,:before{box-sizing:inherit}body{align-items:center;background-color:var(--background);color:var(--text-color);display:flex;flex-direction:column;font-family:var(--font-inter);justify-content:center;margin:0;min-height:100vh;padding:0}::-webkit-scrollbar{width:7px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#888}::-webkit-scrollbar-thumb:hover{background:#555}h1,h2,h3{line-height:1.1;margin-top:0}h1{font-size:1.625rem;margin-bottom:.1875rem}h2{color:var(--text-color2);font-size:1.5rem;margin-bottom:1.5rem}a,a:active,a:visited{text-decoration:none}ol,ul{list-style:none}.container{margin:2.5rem 3.125rem;padding:10 1.5625rem;width:19.375rem}@media (min-width:700px){.container{width:35rem}}@media (min-width:1150px){.container{width:65.3125rem}}main{flex-direction:column;justify-content:center}.toggle,main{align-items:center;display:flex}.toggle{border:none;flex-direction:row;justify-content:space-between;margin:1.25rem 0;padding:0;width:100%}@media (min-width:700px){.toggle{width:auto}}.toggle label{color:var(--toggle);font-size:.875rem;font-weight:700}.toggle label[for=dark]{line-height:1.5rem;margin-right:.8125rem}.toggle__wrapper{height:1.5rem;position:relative}.toggle input[type=radio]{height:1.5rem;margin:0 -.125rem;opacity:0;width:1.5rem}.toggle input[type=radio]:focus~.toggle__button{border:2px solid #fff}.toggle__background{background:var(--toggle-bg);border-radius:.75rem;display:block;height:100%;pointer-events:none;position:absolute;top:0;width:100%}.toggle__button{background-color:var(--toggle-button);border-radius:50%;height:1.125rem;left:.1875rem;position:absolute;right:100%;top:.1875rem;transition:all .15s ease-in-out;width:1.125rem}.toggle #light:checked~.toggle__button{left:calc(100% - 21px);right:3px}.toggle #system:checked~.toggle__button{left:50%;right:auto;transform:translate(-50%)}.cards{display:grid;gap:.9375rem;grid-template-columns:1fr;margin:2.8125rem 0;row-gap:1.25rem}@media (min-width:700px){.cards{grid-template-columns:repeat(2,1fr)}}@media (min-width:1150px){.cards{grid-template-columns:repeat(4,1fr)}}.card{background:var(--card-bg);border-radius:.3125rem;color:var(--dark-text1);cursor:pointer;overflow:hidden;padding:2.5rem;position:relative;text-align:center;transition:.15s ease-in-out;width:18.75rem}@media (min-width:700px){.card{width:17.1875rem}}@media (min-width:1150px){.card{width:15.625rem}}.card:hover{background:var(--card-hover)}.card--facebook{border-top:.4375rem solid var(--facebook)}.card--twitter{border-top:.4375rem solid var(--twitter)}.card--instagram{padding-top:3.03125rem}.card--instagram:before{background:linear-gradient(225deg,var(--instagram-end),var(--instagram-middle) 50.91%,var(--instagram-start) 100%);content:"";display:block;height:.4375rem;left:0;position:absolute;top:0;width:100%}.card--youtube{border-top:.4375rem solid var(--youtube)}.card__platform{align-items:center;display:flex;gap:.625rem;height:1.25rem;justify-content:center;margin-bottom:1.75rem;margin-top:.3125rem}.card__subtitle{font-size:.875rem}.card__subtitle,.card__username{color:var(--text-color2);font-weight:700}.card__username{font-size:.75rem}.card__followers{margin-bottom:1.5625rem}.card__count{color:var(--text-color);font-weight:700;letter-spacing:-.125rem;line-height:1;margin-bottom:.25rem}.card__count--big{font-size:3.5rem}.card__count--small{font-size:2rem}.card__label{color:var(--text-color2);font-size:.75rem;font-weight:400;letter-spacing:.3125rem;margin-top:.4375rem;text-transform:uppercase}.card__change{align-items:center;display:flex;flex-direction:row;font-size:.75rem;font-weight:700;gap:.4375rem;justify-content:center}.card__change--up{color:var(--limegreen);display:flex}.card__change--down{color:var(--brightred)}.card-grid{display:grid;gap:1.4375rem;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,auto);justify-items:start}.card-grid .card__subtitle{text-align:left}.card-grid .card__count{margin-bottom:0}.card-grid .card__change,.card-grid .card__count{align-self:end}.card-grid .card__change,.card-grid img{justify-self:end}.header{align-items:center;display:flex;flex-direction:column;justify-content:space-between;width:100%}@media (min-width:700px){.header{align-items:center;flex-direction:row;justify-content:space-between}}.header__title{width:100%}@media (min-width:700px){.header__title{width:auto}}.header__subtitle{color:var(--text-color2);font-size:.875rem;font-weight:700}
/*# sourceMappingURL=style.css.map */