:root{
    /*### Primary*/

        --Lime-Green: hsl(163, 72%, 41%);
        --Bright-Red: hsl(356, 69%, 56%);

        --Facebook: hsl(208, 92%, 53%);
        --Twitter: hsl(203, 89%, 53%);
        --Instagram: linear gradient hsl(37, 97%, 70%) to hsl(329, 70%, 58%);
        --YouTube: hsl(348, 97%, 39%);

    /*#### Dark Theme*/

        --Toggle: linear gradient hsl(210, 78%, 56%) to hsl(146, 68%, 55%);

    /*#### Light Theme*/

        --Toggle: hsl(230, 22%, 74%);

    /*### Neutral*/

    /*#### Dark Theme*/

        --Very-Dark-Blue-BG: hsl(230, 17%, 14%);
        --Very-Dark-Blue-Top-BG-Pattern: hsl(232, 19%, 15%);
        --Dark-Desaturated-Blue-Card-BG: hsl(228, 28%, 20%);
        --Desaturated-Blue-Text: hsl(228, 34%, 66%);
        --White-Text: hsl(0, 0%, 100%);

    /*#### Light Theme*/

        --White-BG: hsl(0, 0%, 100%);
        --Very-Pale-Blue-Top-BG-Pattern: hsl(225, 100%, 98%);
        --Light-Grayish-Blue-Card-BG: hsl(227, 47%, 96%);
        --Dark-Grayish-Blue-Text: hsl(228, 12%, 44%);
        --Very-Dark-Blue-Text: hsl(230, 17%, 14%);
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    display: grid;
    place-content: center;
    min-height: 100vh;
    background-color: rgba(29,32,41,255);
}
.container{
    background-color: rgba(29,32,41,255);
    font-family: Inter, serif;
    color: var(--Desaturated-Blue-Text);
    min-width: fit-content;
    min-height: fit-content;
}
.header{
    display: flex;
    min-width: fit-content;
    flex-direction: column;
    background-color: rgba(32,34,47,255);
    padding: 3em 1.75em;
    border-bottom-left-radius: 2em;
    border-bottom-right-radius: 2em;
}
.title{
    border-bottom: 0.1em solid var(--Desaturated-Blue-Text);
}
.title h1{
    font-size: 1.5em;
    color: var(--White-Text);
    margin-right: 1.5em;
    margin-bottom: 0.25em;
}
.header .title h2{
    font-size: 0.85em;
    margin-bottom: 1.5em;
}
.light{
    color: var(--Very-Dark-Blue-Text) !important;
}
.gray{
    color: var(--Dark-Grayish-Blue-Text) !important;
}

.theme-toggle{
    display: flex;
    margin-top: 1em;
    justify-content: space-between;
    font-size: 0.75em;
    align-items: center;
    margin-bottom: 4em;
}
.toggle-button{
    height: 2.2em;
    width: 4.5em;
    border-radius: 2em;
    padding: 0.2em 0.3em;
    background-color: var(--Toggle);
    background-image: linear-gradient(90deg, hsl(210, 78%, 56%), hsl(146, 68%, 55%));
    align-content: center;
    justify-items: start;
}
.white-ball{
    height: 1.8em;
    width: 1.8em;
    border-radius: 1em;
    background-color: var(--Dark-Desaturated-Blue-Card-BG);
    transition: 0.3ms ease-in-out;
}
.white-ball:hover{
    background-color: rgba(48,59,84,255);
}
.toggle-button:hover{
    cursor: pointer;
    background-image: linear-gradient(90deg, hsl(210, 78%, 56%), hsl(146, 68%, 55%))!important;
}

.total-followers{
    display: grid;
    width: 100%;
    height: auto;
    grid-auto-rows: max-content;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 1.5em;
    padding: 1.5em;
    margin-top: -5em;
}
.facebook{
    border-top: 4px solid var(--Facebook);
}
.twitter{
    border-top: 4px solid var(--Twitter);
}
.instagram{
    background-image: linear-gradient(90deg, hsl(37, 97%, 70%), hsl(329, 70%, 58%));
    background-repeat: no-repeat;
    background-size: 100% 5px;
}
.youtube{
    border-top: 4px solid var(--YouTube);
}
.info-card{
    background-color: var(--Dark-Desaturated-Blue-Card-BG);
    width: 100%;
    height: fit-content;
    border-radius: 0.5em;
    padding: 1em 0;
    display: block;
    justify-items: center;
}
.light-hover{
    background-color: var(--Light-Grayish-Blue-Card-BG)!important;
}
.light-hover:hover{
    background-color: rgba(225,227,240,255)!important;
}
.info-card .name, .today{
    display: flex;
    gap: 0.5em;
    align-items: center;
}
.name h1{
    font-size: 0.75em;
    margin: 1.25em 0;
}
.info-card h2{
    font-size: 3.5em;
    color: var(--White-Text);
    font-weight: 600;
}
.info-card h3{
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-size: 0.85em
}
.today{
    margin-top: 1.5em;
    margin-bottom: 0.75em;
    gap: 0.25em;
}
.today h4{
    font-size: 0.75em;
    color: var(--Light-Grayish-Blue-Card-BG);
}
.green{
    color: var(--Lime-Green)!important;
}
.twitter h4, .instagram h4{
    color: var(--Lime-Green);
}
.youtube h4{
    color: var(--Bright-Red);
}
.info-card:hover, .overview-card:hover{
    cursor: pointer;
    background-color: rgba(51,58,86,255);
}
.overview{
    display: flex;
    flex-direction: column;
}
.overview-today{
    display: grid;
    width: 100%;
    height: auto;
    grid-auto-rows: max-content;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 1em;
    padding: 1.5em;
}
.overview h1{
    color: var(--White-Text);
    justify-self: start;
    margin-left: 1em;
}
.overview-card{
    background-color: var(--Dark-Desaturated-Blue-Card-BG);
    width: 100%;
    height: auto;
    border-radius: 0.5em;
    padding: 1.5em;
}
.first-line, .second-line{
    display: flex;
    align-items: end;
    justify-content: space-between;
}
.first-line{
    margin-bottom: 0.5em;
}
.second-line{
    margin-bottom: -0.25em;
}
.first-line h1{
    font-size: 0.85em;
    color: var(--Desaturated-Blue-Text);
    margin-left: 0;
}
.second-line h2{
    font-size: 2em;
    color: var(--White-Text);
    font-weight: 600;
}
.overview h4{
    color: var(--Lime-Green);
}
.youtube-views h4, .youtube-likes h4, .facebook-likes h4{
    color: var(--Bright-Red);
}




@media screen and (min-width:550px) {
    .container{
        min-width: 550px;
    }
       .total-followers{
        width: auto;
        grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
    }
    .overview-today{
        width: auto;
        grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
    }
}
@media screen and (min-width:1000px) {
    .container{
        min-width: 1000px;
    }
    .header{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 1em;
    }
    .theme-toggle{
        gap: 1em;
    }
    .title{
        border-bottom: none;
    }
    .total-followers{
        width: auto;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
    .overview-today{
        width: auto;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}
@media screen and (min-width:1440px) {
    .container{
        width: 1200px;
    }
       .total-followers{
        width: auto;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
    .overview-today{
        width: auto;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}