#registration-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    padding: calc(var(--page-horizontal-padding) / 2);


    .footer {
        padding: 0;
    }
}

fieldset {
    padding: calc(min(var(--page-horizontal-padding) / 2, 20px));
}

h1 {
    text-align: center;
}

.subheader {
    letter-spacing: 0.02rem;
    font-weight: 400;
}

p {
    letter-spacing: 0.02rem;
    line-height: 1.15rem;
}

#register-form {
    align-self: center;
    width: 100%;
    max-width: 600px;

    label {
        color: var(--label-grey);
    }

    input, select, textarea {
        color: var(--dark-grey);
    }

    select {
        width: 100%;
    }

    .form-errors:has(*:nth-child(1)) {
        margin-top: 8px;
    }
}

#school-selectors {
    gap: 0 16px;
    align-items: end;

    #school-selector-or {
        font-weight: 600;
        font-size: calc(min(5vw, 28px));
        color: var(--label-grey)
    }

    > div {
        width: 40%;
        flex-grow: 1;
    }
}

#sub-forms {
    justify-content: center;

    #name-and-email,
    #username-and-password {
        flex-grow: 1;


        input, .password-input {
            width: 100%;
        }
    }
}

div:has(> #register_submit) {
    justify-content: center;

    #register_submit {
        margin: 24px 0 0;
        font-size: 1.25rem;
        font-weight: 700;
        letter-spacing: 0.04rem;
        padding: 4px 12px;
    }
}


@media (max-width: 768px) {
    #school-selectors {
        flex-direction: column;
        align-items: center;
        padding: 16px;
        gap: 4px;

        & > div {
            width: 100%;
        }
    }

    #name-and-email,
    #username-and-password {
        width: 100%;
        border: none;
        padding: 0;

    }
}