@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: #23242a;

}
 
 /*********Box Acesso************/
 
.box_lg

{

position: relative;

width: 300px;

height: 350px;

background: #1c1c1c;

border-radius: 8px;

overflow: hidden;

}

.box_lg::before

{

content:'';

position: absolute;

top: -50%;

left: -50%;

width: 300px;

height: 350px;

background: linear-gradient(0deg,transparent,#FF0000,#FF0000);/* 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: 350px;

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

transform-origin: bottom right;

animation: animate 6s linear infinite;

animation-delay: -3s;

}

/*************Box Login Admin**************/

.box_lgadm

{

position: relative;

width: 300px;

height: 420px;

background: #1c1c1c;

border-radius: 8px;

overflow: hidden;

}

.box_lgadm::before

{

content:'';

position: absolute;

top: -50%;

left: -50%;

width: 300px;

height: 420px;

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

transform-origin: bottom right;

animation: animate 6s linear infinite;

}

.box_lgadm::after

{

content:'';

position: absolute;

top: -50%;

left: -50%;

width: 300px;

height: 420px;

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

transform-origin: bottom right;

animation: animate 6s linear infinite;

animation-delay: -3s;

}
/*************Fim Box Login Admin**************/
/*************Box Cadastro**************/

.box_lgcad

{

position: relative;

width: 300px;

height: 750px;

background: #1c1c1c;

border-radius: 8px;

overflow: hidden;

}

.box_lgcad::before

{

content:'';

position: absolute;

top: -50%;

left: -50%;

width: 300px;

height: 750px;

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

transform-origin: bottom right;

animation: animate 6s linear infinite;

}

.box_lgcad::after

{

content:'';

position: absolute;

top: -50%;

left: -50%;

width: 300px;

height: 750px;

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

transform-origin: bottom right;

animation: animate 6s linear infinite;

animation-delay: -3s;

}
/*************Fim Box Cadastro**************/
@keyframes animate

 {

 0%

 {

 transform: rotate(0deg);

 }

 100%

 {

 transform: rotate(360deg);

 }

}

.form_lg

{

position: absolute;

inset: 2px;

border-radius: 8px;

background: #28292d;

z-index: 10;

padding: 10px 20px;

display: flex;

flex-direction: column;

}

.form_lg h2

{

color: #D7D7D7 ;/* altera cor layout********************************/

font-weight: 500;

text-align: center;

letter-spacing: 0.1em;

}

.form_lg h1
{
color: #D7D7D7;/* altera cor layout********************************/
font-weight: 500;
text-align: center;
text-transform:uppercase;
letter-spacing: 0.1em;

}

.form_lg h6
{
color: #FF0000;/* altera cor layout********************************/
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;

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;

pointer-events: none;

letter-spacing: 0.05em;

transition: 0.5s;

}

.inputbox_lg input:valid ~ span,

.inputbox_lg input:focus ~ span

{

color: #FF0000 ;/* altera cor layout********************************/

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

font-size: 0.75em;

}

.inputbox_lg i

{

position: absolute;

left: 0;

bottom: 0;

width: 100%;

height: 2px;

background: #D7D7D7;/* altera cor layout********************************/

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: #FF0000 ;/* altera cor layout********************************/

}

input[type="submit"]

{
border: none;
outline: none;

background:#23242A ;/* altera cor layout********************************/
color:#D7D7D7;
padding: 11px 25px;
width: 100%;
margin-top: 10px;
border:solid 1px #666;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
box-shadow: 2px 2px 4px #666;
}
input[type="submit"]:hover{
background: #D7D7D7 ;/* altera cor layout********************************/
color:#000;    
}

input[type="button"]

{
border: none;
outline: none;

background:#23242A ;/* altera cor layout********************************/
color:#D7D7D7;
padding: 11px 25px;
width: 100%;
margin-top: 10px;
border:solid 1px #666;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
box-shadow: 2px 2px 4px #666;
}
input[type="button"]:hover{
background: #D7D7D7 ;/* altera cor layout********************************/
color:#000;    
}
.div1{
	width:100%;
	position:fixed;
	background:url(img/back_logo_copa.png);
}


.cabecario{
	padding:10px;
	position:relative;
	text-align: center; 
	z-index:10;
}