@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');



*



{



margin: 0;



padding: 0;



box-sizing: border-box;



font-family: 'Poppins', sans-serif;



}



body



{



margin-top: 20px;    



display: flex;



justify-content: center;



align-items: top;



min-height: 100vh;



background: #FF6600x; /* altera cor do Corpo*******************/



}



.box_lg



{



position: relative;



width: 300px;



height: 330px;



background: #F7F7F7; /* altera cor fundo do Efeito*******************/



border-radius: 8px;



overflow: hidden;



}



.box_lg::before



{



content:'';



position: absolute;



top: -50%;



left: -50%;



width: 300px;



height: 330px;



background: linear-gradient(0deg,transparent,#45f3ff,#45f3ff);/* altera cor layout*******************/



transform-origin: bottom right;



animation: animate 6s linear infinite;



}



.box_lg::after



{



content:'';



position: absolute;



top: -50%;



left: -50%;



width: 300px;



height: 330px;



background: linear-gradient(0deg,transparent,#45f3ff,#45f3ff);/* altera cor layout********************************/;



transform-origin: bottom right;



animation: animate 6s linear infinite;



animation-delay: -3s;



}



@keyframes animate



 {



 0%



 {



 transform: rotate(0deg);



 }



 100%



 {



 transform: rotate(360deg);



 }



}



.form_lg



{



position: absolute;



inset: 2px;



border-radius: 8px;



background: #17375E; /*  altera cor Fundo dos input********************************/



z-index: 10;



padding: 10px 40px;



display: flex;



flex-direction: column;



}



.form_lg h2



{



color: #45f3ff; /* altera cor Escrita H2********************************/



font-weight: 500;



text-align: center;



letter-spacing: 0.1em;



}



.form_lg h1

{

color: #45f3ff; /* altera cor Escrita H1********************************/

font-weight: 500;

text-align: center;

text-transform:uppercase;

letter-spacing: 0.1em;



}



.inputbox_lg



{



position: relative;



width: 100%;



margin-top: 20px;



}



.inputbox_lg input



{



position: relative;



width: 100%;



padding: 20px 10px 10px;



background: transparent;



border: none;



outline: none;



color: #23242a; /* altera cor escrita dentro input********************************/



font-size: 1em;



letter-spacing: 0.05em;



z-index: 10;



}



.inputbox_lg span



{



position: absolute;



left: 0;



padding: 20px 0px 10px;



font-size: 1em;



color: #8f8f8f;/*  altera cor escrita sob input antes de ativado********************************/



pointer-events: none;



letter-spacing: 0.05em;



transition: 0.5s;



}



.inputbox_lg input:valid ~ span,



.inputbox_lg input:focus ~ span



{



color: #FFFFFF; /* altera cor escrita sob input ativado********************************/



transform: translateX(0px) translateY(-34px);



font-size: 0.75em;



}



.inputbox_lg i



{



position: absolute;



left: 0;



bottom: 0;



width: 100%;



height: 2px;



background: #45f3ff; /* altera Base do input********************************/



border-radius: 4px;



transition: 0.5s;



pointer-events: none;



z-index: 9;



}



.inputbox_lg input:valid ~ i,



.inputbox_lg input:focus ~ i



{



height: 44px;



}



.links_lg



{



display: flex;



justify-content: space-between;



}



.links_lg a



{



margin: 10px 0;



font-size: 0.75em;



color: #8f8f8f;



text-decoration: none;



}



.links_lg a:hover,



.links_lg a:nth-child(2)



{



color: #45f3ff; /* altera cor Cadastrar/Recuperar senha********************************/



}



input[type="submit"]



{



border: none;



outline: none;



background: #45f3ff; /* altera cor Botão Entrar********************************/



padding: 11px 25px;



width: 100px;



margin-top: 10px;



border-radius: 4px;



font-weight: 600;



cursor: pointer;



}