:root
{
    --bg-color: #151515;
    --text-color: #fff;
}
[data-theme="Light"]
{
    --bg-color: white;
    --text-color: #fff;
}

body
{
    min-height: 100vh;
    min-width: 100vw;
    background-color: var(--bg-color);
    font-family: "Elms Sans", sans-serif;
    color: var(--text-color);
}

main
{
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

select, input
{
    display: flex;
    margin: 3px auto;
}

main .text
{
    display: flex;
    justify-content: center;
    font-weight: 100;
    font-size: 5vw;
}

main div .text
{
    font-weight: 150;
    font-size: 1.5vw;
}

main .mainBox
{
    margin-top: 3vh;
    border: 1px;
    border-radius: 15px;
    width: 15vw;
    min-height: 30vh;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    background:
    linear-gradient(
        145deg,
        #181818,
        #111111
    );
    

    box-shadow: 
        /* Outer Shadow */
        0.2em 0.2em 5px #0a0a0a, 
        -0.1em -0.1em 5px rgba(255,255,255,0.08),
        /* Inner Shadow */
        -0.2em -0.2em 5px #0a0a0a inset, 
        0.1em 0.1em 5px rgba(255,255,255,0.08) inset
        ;
}

.mainBox h3
{
    margin-top: 0;
}

.mainBox form
{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#secondinput
{
    margin-top: 3vh;
}

input
{
    background-color: #232323;
    outline: none;
    border: 1px;
    border-radius: 20px;
    color: white;
    height: 6vh;
}

.userPass
{
    width: 12vw;
    height: 5vh;
    
    box-shadow: 0.2em 0.2em 10px black inset, -0.2em -0.2em 10px #414141 inset;
    
    text-indent: 1em;
    
    outline: 0 solid rgba(255,255,255,0.01);
    
    transition: outline 1s ease;
}


#submit
{
    width: 4vw;
    margin-top: 2vh;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    
    box-shadow: 
        /* Outer Shadow */
        0.2em 0.2em 2px #0a0a0a, 
        -0.1em -0.1em 3px rgba(255,255,255,0.08),
        /* Inner Shadow */
        -0.2em -0.2em 2px #0a0a0a inset, 
        0.1em 0.1em 3px rgba(255,255,255,0.08) inset
        ;
    
    font-size: small
}

.userPass:focus
{
    outline: 2px solid rgba(255, 255, 255, 0.15);
}