body{
    width: auto;
    height: auto;
background-image: linear-gradient(to right,rgb(134, 53, 53),rgb(73, 7, 7),rgb(71, 9, 9),rgb(40, 40, 100),black);    display:flex;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
}
.contain{
    width: 400px;
    height: 500px;
}


.float{
position: absolute;
}
.sign_in_one:checked ~.two_page{
   
        display: none;
    
}
.sign_up_one:checked ~.one_page{
     display: none;
}
.label_sign_in_one {
text-decoration:underline orange;
}
.label_sign_up_one {
text-decoration:underline orange ;
}
.one_line{
    color:aliceblue;
}
input{
    border-radius: 20px;
}
.sign_in_two,.sign_up_two{
    width: 300px;
    height: 35px;
            position: relative;
left: 20px;
    background: orange;
    color:aliceblue;
}
.forget_password,.already{
    text-decoration: none;
    color:aliceblue;
            position: relative;
left: 110px;
}
.user_name_one,.email_address,.repeat_password{
    color: black;
    font-weight: 900;
    opacity: 0.4;
}
.password_one{
    color: aliceblue;
     font-weight: 900;
    opacity: 0.4;
       

}
nav{
    border-radius: 5px;
      width: 400px;
    height: 500px;
    overflow: hidden;
}
hr{
    width: 350px;
}
.one_page{
    display: grid;
}
form:hover,form:focus-within{
perspective: 800px;
transform-style: preserve-3d;
transition:  transform 0.5s;
}

form:has(.sign_up_one:checked){
transform: rotateY(360deg);
}
.one_img{
position: absolute;
z-index: -1;
border-radius: 10px;
         background: url("1755957274590.jpeg") no-repeat ;  
    background-size:cover;
    width: 400px;
    height: 500px;
    z-index: -1;
    opacity: 0.4;
}
.contain{
    position: relative;
left: 25px;
}
.linea{
    width: 10px;
    height: 10px;
    background-color: rgb(64, 0, 255);
    animation-duration: 2s;
    animation-name: linea;
    animation-iteration-count: infinite;
}

@keyframes line{
0%{
    translate: 0 0;
}
25%{
    translate: 0 500px;
    background-color: red;
}
50%{

    background-color: orange;
translate: 400px 500px;}
75%{
 
    background-color: yellow;
translate: 400px 0;}
100%{
 
    background-color:blue;
translate: 0 0;}
}

.line1{
    width: 10px;
    height: 10px;
    background-color: rgb(64, 0, 255);
    animation-duration: 4s;
    animation-name: line1;
    animation-iteration-count: infinite;
}

@keyframes line1{
0%{
    translate: 0 0;
}
25%{
    translate: 0 500px;
    background-color: red;
}
50%{

    background-color: orange;
translate: 400px 500px;}
75%{
 
    background-color: yellow;
translate: 390px 0;}
100%{
 
    background-color:blue;
translate: 0 0;}
}

.line2{
    width: 10px;
    height: 10px;
    background-color: rgb(64, 0, 255);
    animation-duration: 6s;
    animation-name: line;
    animation-iteration-count: infinite;
}

@keyframes line2{
0%{
    translate: 0 0;
}
25%{
    translate: 0 500px;
    background-color: red;
}
50%{

    background-color: orange;
translate: 400px 500px;}
75%{
 
    background-color: yellow;
translate: 390px 0;}
100%{
 
    background-color:blue;
translate: 0 0;}
}

.line3{
    width: 10px;
    height: 10px;
    background-color: rgb(64, 0, 255);
    animation-duration: 8s;
    animation-name: line3;
    animation-iteration-count: infinite;
}

@keyframes line3{
0%{
    translate: 0 0;
}
25%{
    translate: 0 500px;
    background-color: red;
}
50%{

    background-color: orange;
translate: 400px 500px;}
75%{
 
    background-color: yellow;
translate: 390px 0;}
100%{
 
    background-color:blue;
translate: 0 0;}
}



.line4{
    width: 10px;
    height: 10px;
    background-color: rgb(64, 0, 255);
    animation-duration: 10s;
    animation-name: line4;
    animation-iteration-count: infinite;
}

@keyframes line4{
0%{
    translate: 0 0;
}
25%{
    translate: 0 500px;
    background-color: red;
}
50%{

    background-color: orange;
translate: 400px 500px;}
75%{
 
    background-color: yellow;
translate: 400px 0;}
100%{
 
    background-color:blue;
translate: 0 0;}
}
.l{
    position: absolute;
}