:root {
    --lime-green: hsl(163, 72%, 41%);
    --bright-red: hsl(356, 69%, 56%);
    --facebook: #168ef4;
    --twitter: hsl(203, 89%, 53%);
    --instagram-1: hsl(37, 97%, 70%);
    --instagram-2: hsl(329, 70%, 58%);
    --youtube: hsl(348, 97%, 39%);
    --gray: #5f616d;
    --cardGray: #f0f3fa;
    --lightgray: #f8f9fe;
    --base-Background: white;
    --baseColor: #1d2029;
    --cardTitle: #6f717e;
    --switchSpinner: white;
    --switch: #5f616d;
}
body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    color: var(--baseColor);
    background: var(--base-Background);
}
/* header */

.header {
    /* display: none; */
    background: var(--lightgray);
    padding-bottom: 100px;
    border-radius: 0 0 12px 12px;
    padding-top: 2em;
}

h1 {
    margin: 0;
    font-size: 1.7em;
}

h2 {
    color: var(--gray);
}

.header-total {
    color: var(--gray);
    margin: .5em 0;
    font-weight: 600;
    border-bottom: 1px solid var(--gray);
    padding-bottom: 1.7em;
}

/* top card */

.top-cards {
    margin-top: -50px;
    margin-bottom: 3em;
    /* display: none; */
}
/* card */

.card {
    
    border-radius: 5px;
    overflow: hidden;
    background: var(--cardGray);
    text-align: center;
    padding: 1.7em 0;
    position: relative;
    
}

.card:before {
    content: "";
    height: 4px;
    display: block;
    position: absolute;
    
    top: 0;
}

.card span {
    display: block;
}

.card.facebook:before {
    background: var(--facebook);
}

.card.twitter:before {
    background: var(--twitter);
}

.card.instagram:before {
    background-image: linear-gradient(to right, var(--instagram-1) 0%, var(--instagram-2) 100% );
}

.card.youtube:before {
    background: var(--youtube);
}

.wrapper {
    padding: 0 30px;
}

.card-followers-number {
    font-size: 50px;
    font-weight: 700;
}

.card-followers-title{
    display: block;
    text-transform: uppercase;
    color: var(--cardTitle);
    letter-spacing: 4px;
    font-size: .75em;
    margin-top: 10px;
}

.card-title {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--cardTitle);
    font-size: 12px;
    font-weight: bold;
}

.card-title img {
    margin-right: 5px;
}

.card-today {
    margin-top: 20px;
    color: var(--lime-green);
    font-size: .7em;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-today img {
    margin-right: 5px;
}

.grid {
    display: grid;
    grid-row-gap: 25px;
}

/* overview */

.overview {
    /* border: 1px solid red; */
    padding-bottom: 2em;    
}

.card-small {
    /* border: 1px solid green; */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-row-gap: 1em;
    background: var(--cardGray);
    border-radius: 8px;
    padding: 1.7em;
}

.card-small p {
    margin: 0;
}
.card-small-views {
    /* border: 1px solid black; */
    color: var(--cardTitle);
    font-weight: bold;
    font-size: .9em;
}

.card-small-icon {
    /* border: 1px solid orange; */
    text-align: right;
}

.card-small-number {
    /* border: 1px solid purple; */
    font-weight: bold;
    font-size: 2.5em;
    line-height: .9;
}

.card-small-porcentage {
    /* border: 1px solid blue; */
    text-align: right;
    display: flex;
    align-items: flex-end;
    color: var(--lime-green);
    justify-content: flex-end;
    font-weight: bold;
}

.card-small-porcentage span {
    display: flex;
    align-items: center;
}

.card-small-porcentage img {
    margin-right: 5px;
}

.card-small-porcentage.is-danger{
    color: var(--bright-red);
}

/* Dark Mode */

.switch {
    /* border: 1px solid red; */
    height: 40px;
    display: block;
    border-radius: 20px;
    background: var(--switch);
    width: 80px;
    padding: 5px;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
}

.switch:before{
    content: '';
    display: block;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background: var(--switchSpinner);
    transform: translateX(40px);
    transition: .3s;
    will-change: transform;
}


.checkbox:checked ~ .switch:before {
    transform: translateX(0);
}

/* ocultar el checkbox */

.checkbox {
    display: none;
}

.dark-mode{
    display: flex;
    justify-content: space-between;
    margin-top: 1em;
}

.is-light-mode {
    --gray: #5f616d;
    --cardGray: #f0f3fa;
    --lightgray: #f8f9fe;
    --base-Background: white;
    --baseColor: #1d2029;
    --cardTitle: #6f717e;
    --switchSpinner: white;
    --switch: #5f616d;
}

.is-dark-mode {
    --cardGray: #252b43;
    --gray: #8088ad;
    --lightgray: #1d2029;
    --base-Background: #1d2029;
    --baseColor: white;
    --cardTitle: #8088ad;
    --switchSpinner: #282943;
    --switch: linear-gradient(to right, #4796d2 0%, #37ce8f 100% );
}

/* Media Querys */


@media screen and (min-width: 480px) {

    .grid {
        /* border: 1px solid green; */
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 25px;
    }

    .wrapper{
        max-width: 1440px;
        margin: auto;
    }
}

@media screen and (min-width: 768px) {

    .grid {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .header-total {
        border: none;
    }
}

@media screen and (min-width: 1024px) {

    .grid {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .header-total {
        border: none;
    }

    .header-grid {
        display: grid;
        grid-template-columns: 1fr 200px;
    }

}

/* DARK MODE */

@media(prefers-color-scheme: dark){
    /* body {
        background: #1d2029;
        color: white;
    } */

    /* .header {
        background: #1d2029;
    }
     */
    :root {
        --cardGray: #252b43;
        --gray: #8088ad;
        --lightgray: #1d2029;
        --base-Background: #1d2029;
        --baseColor: white;
        --cardTitle: #8088ad;
        --switchSpinner: #282943;
        --switch: linear-gradient(to right, #4796d2 0%, #37ce8f 100% );
    }

    /* .card-followers-title {
        color: 8088ad;
    }
/*  */
    /* .card-small {
        background: #252b43;
    }  */

    /* .card-small-views {
        color: #8088ad;
    } */
/* 
    .card-title {
        color: var(--gray);
    } */
        /* colocar el boton en darkmode */
    /* .switch {
        background-image: linear-gradient(to right, #4796d2 0%, #37ce8f 100% ) ;
    } */

    /* .switch:before {
        background: #282943;
    } */

}