@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

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

body{
    display: flex;
    justify-content: center;
    height: 100vh;
    background-color: #1d2029;
    font-family: 'Inter', sans-serif;
}

.top{
    top: 0;
    border-radius: 0px 0px 20px 20px;
    position: absolute;
    width: 100%;
    height: 30vh;
    background-color: #20222f;
    z-index: 2;
}

.top.white{
    background-color:hsl(225, 100%, 98%);
}

main{
    z-index: 3;
    /* border:2px solid green; */
    width: 70vw;
    height: 100%;
    background-color: transparent;
}

.nav{
    margin: 5em auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* border:2px solid green;  */
}

.nav>.desc>p:first-child{
    color: white;
    font-size: 1.7rem;
    font-weight: 700;
    margin-bottom: 0.3em;
}

.nav>.desc>p:last-child{
    color: #8993b7;
    font-size: 1rem;
    font-weight: 700;
}

.desc{
    width: 40vw;
    /* border:2px solid green;  */
}

.toggle{
    color: #8993b7;
    display: flex;
    justify-content: flex-end;
    /* border:2px solid green;  */
}

.toggle>p{
    margin-right: 2em;
    font-weight: 700;
}

.bigrow{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    justify-self: flex-end;
}

.bigCard{
    margin-bottom: 2em;
    margin-right: 0.7em;
    padding: 2em 0 2em 0;
    width:270px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color:hsl(228, 28%, 20%);
    border-radius: 5px;
    cursor: pointer;
    flex-shrink: 1;
}

.bigCard:hover{
    background-color: #333a56;
}


.bigCard.facebook{
    border-top: 4px solid hsl(195, 100%, 50%);
}

.bigCard.twitter{
    border-top: 4px solid hsl(203, 89%, 53%);
}

.bigCard.instagram{
    border-top:4px solid transparent ;
    border-image: linear-gradient(to right,hsl(37, 97%, 70%), hsl(329, 70%, 58%));
    border-image-slice: 20;
    border-style: solid;
    border-bottom: none;
    border-left: none;
    border-right: none;
    
}

.bigCard.instagram>.name>i{
   display: block;
   background: -webkit-linear-gradient(30deg,hsl(37, 97%, 70%), hsl(329, 70%, 58%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bigCard.youtube{
    border-top: 4px solid hsl(348, 97%, 39%);
}

.bigCard.youtube>.name>i{
    color: hsl(348, 97%, 39%);
}

.bigCard.youtube>.stats{
    color: hsl(356, 69%, 56%);
}

.bigCard.youtube>.stats>i{
    margin-top: -12px;
}

.bigCard.white,.smallCard.white{
    background-color: hsl(227, 47%, 96%);
}

.bigCard.white:hover,.smallCard.white:hover{
    background-color: #e1e3f0;
}




.name{
    display: flex;
    align-items: center;
    justify-content: center;
}

.followers{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

.followers>strong{
    color: white;
    font-size: 3.4rem;
}

.followers>p{
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #8993b7;
    font-size: 1rem;
}

.stats{
    color: hsl(163, 72%, 41%);
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 2px solid green; */
    width: 120px;
}

.stats >i{
    padding: 7px 7px 0 0;
}

.stats>p{
    font-weight: 700;
    font-size: 15px;
}

.name>i{
    margin: 0px 8px 0 0;
    font-size: 22px;
    color: #198ff3;
}

.name>p{
    color:  #8993b7;
    font-weight: 700;
    font-size: 14px;
}

.name{
    margin-bottom: 15px;
    
}

/* small card */

.overview{
    color: white;
    font-weight: 700;
    font-size: 1.8rem;
    margin: 2em 0 1.5em 0;
}

.smallrow{
    /* border: 2px solid green; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.smallCard{
    margin-bottom: 2em;
    margin-right: 0.7em;
    padding: 2em 0 2em 0;
    width:270px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color:hsl(228, 28%, 20%);
    border-radius: 5px;
    cursor: pointer;
    flex-shrink: 1;
}

.smallCard:hover{
    background-color: #333a56;
}

.first,.second{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    /* border: 2px solid green; */
    width: 80%;
}

.first{
    margin-bottom: 1em;
}

.growth{
    display:inline-flex;
    justify-content: flex-end;
    /* border: 2px solid green; */
    width: 35%;
    color: hsl(163, 72%, 41%);
    font-weight: 700;
}

.first>p{
    color: #8993b7;
    font-weight: 700;
}

.first >i{
    font-size: 25px;
    color: #198ff3;
}

.second>p{
    font-weight: 700;
    color: white;
    font-size: 2rem;
}


.growth>i{
    margin-top: 5px;
    margin-right: 5px;
}

.growth.down >i{
    margin-top: 0px;
}

.smallCard.facebook>.first>i{
    color: #1990f4;
}

.smallCard.twitter>.first>i{
    color: hsl(203, 89%, 53%);
}

.smallCard.instagram>.first>i{
  display: block;
  background: -webkit-linear-gradient(30deg,hsl(37, 97%, 70%), hsl(329, 70%, 58%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.smallCard.youtube>.first>i{
    color: hsl(348, 97%, 39%);
}

.smallCard.likes>.second>.growth{
    color: hsl(356, 69%, 56%);
}


/* toggle button */

.toggle>span{
    display: inline-flex;
    background-image:linear-gradient(to right,hsl(210, 78%, 56%),hsl(146, 68%, 55%)) ;
    padding: 0.8em 1.7em 0.8em 1.7em; 
    border-radius: 20px;
    position: relative; 
}


.ball{
    position: absolute;
    left: 0;
    top: 3px;
    left: 2px;
    width: 20px;
    height: 20px;
    background-color: #262b41;
    border-radius: 50%;
    transition:transform 0.4s ease;
    cursor: pointer;
    
}

.ball.white{
    background-color: white;
}

.toggle>span>input:checked + label .ball{
    transform: translateX(30px);
}


input[type=checkbox]{
    display: none;
}


.followers>.text-darkblue{
    color:hsl(230, 17%, 14%);
}

.first>.text-lightblue{
    color: hsl(228, 12%, 44%);
}

.second>.text-darkblue{
    color:hsl(230, 17%, 14%);
}

.overview>.text-darkblue{
    color:hsl(228, 12%, 44%);
}

.nav>.desc.text-darkblue{
    color:hsl(230, 17%, 14%);
}

.bigCard.white>.name>.text-darkblue{
    color:hsl(228, 12%, 44%);
}

.nav>.desc.text-darkblue>.text-darkblue{
    color:hsl(230, 17%, 14%);
}

.nav>.desc.text-darkblue>.text-lightblue{
    color:hsl(228, 12%, 44%);
}



@media (max-width:850px){
    .nav{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .nav>.desc>p:first-child{
        color: white;
        font-size: 1.7rem;
        font-weight: 700;
        margin-bottom: 0.3em;
    }

    .nav>.desc>p:last-child{
        color: #8993b7;
        font-size: 1rem;
        font-weight: 700;
    }

    .desc{
        width: 100%;
        margin-bottom: 1.2em;
    }

    .toggle{
        border-top: 0.5px solid #8993b7;
        padding-top: 1em;
        width: 100%;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    main{
        width: 80vw;
    }

    .bigCard{
        width: 100%;
    }
}

@media (max-width:702px){
    .smallCard{
        width: 100%;
    }
}