* {
    font-family: "Roboto", sans-serif;
}

body {
    background: linear-gradient(to left bottom,#3a8ca5,#122a31);
    height: 100vh;
}

#loginLogo {
    width: 80%;
    height: 150pt;
    background-size: 100% 100%;
    background-image: url(logoWhite.svg);
    clear: both;
    flex-shrink: 0;
}

#login {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    align-items: center;
    justify-content: space-evenly;
    gap: 10px;
}


#message, #result {
    clear: both;
    float: left;
    color: white;
    width: 80%;
    font-size: 20pt;
    text-align: center;
}

#unity-container {
    display: none;
}

#pinCode {
    font-size: 15pt;
    width: 55pt;
}

#goButton {
    font-size: 15pt;
    width: 100pt;
    height: 30pt;
}

input.pin {
    padding: 0;
    width: min(70pt, calc((100vw - 100px) / 7));
    box-sizing: border-box;
    height: min(70pt, calc((100vw - 100px) / 7));
    font-size: 20pt;
    text-align: center;
    border-radius: 4px 4px;
    filter: drop-shadow(0 0 0.2rem black);
    /*max-width: 16% !important;*/
}


    input::placeholder {
        opacity: 0.25;
    }

#loading {
    display: none;
}

button.add-button {
    width: min(80%, 200pt);
    height: 30pt;
    border-radius: 4px 4px;
    filter: drop-shadow(0 0 0.7rem #222222);
}

div.pinInputs {
    max-width: 100vh;
}

#pin3 {
    margin-right: 10px;
}

#pin4 {
    margin-left: 10px;
}