@keyframes is-scale{
    to{
        scale: 1.10;
        rotate: 1deg;
    }
}


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

body{
    
    width: 100%;
    height: 100%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background: url(https://static.wixstatic.com/media/ee0902_b7c2b13542ce4fc2825308d48ad57b89~mv2.gif/v1/fit/w_900%2Ch_900%2Cal_c%2Cq_80/file.gif);
    background-attachment: fixed;
    background-size: cover; 
    font-family:Verdana, Geneva, Tahoma, sans-serif;
        

}

.flex{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background: radial-gradient(rgba(15, 15, 15, 0.96),rgba(0, 0, 0, 0.96));
    
}

.logo{
    width: 400px;
    height: 40px;
    align-items: center;
    animation: is-scale 1s alternate-reverse infinite;
}
.logo h1{
    text-align: center;
    justify-content: center;
    margin: auto auto;
    font-size: 30pt;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
}



.dados{
    padding: 15px;
    width: 400px;
    height: max(500px,30vw);
    background-color: rgba(255, 255, 255,.7);
    border-radius: 10px;
    box-shadow: 1px 1px 8px #000;
}

.dados h2{
    text-align: center;
    text-transform: uppercase;
    color: #444;
    color: rgb(255, 140, 105);
    text-shadow: 1px 1px 2px #000;
}

.dados p{
    text-align:center;
    padding: 10px 0px;
    
}


.inputs{
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 10px;
}

.inputs input{
   height: 30px;
   border-radius: 20px;
   border: 1px solid #f7c0af;
   text-align: center;
   box-shadow: 1px 1px 1px #000;
   padding: 10px;
}

.inputs input:hover{
    scale: 1.03;
    transition: 1s;
}



label a{
    position:relative;
    left:170px;
    font-size: 10pt;    
    text-decoration: none;
}

.termos{
    padding: 20px;
    text-align: justify;
}

.termos a{
    position:relative;
    left: 0px;
    font-size: 11pt;
}

.botoes{
    display: flex;
    justify-content: space-evenly;
}
.botoes button{
    padding: 10px;
    border-radius: 20px;
}

.botoes button:hover{
    scale: 1.05;
    transition: 1s;
}
.botoes a{
    text-decoration: none;
    padding: 10px;
    text-shadow: 1px 1px 2px #000;
    text-transform: uppercase;
}
.avancar{
    background-color: #ff7f50;
    border: 1px solid #e05701;
    box-shadow: 1px 1px 2px #000;

}

.voltar{
    background: rgb(203, 203, 203) ;
    border: 1px solid rgb(243, 103, 52);
    box-shadow: 1px 1px 2px #000;
}

  .voltar a{
    color: rgb(246, 57, 0);
   /* text-shadow: 1px 1px 1px #000;*/
    text-transform: uppercase;
}
  .avancar a{
    color: rgb(255, 255, 255);
}
.continuar-com{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 30px;
}
.gmail{
    position: relative;
    display: flex;
    justify-content: space-between;
    left: 25px;
    width: 300px;
    background-color: #fff;
    border: solid 2px #ddd;
    border-radius: 20px;
    justify-content: center;
    margin: 10px;
    box-shadow: 2px 2px 2px #000
}

.gmail a{
  color:#000;
  text-decoration: none;
}
.facebook{
    position: relative;
    left: 25px;
    width: 300px;
    background-color: #0404de;
    color: #fff;
    border: solid 2px #020278;
    border-radius: 20px; 
    margin: 10px;
    display: flex;
    box-shadow: 2px 2px 2px #000;
    text-indent:35px;
}

.facebook a{
  color:#fff;
  text-decoration: none;
}
.gg-google{
    position:relative;
    top: 10px;
    left: -20px;
    color:#000 ;
}

.gg-facebook{
   display: flex;
   position:relative;
   top: 10px;
   left: 25px;
   color:#fff ;
}

.flex-concluir{
  position: relative;
  top: 60%;
   width: 100%;
  display: flex;
  justify-content: center;
}

.buttom-concluir{
  border: 1px solid green;
  padding: 10px 6px;
  border-radius: 20px;
  box-shadow: 1px 1px 3px #000;
  background: rgba(255, 255, 255,.5);
}

.buttom-concluir a{
  text-decoration: none;
  color: green;
  padding: 20px;
/*   text-shadow: 1px 1px 2px #000; */
}

.dados .parabens{
  position: relative;
  top: 25%;
  color: lightgreen;
}

.dados .efetuado{
  position: relative;
  top: 27%;
  color: lightgreen;
  font-size: 13pt;
  text-shadow: 1px 1px 10px #000;
/*   text-shadow: 1px 1px 2px #000; */
}

.dados .erro{
  position: relative;
  top: 25%;
  color: lightcoral;
}

.dados .verifique{
  position: relative;
  top: 27%;
  color: lightcoral;
  font-size: 15pt;
  text-shadow: 0px 0px 2px #000;
}

.dados .buttom-retomar{
  border: 1px solid red;
  padding: 10px 6px;
  border-radius: 20px;
  box-shadow: 1px 1px 3px #000;
  background: rgba(255, 255, 255,.5);
}

.dados .buttom-retomar a{
  text-decoration: none;
  color: red;
  padding: 20px;
}
@media(max-width:800px){

    .dados{
        padding-top: 50px;
    }

   .flex{
    flex-direction: column;
   }
  
}

@media(max-width:500px){


    h1{
        width: 100%;
    }

    .flex{
        width: 100vw;
        height: 100vh;
   
    }
    .dados{
        padding-top: 30%;
        width: 100%;
        height: 100%; 
        margin: 0px;certo

    }

    .logo{

        display: none;
    }

    .botoes{
        width: 100%;
        position: relative;
        top: 20px;
    }


.continuar-com{
    width: 100%;
}
label a{
    position:relative;
    left:60%;
    font-size: 10pt;    
    text-decoration: none;
}
.facebook{
    position: relative;

    width: 85%;
}

.gmail{
    width: 85%;
}

}

@media(max-width:370px){
  
    label a{
        position:relative;
        left:10px;
        font-size: 8pt;    
        text-decoration: none;
    }

    .continuar-com{
        position: relative;
        left: -12%;
        width: 100%;
    }
    
    .gmail{
        width: 100%;
    }
    .facebook{
        width: 100%;
    }
    .flex
}

@media(max-width:300px){
    .facebook p{
        font-size: 10pt
    }

    .dados{
        width: 100%;
    }

    .gmail{
        font-size: 10pt  
    }
}