@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Teko:wght@300;400;500;600;700&display=swap');

* {
    padding: 0;
    margin: 0;
}

a:visited { text-decoration: none; color: inherit; }
a:hover { text-decoration: none; color:inherit; }
a:focus { text-decoration: none; color:inherit; }
a:hover, a:active { text-decoration: none; color:inherit }

body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 7.5%;
    flex-direction: column;
}

#onboarding-logo {
    width: 100%;
    margin-bottom: 30px;
    max-width: 350px;
}

#onboarding-form {
    color: white;
    font-family: 'Roboto Mono', monospace;
    text-align: center;
    width: 100%;
    max-width: 450px;
    padding: 25px 20px 25px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
    border: 2px solid rgb(27, 27, 27);
    background-color: rgb(25, 25, 25);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23070707' fill-opacity='0.2'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
}

#onboarding-header {
    color: white;
    text-align: center;
    margin-bottom: 20px;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
}

#onboarding-form div {
    width: 100%;
}

.onboarding-input {
    margin-bottom: 5px;
    display: flex;
    flex-direction: column;
}

.onboarding-input label {
    text-align: left;
    color: rgb(185, 185, 185);
    display: block;
    margin-bottom: 5px;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
}

.onboarding-input input {
    border: 1px solid rgb(201, 201, 201);
    border-radius: 5px;
    color: rgb(201, 201, 201);
    background-color: rgb(15, 15, 15);
    font-weight: 600;
    height: 25px;
    padding: 7px 7px;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Lato', sans-serif;
    margin-bottom: 2.5px;
    transition: 0.05s;
}

.onboarding-input input:focus {
    outline: 0;
    color: rgb(240, 240, 240);
    border: 1.5px solid rgb(240, 240, 240);
}

.error {
    padding: 0;
    color: rgb(255, 59, 59);
    font-size: 12.5px;
    text-align: left;
    min-height: 16px;
}

#submit-error {
    margin-top: -10px;
}

#signup-check {
    width: 100%;
    padding: 0;
    margin-top: 10px;
    margin-bottom: 2.5px;
    text-align: left;
    font-size: 12.5px;
    font-family: 'Roboto Mono', monospace;
}

#onboarding-submit {
    color: rgb(37, 37, 37);
    border-color: rgba(255, 255, 255, 0);
    background-color: rgb(207, 207, 207);
    border-radius: 5px;
    margin-top: 10px;
    padding: 10px 50px;
    width: 100%;
    font-size: 20px;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
    cursor: pointer;
    transition: background-color 0.25s;
}

#onboarding-submit:hover {
    color: rgb(22, 22, 22);
    background-color: rgb(240, 240, 240);
}

.onboarding-redirect {
    color: rgb(219, 219, 219);
    text-align: center;
    font-weight: 500;
    font-family: 'Open Sans', sans-serif;
    margin-top: 15px;
    text-decoration: none;
}

#account-recovery {
    margin-top: 25px;
}

@media screen and (max-width: 450px) {
    #onboarding-form {
        width: 80%;
    }
}