@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap";body{font-family:Inter,serif}.very-dark-blue{background-color:#1e202a}.App{width:85%;margin:0 auto}.main-cards-container{margin:3.2rem 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;justify-items:center}.overview-title{color:#63687e;font-size:1.6rem}.white{color:#fff}.secondary-cards-container{margin:2rem 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;justify-items:center}header{margin-top:2rem;display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between}header div .header-title{font-size:2rem;margin:0;color:#1e202a}header div .white{color:#fff}header div .header-subtitle{color:#63687e;font-weight:700;margin:0;padding-top:.3rem}header div .desatured-blue{color:#8b97c6}header .toggle-btn-container{display:flex;align-items:center;gap:1rem}header .toggle-btn-container .toggle-text{color:#aeb3cb;font-weight:700}header .toggle-btn-container .toggle-button{border:none;padding:0;margin:0;width:70px;height:34px;background-color:#aeb3cb;border-radius:2rem;display:flex;align-items:center;justify-content:end;transition:all .3s}header .toggle-btn-container .toggle-button .inner-toggle-button{margin:.3rem;width:28px;height:80%;background-color:#fff;border-radius:50%;transition:all .3s}header .toggle-btn-container .toggle-button .inner-active{background-color:#252a41;-ms-transform:translateX(-115%);-webkit-transform:translateX(-115%);transform:translate(-115%)}header .toggle-btn-container .toggle-button:hover{cursor:pointer}header .toggle-btn-container .toggle-active{background-image:linear-gradient(to right,hsl(210,78%,56%),hsl(146,68%,55%))}@media (max-width: 675px){header .toggle-btn-container{padding-top:1rem;margin-top:2rem;width:100%;justify-content:space-between;border-top:1px solid hsl(228,34%,66%)}}.main-card{width:270px;height:250px;background-color:#f0f2fa;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem;border-radius:.4rem}.main-card .user-container{height:1.5rem;display:flex;align-items:center;justify-content:center;gap:.6rem}.main-card .user-container img{width:22px}.main-card .user-container .user-name{font-size:.94rem;font-weight:700;color:#63687e}.main-card .user-container .desatured-blue{color:#8b97c6}.main-card .follow-container{text-align:center}.main-card .follow-container .follow-number{margin:0;font-size:4rem;color:#1e202a}.main-card .follow-container .follow-text{margin:0;text-transform:uppercase;letter-spacing:.4rem;color:#63687e;font-size:.9rem}.main-card .follow-container .desatured-blue{color:#8b97c6}.main-card .follow-container .white{color:#fff}.main-card .follow-today-container{display:flex;align-items:center;justify-content:center;gap:.4rem}.main-card .follow-today-container img{width:10px}.main-card .follow-today-container .follow-today{font-size:.94rem;font-weight:700;color:#1db489}.main-card:hover{cursor:pointer;background-color:#e0e2eb}.main-card:nth-child(1){border-top:6px solid hsl(208,92%,53%)}.main-card:nth-child(2){border-top:6px solid hsl(203,89%,53%)}.main-card:nth-child(3){position:relative;border-top:6px solid transparent;background-clip:padding-box;border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem}.main-card:nth-child(3):after{position:absolute;top:-6px;bottom:0px;left:0px;right:0px;background:linear-gradient(to right,hsl(37,97%,70%),hsl(329,70%,58%));content:"";z-index:-1;border-radius:.4rem}.main-card:nth-child(4){border-top:6px solid hsl(348,97%,39%)}.main-card:nth-child(4) .follow-today{color:#dc414c}.secondary-card{width:270px;height:150px;background-color:#f0f2fa;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem;border-radius:.4rem}.secondary-card .header-container,.secondary-card .number-card-container{width:80%;display:flex;align-items:center;justify-content:space-between}.secondary-card .header-container .title-card{font-size:.94rem;font-weight:700;color:#63687e}.secondary-card .header-container .desatured-blue{color:#8b97c6}.secondary-card .header-container img{width:22px}.secondary-card .number-card-container .number-card{margin:0;font-size:2rem;font-weight:700;color:#1e202a}.secondary-card .number-card-container .white{color:#fff}.secondary-card .number-card-container div{display:flex;align-items:center;gap:.3rem}.secondary-card .number-card-container div img{width:10px}.secondary-card .number-card-container div .percentage-card{font-size:.8rem;font-weight:700;color:#1db489}.dark-desaturated-blue{background-color:#252a41}.secondary-card:hover{cursor:pointer;background-color:#e0e2eb}.dark:hover{background-color:#383e57}.secondary-card:nth-child(2) div .percentage-card,.secondary-card:nth-child(7) div .percentage-card,.secondary-card:nth-child(8) div .percentage-card{color:#dc414c}footer{margin:3rem 0 0;text-align:center;letter-spacing:.05rem}footer .text-container{font-weight:700}footer .text-container a{color:#c4032a}footer .text-container a.lime-green{color:#1db489}