#signup{
    margin-top: var(--distance-normal);
    display: flex;
    flex-direction: column;
    gap: var(--distance-normal);
    max-width: 1000px;
}

#info{
    padding: var(--distance-normal);
    border-radius: var(--border-radius-normal);
    color: #FFF;
    display: flex;
    flex-direction: column;
    gap: var(--distance-smaller);
}

#signup-form{
    border: solid var(--border-width-thin) #000;
    border-radius: var(--border-radius-normal);
    padding: var(--distance-normal);
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: var(--distance-smaller);
}


#signup-form label{
    font-size: 1.1rem;
    align-self: center;
    padding: var(--distance-smaller);
    background: var(--color-primary-lighter);
    border-radius: var(--border-radius-normal);
    color: var(--color-primary-dark);
    border: solid var(--border-width-thin) var(--color-primary);
}

#signup-form input[type="submit"]{
    margin-top: var(--distance-smaller);
    padding: var(--distance-smaller);
    grid-column: 1/3;
}


#signup-form input#username {
    text-transform: lowercase;
}

#signup-form input.error{
    border-color: var(--color-red);
    background: var(--color-red-alpha);
    transition: 200ms;
}