#register-container {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    height: max(90%, var(--from_height));
    column-gap: 10vw
}

#desc_text {
    width: 30rem;
}

form {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: column;
    row-gap: 2rem;
    height: var(--from_height);
}

input {
    text-align: center;
    width: 25rem;
    border: 1px solid var(--border-color);
    border-radius: clamp(0.2rem, 0.5vw, 1rem);
    color: var(--forground-color);
    background: var(--background-color);
    font-family: 'Space Mono', monospace;
    font-size: min(3vw, 1.5rem);
}

input:focus {
    outline: 2px solid white; /*todo red or green depending on min and max len*/
}

#submit {
    border: none;
    font-size: min(4vw, 2rem);
    width: 12rem;
}

#submit:hover {
    color: var(--forground-highlight-color);
    background: var(--background-highlight-color);
}

.error {
    color: var(--negative-color);
}