@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');


/*
    INDEX START
*/

/* Grade */

#container{
    display: grid;
    grid-template: 100px 1fr 1fr 4fr / 1fr 1fr;
    background-color: #F8F8FF;
    gap: 20px 50px;
    min-height: 600px;
    height: 100vh;
    max-height: 900px;
    padding: 40px;
    place-content: center center;
    place-items: center center;
    text-align: center;
}
.grid0{ grid-area: 1 / 1 / span 1/ span 1 ;}
.grid1{ grid-area: 2 / 1 / span 1/ span 1 ;}
.grid2{ grid-area: 3 / 1 / span 1/ span 1 ;}
.grid3{ grid-area: 4 / 1 / span 1/ span 1 ;}
.grid4{ 
    grid-area: 1/2/-1/-1;
    align-self: center;
}


/* imagem da grade*/


#container h1, #container strong{font-family: 'Lilita One'}
#container h1 {
    font-size: clamp(0.85em,8vw, 3em);
    color: #656565;
    text-align: center;
    strong { 
        font-weight: 400;
        color: var(--borda-degrade);
    }
    
}



#container p { 
    font-size:clamp(1em,1vw,1.5em);
    text-align: justify;
    padding: 0 1em 1em 1em;
    text-indent: 2em;
    
            


}

.buttonmain{
    font-size: clamp(1em,1.5vw,1.5em);
    padding: 1em 1em;
    margin-top: 10px;
    border-radius: 50px;
    border: none;
    cursor: pointer;

    }
.fullbutton:active,.buttonmain:active{
    transform: translateY(3px);
    box-shadow: 1px 3px 3px 2px rgba(0,0,0,0.25);
    }

.fullbutton:hover,.buttonmain:hover{
    text-decoration: underline;}
        
    
.buttonmain1{color: white; background-image: var(--degrade);}
.buttonmain2{color: var(--bordadegrade)}

#lotusid{

    margin-top: 50px;
    position: relative;
    top:0%;
    width: 35vw;
    min-width: 300px;
    max-width: 500px;
    aspect-ratio: 5/2;
    filter: drop-shadow(20px 25px 10px rgba(0, 0, 0, 0.25));


    #lotus1{
        width: 50%;
        height: 104%;
        top:0%;
        left: 0%;
        border-radius: 0px 400px;
    }

    #lotus2{
        top:-12%;
        left: 18%;
        transform: rotate(-70deg);
    }  
    #lotus3{
        top:-18%;
        left: 30%;
        transform: rotate(-45deg);
    }    
    #lotus4{
        top:-10%;
        left: 42%;
        transform: rotate(-20deg);

    }  
    #lotus5{
        width: 50%;
        height: 104%;
        top:0%;
        left: 50%;
        border-radius: 400px 0px;

    }


    .lotus{
        width: 41.57%;
        height: 100%;
        box-sizing: border-box;
        position: absolute;
        border-radius: 100000px 0px;
        background: rgba(226, 204, 197, 0.67);
        border: #000000 solid 1px;
    }

}

.img1{
    background-image: url('../img/imagem_home/img1_700.jpg');
    aspect-ratio: 16/12;
    min-width: 350px;
    width: 50vw;
    max-width: 800px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: #ffffff solid 3px;
    border-radius: 50px;
    box-shadow: 25px 25px 250px 75px rgba(0, 0, 0, 0.25);
}

@media screen and (max-width: 768px){
    em{display: block;}
    #container{
        grid-template: auto auto auto auto 250px / 1fr;
        grid-auto-rows: 100px;
        grid-auto-columns: 100px;
        background-color: #F8F8FF;
        gap: 20px;
        margin: 0px;
        padding: 20px;        
        height: auto;
        place-content: center center;
        place-items: center center;
        
    }

    #lotusid{width: 90vw;}

    .grid0{ grid-area: 1 / 1 / span 1/ span 1 ;}
    .grid1{ grid-area: 2 / 1 / span 1/ span 1 ;}
    .grid2{ grid-area: 4 / 1 / span 1/ span 1 ;}
    .grid3{ grid-area: 5 / 1 / span 1/ span 1 ;} 
    .grid4{ grid-area: 3 / 1 / span 1 / 2}  

}


@media screen and (min-width: 600px) and (max-width: 900px){

    #container{
        grid-template: 100px 1fr 1fr auto / 1fr 1fr;
    }
    .img1{
        aspect-ratio: 16/12;
    }
    .grid0{ grid-area: 1 / 1 / span 1/ span 2 ;}
    .grid1{ grid-area: 2 / 1 / span 1/ span 1 ;}
    .grid2{ grid-area: 3 / 1 / span 1/ span 1 ;}
    .grid3{ grid-area: 4 / 1 / span 1/ span 2 ;align-self: flex-start;}
    .grid4{ 
        grid-area: 2/2/-1/-2;
        align-self: flex-start;
    }

}

@media screen and (min-width: 600px) and (max-width: 768px){
    #container{
        grid-template: 100px 300px 1fr auto / 1fr 1fr;
    }
    .grid0{ grid-area: 1 / 1 / span 1/ span 2 ;}
    .grid2{ grid-area: 3 / 1 / span 1/ span 2 ;}
    .grid4{ 
        grid-area: 2/2/3/3;
        align-self: center;
    }



}

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

    .grid0{ grid-area: 1 / 1 / span 1/ span 2 ;}
    .grid4{ 
        grid-area: 2/2/-1/-2;
        align-self: flex-start;
    }

}
  


/*
    INDEX END
*/




/* SUA PELE START */

    
#suapele{
    background-image: url("./img/facescan.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: grid;
    
}

#suapele section h1{
    position: absolute;
    top: 40%;
    left:60%
}



#suapele #button{
    background-image: var(--degrade);
    color: var(--fonte-clara);
    background-image: var(--degrade);
    color: var(--fonte-clara);
    height: 40px;
    padding: 5px;
    margin: 5px;
    font-size: 20px;
    border-radius: 16px;
    border: solid 1px #B76A66;
    text-shadow: 2px 2px  #00000050;
    top: 57%;


}


#suapele input[type]{
    background-image: var(--degrade);
    color: var(--fonte-clara);
    background-image: var(--degrade);
    color: var(--fonte-clara);
    height: 60px;
    padding: 100x;
    margin: 5px;
    font-size: 20px;
    border-radius: 16px;
    border: solid 1px #B76A66;
    text-shadow: 2px 2px  #00000050;
    text-align: center;
    position: absolute;
    top:50%;
    left: 50%;

}

/* SUA PELE END */