form
{
    width: 100%;
}

body
{
    background-color: #383838;    
    color: white;
    font-family: "Fira Sans", sans-serif;
    overflow-x: hidden;
    
    font-size: max(1.5vh, 16px);
}

.title
{
    padding-top: 5vh;
    font-size: 4vh;
}

.username_input
{
    padding-top: 4vh;
    font-size: 20px;
}

.password_input
{
    padding-top: 6vh;
    font-size: 20px;
}

.or_create
{
    font-size: max(1.5vh, 16px);
    color: white;
}

label
{
    font-size: max(1.5vh, 16px);
}

.user_data_input
{
    height: 3vh;
    width: 20vw;
    font-size: inherit;
}

.user_data_submit
{
    height: 6vh;
    width: max(9vw, max_content);
    font-size: inherit;
}

.user_data_submit_container
{
    padding-top: 4vh;
}

.cookie_ask
{
    background-color: #525252;
    width: 80%;
    margin: 0 auto;
    padding:10px;
    
    border-radius: 5px;
}

@media (max-aspect-ratio: 1/1)
{
    .login_container
    {
        background-color: #242323;
        
        width: max(80%, 200px);
        height: max-content;
        
        margin: auto;
        margin-top: 13vh;
        padding-bottom: 60px;
        
        border-radius: 20px;
        text-align: center;
    }
    
    .user_data_input
    {
        height: 3vh;
        width: 70%;
        font-size: inherit;
    }
}

@media (min-aspect-ratio: 1/1)
{
    .login_container
    {
        background-color: #242323;
        margin: auto;
        margin-top: 13vh;
        
        width: 40vw;
        height: max-content;
        
        padding-bottom: 60px;
        
        border-radius: 20px;
        text-align: center;
    }
    
    .user_data_input
    {
        height: 3vh;
        width: 20vw;
        font-size: inherit;
    }
    
    .user_data_submit
    {
        height: 6vh;
        width: 9vw;
        font-size: inherit;
    }
}