/*===GOOGLE FONTS===*/
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;500;700&family=Poppins:wght@400;500;600&display=swap');


/*===VARIABLES CSS===*/
:root{
    /*COLORS*/
    --first-color: #FFFBFF;
    --first-color-alt: #a94ad2 ;
    --title-color: #63405b;
    --text-color: #615e5f;
    --text-color-light: #e4c3d8;
    --text-color-lighten: #e4d6e8;
    --body-color:#fff;
    --container-color: #B9946E;

    /*Font*/
    --body-font: 'Montserrat', sans-serif;
    --h2-font-size: 1.25rem;
    --h3-font-size: 1rem ;
    --title: 40px;
    --normal-font-size: .90rem;
    --small-font-size: .850rem;
    --smaller-font-size: .75rem;
}

/*===To All===*/

*{
    font-family: var(--body-font);
    box-sizing: border-box;
    padding: 0;

}

html{
    scroll-behavior: smooth;
}

main{
    margin: auto 1rem auto 1rem;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 5px ;
}

/*Scrollbar*/

::-webkit-scrollbar{
    width:11px;
}

::-webkit-scrollbar-track{
    background: #111;
}

::-webkit-scrollbar-thumb{
    background:var(--first-color-alt);
    border-radius: 30px;
}


/*===Responsive Typography===*/
@media screen and (min-width: 968px) {
    :root{
        --h2-font-size: 1.5rem;
        --h3-font-size: 1.30rem;
        --normal-font-size: 1.20rem;
        --small-font-size: .875rem;
        --smaller-font-size: .813rem;
    }
}

/*===CSS===*/

#head{
    display: flex;
    z-index: 1;
    width: 100%;
    position:sticky;
    top: 0;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 5px ;
    background-size: initial;
    background-color: rgb(255, 251, 255);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-attachment: initial;
    background-image: none;
    font-size: large;
    height: 6rem;
}

#count{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#time{
    display: flex;
    margin-left: 2rem;
    margin-right: 2rem;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--first-color-alt);
}

.number{
    padding: 1rem;
}



#intro{
    display: flex;
    justify-content: center;
    align-items: center;
}

#desc{
    text-align: center;
}

#desc h1{
    font-size: var(--title);
    padding: 1rem;
}

#desc p{
    color: var(--text-color);
    margin: auto 10rem;
    font-size: var(--normal-font-size);
}

.regis{
    font-weight: bold;
    font-size: var(--h3-font-size);
}

#button{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem auto;
}

button{
    cursor: pointer;
    font-size: var(--normal-font-size);
    padding: 0.5rem 1.5rem;
    border-radius: 10px;
    border: none;
    color: var(--body-color);
    background-color: var(--first-color-alt);
    transition: all;
}

.but1{
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0.5rem 1.5rem;
    border-radius: 10px;
    border: none;
    color: var(--body-color);
    background-color: var(--first-color-alt);
}

#btn{
    text-decoration: none;
    color: var(--first-color);
    transition: all ease;
}

button:hover{
    background-color: var(--body-color);
    border: 2px solid var(--first-color-alt);
}

#btn:hover{
    background-color: var(--body-color);
    color: var(--first-color-alt);
}

#video{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 25%;
}

#ht{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem;

}

#ht img{
    width: 80%;
    height: 70%;
}


#get{
    display: flex;
    flex-direction: column;
    height: fit-content;
    justify-content: center;
    align-items: center;
    margin: 2rem;
    text-align: center;
}

#get .title{
    font-size: var(--title);
    margin: 2.2rem auto 1rem auto;

}

#obt{
    display: flex;
    gap:5rem;
    margin-top: 3rem;
}

#obt h1{
    font-size: var(--h2-font-size);
}

.ob1{
    width: min-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ob1 h1{
    margin-top: 2rem;
}
.ob1 p{
    font-size: var(--normal-font-size);
    width: 100%;
    margin-top: 1.5rem;
}


#acerca{
    display: flex;
    align-items: center;
    margin-bottom: 2em; 
}

#text{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 2em;
}

#text h1{
    font-size: var(--h2-font-size);
    margin-bottom: 2rem;
}

#text p{
    font-size: var(--normal-font-size);
    width: 50%;
    margin-top: auto

}

#photo{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2em;
    margin-bottom: 2em;
}
#photo img{
    width:70%;
    height:70%;
}

footer{
    background-color:var(--container-color);
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.logo-footer{
    margin: 1em;    
}

.logo-footer p {
    text-align: center;
    font-size: 1em;
}

.redes{
    display: flex;
    justify-content:center;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
}

.redes a {
    text-decoration: none;
    color: var(--first-color);
    padding: 0.2em;
    font-size: 2em;
    transition: all 1s ease;
}


/*MEDIAQ*/

/*Phone*/
@media screen  and (max-width:800px){

    main{
        margin: 0;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 5px ;
    }

    /*Intro*/     
    #head{
        position:sticky;
        top: 0;
        height: fit-content;
        padding: 0.3em;
        width: 100%;
    }
    #head p{
        margin: 0;
    }
    #head h2{
        font-size: var(--normal-font-size);
        
    }
    #count{
        flex-direction:column;
        margin: 0;
    }
    #time{
        font-size: var(--normal-font-size);

    }
 
    #intro{
        padding: 2rem;
    }

    #int{
        padding: 0.3em;
        width: 100%;
    }
    
    #desc h1{
        font-size: 1.3rem;
        margin: 0;
        padding: 0;
        padding-bottom: 1em;
    }
    
    #desc p{
        color: var(--text-color);
        font-size: var(--small-font-size);
        margin: 0;
    }
    
    #button{
        width: min-content;
        margin: 1em auto;
    }
    
    button{
        cursor: pointer;
        font-size: var();
        border-radius: 10px;
        border: none;
        color: var(--body-color);
        background-color: var(--first-color-alt);
        transition: all;
    }
    
    .but1{
        cursor: pointer;
        font-size: 1.2rem;
        padding: 0.5rem 1.5rem;
        border-radius: 10px;
        border: none;
        color: var(--body-color);
        background-color: var(--first-color-alt);
    }
    
    #btn{
        text-decoration: none;
        color: var(--first-color);
        transition: all ease;
    }
    
    button:hover{
        background-color: var(--body-color);
        border: 2px solid var(--first-color-alt);
    }
    
    #btn:hover{
        background-color: var(--body-color);
        color: var(--first-color-alt);
    }
    
    #video{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }


    #ht {
        display: none;
    }

    #get{
        width: 100%;
        display: flex;
        flex-direction: column;
        margin: 0;
        height: fit-content;
    }
    
    #get .title{
        font-size: 1.5rem;
        margin: 0;
        padding: 0;
        padding-top: 1em;
        color: var(--title-color);
    
    }
    
    #obt{
        display: flex;
        flex-direction: column;
        gap:5rem;
        margin-top: 3rem;
    }
    
    #obt h1{
        font-size: var(--h2-font-size);
    }
    
    .ob1{
        width: min-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .ob1 h1{
        margin-top: 2rem;
    }
    .ob1 p{
        font-size: var(--normal-font-size);
        width: 100%;
        margin-top: 1.5rem;
    }
    
    #acerca{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-content: center;
        height: 100%;
    }


    #text h1{
        font-size: 1.2rem;
        padding-top: 2em;
        padding-bottom: 1em;
        color: var(--title-color);
        flex-wrap: wrap;
        
    }
    
    #text p{
        font-size: var(--normal-font-size);
        width: 50%;
        margin-top: auto
    
    }
    
    
    footer{
        flex-wrap: wrap;
    }
    
    .logo-footer{
        display: flex;
        width: 50%;
        flex-direction: column;
        align-items: center;
    }

}