body {
    display: flex;
    width: 100%;
    height: 100dvh;
    padding: 2rem;
    align-items: center;
    justify-content: center;
}

.AuthWrapper {
    width: 100%;
    max-width: 700px;
    border: 2px solid var(--grid-line);
    border-radius: var(--radius-premium);
}

input[type="radio"] {
    display: none;
}

form {
    display: none;
}

.FormHeader {
    text-align: center;
}

/* Auth Options */
.AuthWrapper .AuthOptions {
    width: 100%;
    border-bottom: 2px solid var(--grid-line);
    display: flex;
    justify-content: center;
    align-items: center;
}

.AuthOptions>div {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.AuthOptions>div label {
    font-weight: 600;
    width: 100%;
    font-size: 1.6rem;
    text-align: center;
    padding: 0.8rem;
    cursor: pointer;
    color: var(--text-muted);
}

.AuthOptions>div:first-child label {
    border-right: 2px solid var(--grid-line)
}

.AuthOptions>div input:checked+label {
    transition: all 0.5s ease;
    color: var(--text-main)
}

/* Forms */
form[data-opened="true"] {
    padding: 0 1rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    height: 100%;
    width: 100%;
    margin-top: 1rem;
}

@media screen and (max-width: 450px) {
    body {
        padding: 0;
    }

    .AuthWrapper {
        border: none;
        border-radius: 0;
        padding: 0 0.8rem;
    }

    .AuthWrapper .AuthOptions {
        flex-direction: row;
    }
}