:root{--Lime-Green: hsl(163, 72%, 41%);--Bright-Red: hsl(356, 69%, 56%);--Facebook-blue: hsl(208, 92%, 53%);--Twitter-blue: hsl(203, 89%, 53%);--Instagram-yellow: hsl(37, 97%, 70%);--Instagram-pink:hsl(329, 70%, 58%);--YouTube-red: hsl(348, 97%, 39%);--Dark-Theme-blue:hsl(210, 78%, 56%);--Dark-Theme-green: hsl(146, 68%, 55%);--Pattern-bg: hsl(227, 100%, 98%);--Page-bg: hsl(0, 0%, 100%);--Card-bg: hsl(227, 47%, 96%);--light-Text: hsl(228, 12%, 44%);--Dark-Text: hsl(230, 17%, 14%);--primary-font-Color: hsl(230, 17%, 14%);--secondary-font-Color: hsl(228, 12%, 44%);--hover-background: hsl(233, 17%, 91%);--Theme: hsl(230, 22%, 74%);--fs-smallest: .75rem;--fs-smaller: .725rem;--fs-small: .9rem;--fs-medium:1rem;--fs-large:1.5rem;--fs-slightly-larger:2rem;--fs-larger:3.5rem;--fw-light: 200;--fw-regular: 400;--fw-medium: 500;--fw-semi-bold: 600;--fw-bold: 700;--fw-extra-bold: 900;--soft-edges:5px;--rounded-edges:20px;--full-circle-border:50%;--tiny-padding: .5rem;--very-small-padding: .75rem;--small-padding: 1rem;--medium-padding: 1.5rem;--large-padding: 2rem;--larger-padding: 3rem;--very-small-gap: .25rem;--small-gap: 1rem;--medium-gap: 2rem;--large-gap: 3rem;--lazy: 2s;--slow: 1s;--medium: .5s;--fast: .3s}*,*:before,*:after{box-sizing:border-box;padding:0;margin:0}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.darkmode{--Pattern-bg: hsl(232, 19%, 17%) ;--Page-bg: hsl(230, 17%, 14%);--Card-bg: hsl(228, 28%, 20%);--Dark-Text: hsl(228, 34%, 66%);--primary-font-Color: hsl(0, 0%, 100%);--secondary-font-Color: hsl(228, 34%, 66%);--hover-background: hsl(229, 28%, 27%)}.darkmode main{background-color:var(--Page-bg)}.darkmode button{background-image:linear-gradient(to right,var(--Dark-Theme-blue),var(--Dark-Theme-green));justify-content:right}body{font-family:Inter,sans-serif}main{min-height:100vh}.app{position:relative;z-index:0;background-color:var(--Page-bg)}.container{padding:2rem;display:flex;flex-direction:column;gap:var(--medium-gap);margin-left:auto;margin-right:auto;max-width:74rem}.background{background-color:var(--Pattern-bg);padding:8rem;width:100%;position:absolute;z-index:-1;border-radius:0 0 var(--rounded-edges) var(--rounded-edges)}h1{font-size:var(--fs-large);color:var(--primary-font-Color)}.total-followers{color:var(--secondary-font-Color);font-size:var(--fs-small);font-weight:var(--fw-medium)}.header{display:flex;flex-direction:column;gap:var(--small-gap)}.darkmode-toggle-div{display:flex;flex-direction:row;justify-content:space-between;align-items:center;cursor:default}.darkmode-text{font-size:var(--fs-small);color:var(--secondary-font-Color);font-weight:var(--fw-medium)}.darkmode-toggle-div p:hover{color:var(--primary-font-Color)}.logo{animation:move-from-right 2s ease}button{border:0;padding:3px;width:2.5rem;border-radius:50vmax;cursor:pointer;background-color:var(--Theme);display:flex;flex-direction:row;justify-content:left}button:hover{background-image:linear-gradient(to right,var(--Dark-Theme-blue),var(--Dark-Theme-green))}.circle{padding:.5rem;width:1rem;border-radius:100vmax;background-color:var(--Card-bg)}.follower-stats-container{display:grid;grid-template-areas:"facebook" "twitter" "instagram" "youtube";gap:var(--medium-gap)}.border-class{border-radius:var(--soft-edges) var(--soft-edges) 1rem 1rem;padding:.25rem 0 0;animation:move-up var(--lazy) ease}.follower-stat{background-color:var(--Card-bg);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--small-gap);padding:2rem 2rem 1.5rem;border-radius:0 0 var(--soft-edges) var(--soft-edges);cursor:pointer;height:100%;animation:move-up var(--lazy) ease}.follower-stat:hover{background-color:var(--hover-background)}.facebook-blue{background-color:var(--Facebook-blue);grid-area:facebook}.twitter-blue{background-color:var(--Twitter-blue);grid-area:twitter}.instagram-gradient{background-image:linear-gradient(to right,hsl(37,97%,70%),hsl(329,70%,58%));grid-area:instagram}.youtube-red{background-color:var(--YouTube-red);grid-area:youtube}.profile{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:.5rem}.profile img{display:flex;align-self:center}.username{font-size:var(--fs-smaller);color:var(--secondary-font-Color);font-weight:var(--fw-bold)}.follower-count{display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--primary-font-Color);animation:reveal var(--lazy) ease}.follower-number{font-size:var(--fs-larger);font-weight:var(--fw-bold);margin:-.5rem}.followers-text{font-weight:var(--fw-light);letter-spacing:5px;text-transform:uppercase;font-size:var(--fs-smaller);color:var(--secondary-font-Color)}.follower-change{display:flex;flex-direction:row;gap:var(--very-small-gap)}.follower-change img{display:flex;align-self:center}.follower-change-text{font-size:var(--fs-smallest);font-weight:var(--fw-bold)}.positive{color:var(--Lime-Green)}.negative{color:var(--Bright-Red)}h2{color:var(--primary-font-Color)}.activity-stats-container{display:grid;grid-template-areas:"one" "five" "two" "six" "three" "seven" "eight" "four";gap:var(--small-gap)}.activity-stats-container>:nth-child(1){grid-area:one}.activity-stats-container>:nth-child(2){grid-area:two}.activity-stats-container>:nth-child(3){grid-area:three}.activity-stats-container>:nth-child(4){grid-area:four}.activity-stats-container>:nth-child(5){grid-area:five}.activity-stats-container>:nth-child(6){grid-area:six}.activity-stats-container>:nth-child(7){grid-area:seven}.activity-stats-container>:nth-child(8){grid-area:eight}.activity-stat{background-color:var(--Card-bg);padding:var(--medium-padding) var(--medium-padding) var(--very-small-padding) var(--medium-padding);display:flex;flex-direction:column;gap:var(--small-gap);border-radius:var(--soft-edges);cursor:pointer}.activity-stat:hover{background-color:var(--hover-background)}.platform{display:flex;justify-content:space-between;font-size:var(--fs-smallest);font-weight:var(--fw-bold);color:var(--secondary-font-Color)}.platform img{display:flex;align-self:center}.activity-stats-values{display:flex;justify-content:space-between;align-items:baseline}.activity-stat-change{display:flex;justify-content:center;align-items:center;gap:var(--very-small-gap);font-size:var(--fs-smallest);font-weight:var(--fw-bold)}.activity-stat-change img{display:flex;align-self:center}.activity-value{font-size:var(--fs-slightly-larger);font-weight:var(--fw-bold);color:var(--primary-font-Color);animation:move-from-left 2.5s ease}@media screen and (min-width:768px){.follower-stats-container{grid-template-areas:"facebook twitter" "instagram youtube"}.activity-stats-container{grid-template-areas:"one five" "two six" "three seven" "four eight";gap:var(--medium-gap)}.header{flex-direction:row;justify-content:space-between}.darkmode-toggle-div{gap:var(--small-gap)}h1{font-size:var(--fs-slightly-larger)}.total-followers{font-weight:var(--fw-bold)}hr{display:none}}@media screen and (min-width:1024px){.follower-stats-container{grid-template-columns:repeat(4,1fr);grid-template-areas:"facebook twitter instagram youtube"}.activity-stats-container{grid-template-columns:repeat(4,1fr);grid-template-areas:"one five six two" "three seven eight four";gap:var(--medium-gap)}.background{padding:8rem}}@keyframes move-up{0%{transform:translateY(.75rem)}to{transform:translateY(0)}}@keyframes reveal{0%{opacity:0}to{opacity:1}}@keyframes move-from-left{0%{transform:translate(3rem);opacity:0}to{transform:translate(0);opacity:1}}@keyframes move-from-right{0%{transform:translate(-2rem);opacity:0}to{transform:translate(0);opacity:1}}