*
{    
    padding: 0;
    margin: 0;;
}

.background_container
{    
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('./Assets/blueprint.jpg');  
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1; 
}

.transparent_layer
{     
    width: 100%;
    height: 100%; 
    background-color: #0D0D19DD;
}  

.centered_content
{      
    justify-content: center;
    align-items: center;
    display: flex; 

} 

.content
{      
    width: 100%;
    height: 100%; 
} 

body
{
    z-index: 0;
    color: #BCBCFF;
    display: flex;
    justify-content: center; 
    min-height: 100vh;
    background-color: black;
}

form
{
    box-sizing: border-box;
    padding: 30px; 
    width: 100%; 
    background-color: transparent;
    border: none;
    border: 2px solid rgba(188, 188, 255, 0.2);
    border-radius: 20px; 
    backdrop-filter: blur(5px);
    
}

form h1
{
    text-align: center;
    padding-bottom: 20px;
}

form a
{
    color: #FF8888;
    box-sizing: border-box;
    display: block;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
}

.form_input_row
{
    position: relative;
    height: 40px;
    width: 100%;  
    margin-top: 10px;
} 

.form_input_row:hover
{
    color: #c3ff00;
} 

.form_input_row:has(:focus)
{
    color: #c3ff00;
} 

.form_input_row input:hover
{
    border: 2px solid #c3ff00;
}

.form_input_row input
{
    color: #BCBCBC;
    box-sizing: border-box;
    padding-left: 20px;
    background-color: transparent;
    border: none;
    outline: none;
    border: 2px solid rgba(188, 188, 255, 0.2);
    height: 100%;
    width: 100%;    
    border-radius: 20px;     
}

.form_input_row input:focus-within
{
    color: #c3ff00;
    border: 2px solid #c3ff00;
}
 
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus { 
  transition: background-color 1000s ease-in-out 0s;  
  -webkit-text-fill-color:  #c3ff00;
};


.form_input_row input::placeholder
{ 
    color: #BCBCBC;
    background-color: transparent; 
}
 

form button
{ 
    background-color: transparent;
    color: #BCBCBC;
    border: none;
    outline: none;
    border: 2px solid rgba(188, 188, 255, 0.2);
    width: 100%;    
    height: 40px;
    border-radius: 20px;  
    margin-top: 10px;
}

form button:hover
{ 
    border: 2px solid rgba(188, 188, 255, 0.2);
    color: #c3ff00; 
}



.form_input_row svg 
{
    height: 20px;
    width: auto; 
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%); 
} 
@media only screen and (orientation: portrait) {
  
    form
    {
        box-sizing: border-box;
        padding: 30px; 
        width: 50%; 
        background-color: transparent;
        border: none;
        border: 2px solid rgba(188, 188, 255, 0.2);
        border-radius: 20px; 
        backdrop-filter: blur(5px);
        
    }
}