@import url(imports/general.css);

main {
    height: fit-content;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prominent-container {
    height: 80vh;
    min-height: 30rem;
    width: 90vw;
    min-width: 20rem;
    max-width: 55vh;
    margin: 10pt;
    padding: 0 20pt 20pt 20pt;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid black;
    border-radius: 15pt;
    box-shadow: inset -4pt -4pt 8pt var(--shadow-color), inset 4pt 4pt 8pt var(--shadow-color);
    background-color: var(--base-color);
}

.form-header-container {
    height: 40%;
}

h1 {
    margin-bottom: auto;
    font-size: 8vh;
}

h1 > span::before {
    content: "Create Account";
}

.small-screen-page-identifier > span::before {
    content: "Create account";
}

@media (max-width: 1000px) {
    h1 > span::before {
        content: "Register";
    }

    h1 {
        font-size: 10vh;
    }

    .small-screen-page-identifier > span::before {
        content: "Register";
    }
}


.form-body-container {
    height: 60%;
    display: flex;
    flex-direction: column;
}

.inputs-container {
    margin-bottom: auto;
    display: flex;
    flex-direction: column;
}

.textinputs-container {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.textinputs-container label {
    font-size: clamp(0.8rem, 2vw , 1.33rem);
    color: var(--base-text-color);
}

.textinput-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.textinput-container:first-child {
    margin-bottom: 5pt;
}

.checkboxinputs-container {
    display: flex;
    flex-direction: column;
}

.checkbox-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.checkbox-container label {
    font-size: 100%;
    color: var(--base-text-color);
}

.checkbox-container input[type="checkbox"] {
    margin-right: 5pt;
}

.checkbox-container:first-child {
    margin-bottom: 5pt;
}

.form-controls-container {
    margin-bottom: 0;
    display: flex;
    flex-direction: row;
}

.form-controls-container a[href="home.html"] {
    margin-top: auto;
    margin-right: auto;
    margin-bottom: 0;
}

.form-controls-container button {
    padding: 3pt;
    border: 2pt solid var(--block-outline-color);
    border-radius: 5pt;
    box-shadow: inset -2pt -2pt 2pt var(--shadow-color), inset 2pt 2pt 2pt var(--shadow-color);
    font-size: clamp(0.8rem, 2vw , 1.33rem);
    background-color: #eeeeee;
}

.form-controls-container button:hover {
    background-color: var(--selected-color);
}

.small-screen-page-identifier {
    top: 1vh;
}

.captcha {
    padding: 20pt 10pt 10pt 10pt;
    width: 20vw;
    height: fit-content;
    border: 1px solid black;
    border-radius: 15pt;
    box-shadow: inset -4pt -4pt 8pt var(--shadow-color), inset 4pt 4pt 8pt var(--shadow-color);
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 1vw;
    bottom: 1vh;
    background-color: var(--base-color);
}

.captcha label {
    color: var(--base-text-color);
}

.captcha .radio-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    font-size: clamp(0.8rem, 2vw , 1.33rem);
}

.captcha .radio-container input {
    margin-right: 10pt;
}

.captcha .radio-container:first-child {
    margin-bottom: 10pt;
}

.captcha .radio-container:nth-child(2) {
    margin-bottom: 15pt;
}

.captcha textarea {
    height: 30%;
    max-width: 100%;
}

.captcha>label {
    margin-bottom: 5pt;
}

@media (max-width: 1200px) {
   .captcha {
    height: fit-content;
    width: 90vw;
    min-width: 20rem;
    max-width: 55vh;
    margin: 15pt;
    position: relative;
   }
}