website/assets/css/signup.css

button.nopadding {
    padding: 0;
}

.blur {
    display: block;
    visibility: visible;
    height: 100%;
    width: 50%;
    position: absolute;
    backdrop-filter: blur(8px) brightness(80%);
    top: 0;
    left: 0;
}

.signup.form {
    /* width: fit-content; */
    padding-bottom: 3em;
    padding-top: 3em;
    max-width: 70%;
    height: 100%;
}

.signup.container {
    height: 100vh;
    padding: 0 2em 0 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    overflow: auto;
}

.signup.banner {
    display: block;
    visibility: visible;
    content: '';
    width: 50%;
    height: 100vh;
    background: url(/assets/img/banner-tbz-tower-1600x879.jpg) no-repeat center;
    background-size: cover;
}

.content-container {
    display: flex;
}

.optional {
    margin-left: 0.2em;
    opacity: 0.75;
}

.required {
    margin-left: 0.2em;
    color: red;
}

.button-container {
    display: flex;
    gap: 0.5em;
    margin-bottom: 3em;
}

@media screen and (max-width: 800px) {
    .content-container {
        flex-direction: column;
        flex-wrap: wrap;
    }

    .signup.content.container {
        width: 100%;
    }

    .blur {
        width: 100%;
        height: 25vh;
    }

    .signup.banner {
        width: 100%;
        height: 25vh;
    }

    .signup.form {
        min-width: min-content;
        max-width: max-content;
    }
}

.notice {
    margin: 1em 0 1em 0;
    padding: 0.5em !important;
    background-color: #ffbc2160;
    border-radius: 8px;
    border: 2px solid #ffbc21ac;
}