*{
    margin: 0;
    font-family: system-ui;
}

body{
    background-color: #eeee;
    height: 2000px;}




header{
    background-color: blue;
    color: wheat;
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-family: system-ui;
}

.intro-svg{
    transform: rotateX(180deg);
    fill: #0000ff;
    margin-top: -1px;
    width: 100%;
}

hr{

}

::-webkit-scrollbar{
    display: none;
}

::-webkit-scrollbar-thumb{
    background-color: blue;
    border-radius: 11px;
    height: 80px;
}

::-webkit-scrollbar-track{
    background-color: #efefef;
    border-radius: 20px;

}

/* ############################################################################################################################ */
/* ############################################################################################################################ */
/* ############################################################################################################################ */


#about{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 200px;
}

#about .img{
    border: 30px blue solid;
    border-radius: 150px;
    background-color: blue;
}

#about div img{
    border-radius: 130px;
    width: 250px;
    height: 250px;
}


#about .p{
    width: 400px;
}

@media (max-width:1000px){
    
    #about{
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        margin-top: 200px;
        flex-direction: column;
        text-align: center;
    }

    #about .p{
        width: 350px;
        font-size: 25px;
        margin-top: 20px;
    }
}


/* ############################################################################################################################ */
/* ############################################################################################################################ */
/* ############################################################################################################################ */




#go_to{
    display: flex;
    flex-direction: row;
    margin-top: 300px;
    justify-content: space-evenly;
    align-items: center;
}



#go_to .new{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 275px;
    border: 10px #cbcbcb solid;
    border-radius: 10px;
    box-shadow: 19px 20px 20px 0px #646464;
}

#go_to .new p{
    padding: 30px;
    font-size: 15px;
}

#go_to .new a{
    width: 100%;
    background-color: blue;
    border: none;
    color: wheat;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
}

#go_to .new a button{
    width: 100%;
    background-color: blue;
    border: none;
    color: wheat;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}


@media(max-width:1000px){
    #go_to{
        display: flex;
        flex-direction: column-reverse;
        margin-top: 300px;
        align-items: center;
    }
    
    #go_to .new{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 275px;
        border: 10px #cbcbcb solid;
        border-radius: 10px;
        box-shadow: 19px 20px 20px 0px #646464;
        margin-top: 50px;
    }
}


/* ############################################################################################################################ */
/* ############################################################################################################################ */
/* ############################################################################################################################ */





#folo{
    width: 100%;
    height: 500px;
    /* background-color: aquamarine; */
    position: relative;
}


#folo #folo_in{
    width: 90px;
    height: 90px;
    background-color: blue;
    color: wheat;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 17px;
    position: absolute;
    left: calc(230% / 5);
    top: 45%;
    cursor: pointer;
}


#folo a{
    text-decoration: none;
}


#folo img{
    width: 80px;
    height: 80px;
    border-radius: 50%;
}


#folo #facebook{
    position: absolute;
    left: calc(200% / 6);
    top: 60%;
    opacity: 0;
    animation-name:mov_facebook ;
    animation-duration: 1s;
    animation-timing-function:linear;
    animation-fill-mode: forwards;
    display: none;



}


#folo #instgram{
    position: absolute;
    left: calc(190% / 5);
    top: 45%;
    opacity: 0;
    animation-name:mov_instgram ;
    animation-duration: 1s;
    animation-timing-function:linear;
    animation-fill-mode: forwards;
    display: none;


}


#folo #tiktok{
    position: absolute;
    left: calc(230% / 5);
    top: 27%;
    opacity: 0;
    animation-name: mov_tiktok;
    animation-duration: 1s;
    animation-timing-function:linear;
    animation-fill-mode: forwards;
    display: none;

}


#folo #twittet{
    position: absolute;
    right: calc(190% / 5) ;
    top: 45%;
    opacity: 0;    
    animation-name:mov_twittet ;
    animation-duration: 1s;
    animation-timing-function:linear;
    animation-fill-mode: forwards;
    display: none;


}


#folo #youtube{
    position: absolute;
    right: calc(200% / 6);
    top: 60%;
    opacity: 0;
    animation-name:mov_youtube ;
    animation-duration: 1s;
    animation-timing-function:linear;
    animation-fill-mode: forwards;
    display: none;


}


@media (max-width:1000px){

    #folo #folo_in{
        width: 90px;
        height: 90px;
        background-color: blue;
        color: wheat;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 17px;
        position: absolute;
        left: calc(80% / 2);
        top: 45%;
        cursor: pointer;
    }


    #folo #facebook{
        position: absolute;
        left: calc(1%);
        top: 60%;
        opacity: 0;
        animation-name:mov_facebook ;
        animation-duration: 1s;
        animation-timing-function:linear;
        animation-fill-mode: forwards;
        display: none;
    
    
    
    }
    
    
    #folo #instgram{
        position: absolute;
        left: calc(100% / 7);
        top: 45%;
        opacity: 0;
        animation-name:mov_instgram ;
        animation-duration: 1s;
        animation-timing-function:linear;
        animation-fill-mode: forwards;
        display: none;
    
    
    }
    
    
    #folo #tiktok{
        position: absolute;
        left: calc(80% / 2);
        top: 27%;
        opacity: 0;
        animation-name: mov_tiktok;
        animation-duration: 1s;
        animation-timing-function:linear;
        animation-fill-mode: forwards;
        display: none;
    
    }
    
    
    #folo #twittet{
        position: absolute;
        right: calc(100% / 7);
        top: 45%;
        opacity: 0;
        animation-name: mov_twittet;
        animation-duration: 1s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
        display: none;
    
    
    }
    
    
    #folo #youtube{
        position: absolute;
        right: calc(1%);
        top: 60%;
        opacity: 0;
        animation-name:mov_youtube ;
        animation-duration: 1s;
        animation-timing-function:linear;
        animation-fill-mode: forwards;
        display: none;
    
    
    }
    
}

@keyframes mov_facebook{

    0%{
        top: 60%;
        opacity: 0;

    }
    100%{
       top: 50%;
       opacity: 1;
    }
}
@keyframes mov_instgram{

    0%{
        top: 45%;
        opacity: 0;
    }
    100%{
       top: 35%;
       opacity: 1;
    }
}
@keyframes mov_tiktok{

    0%{
        top: 27%;
        opacity: 0;
    }
    100%{
       top: 17%;
       opacity: 1;
    }
}
@keyframes mov_twittet{

    0%{
        top: 45%;
        opacity: 0;
    }
    100%{
        top: 35%;
        opacity: 1;
    }
}
@keyframes mov_youtube{

    0%{
        top: 60%;
        opacity: 0;
    }
    100%{
       top: 50%;
       opacity: 1;
    }
}


/* ############################################################################################################################ */
/* ############################################################################################################################ */
/* ############################################################################################################################ */


footer{
    margin: 0;
    height: 220px;
    display: grid;
    background-color: black;
    grid-template-columns: calc(100%/3) calc(100%/3) calc(100%/3);
    justify-items: center;
    align-items: center;
    color: antiquewhite;
}


footer div ul li{
    margin: 8px;
}

footer div ul a :hover{
    color: goldenrod;
}

footer #co::selection{
    background:none;
    
}


/* ############################################################################################################################ */
/* ############################################################################################################################ */
/* ############################################################################################################################ */



#AD{
    /* margin-top: calc(50% / 2); */
    /* margin-left: calc(100% / 2); */
    position: fixed;
    z-index: 2;
    width: 100%;
    /* height: 500px; */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2%;
}

#AD div{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
    height: 400px;
    position: relative;
}

#AD p{
    font-size: 20px;
    text-align: center;
}

#AD #button_AD{
    transform: translate(-150px, 10px);
    left: 72px;
    top: 20px;
    font-size: 20px;
}

#AD img{
    width: calc(300px);
    height: calc(200px);
}

#AD button{
    cursor: pointer;
}