html,body{
    margin: 0;
    padding: 0;
}

#view_layout{
    min-height: 100vh;
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    background-image: url('dark_forest_02.jpg');
    background-repeat: no-repeat;  
 /*   background: linear-gradient(45deg, rgba(2,0,36,1) 0%, rgba(5, 21, 56, 0.74) 53%, rgba(29, 90, 219, 0.651) 100%); 
*/
}

#container{
margin: 50px;    
display: flex;
flex-direction: row;
flex-grow: 1;
justify-content: center;
align-items: center;
background: rgba(3, 3, 3, 0.555); 
filter: drop-shadow(rgba(0, 0, 0, 0.473) 1rem 1rem 3px);
}

.user_authentiction{
  display: flex;
  flex-direction: column; 
  background: transparent;
}

.form{   
min-width: 350px;    
display: flex;
flex-grow: 1;
flex-direction: column;
background: rgba(0, 0, 0, 0.13);
align-items: center;
color: wheat;
}

.form a{
    color: wheat;
}

.form input{
  margin: 10px;
  min-width: 80%;
  min-height: 36px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding-left: 10px;
  background: transparent;
  border: none;
  border-bottom: 1px solid wheat;
  font-size: 18px;
  color: wheat;
  outline: none;
}

.form button{
   margin: 15px; 
   min-width: 150px;
   min-height: 40px;
   display: flex;
   flex-grow: 1;
   flex-direction: column;
   align-self: center;  
   text-align: center;
   align-items: center;
   justify-content: center;
   background: rgba(61, 61, 61, 0.082);
   color: rgba(255, 240, 240, 0.575);
   font-size: large;
   border-radius: 5px;
   filter: drop-shadow(black 1px 1px 2px);
 }

.form button:hover{
    background: black;
    color: white;
}

.cover{  
    position: absolute;
    margin-left: -350px;
    display:flex;
    min-width: 350px;
    min-height: 450px;    
    align-items: center;
    background: rgb(17, 17, 17); 
    justify-content: center;
}


#switch{
    position: absolute;
    margin-left: -350px;
    display: none;
}

#toggle_id{
    position: absolute;
    margin-left: -350px;
    font-size: 30px;
    color: wheat;
    z-index: 3;
    transition: .75s;
}

#switch:not(:checked)  ~  #toggle_id{
    margin-left: -350px;
    transition: .75s;
}
#switch:not(:checked)  ~  #toggle_id::before{
    content: "@SignUp";
    transition: .75s;
}

#switch:not(:checked)  ~  #blackbox{
    margin-left: -350px;
    transition: .75s;
}

#switch:checked  ~  #toggle_id{
    margin-left: 350px;
    transition: .75s;
}

#switch:checked  ~  #toggle_id::before{
    content: "@SignIn";
    transition: .75s;
}

#switch:checked  ~  #blackbox{
    margin-left: 350px;
    transition: .75s;
}