body {
    background-color: var(--color-primary);
}

.form {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 10px;
    margin-top: 30px;
}

.form-container {
    width: 100%;
    background-color: var(--color-light-neutral);
    color: var(--color-primary);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px 10px;
}

.sign-up {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 60px;
    text-align: center;
    border-bottom: 1px solid var(--color-dark-neutral);
}

.sign-up h1 {
    font-family: var(--font-serif-display);
    font-size: var(--font-h1-3-mobile);
    text-transform: uppercase;
    padding: 0px 0px 60px 0px;
}

.sign-up form {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 15px;
    padding-bottom: 60px;
}

.sign-up form label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sign-up form input {
    border: 1px solid var(--color-primary);
    border-radius: 10px;
    padding: 15px 30px;
}

.sign-up form input::placeholder {
    color: var(--color-dark-neutral);
    text-transform: uppercase;
    font-family: var(--font-kulim);
    font-size: var(--font-header-mobile);
}

.sign-up form input:focus::placeholder {
    color: transparent;
}

.sign-up a {
    font-family: var(--font-manrope);
    font-size: var(--font-text-xsmall-mobile);
    padding-bottom: 15px;
}

.sign-up button {
    padding: 15px 45px;
    background-color: var(--color-secondary);
    border-radius: 10px;
    text-transform: uppercase;
    font-family: var(--font-kulim);
    font-size: var(--font-button-1-mobile);
    color: var(--color-primary);
    font-weight: var(--weight-semi-bold);
}

.sign-in {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    width: 100%;
    text-align: center;
}

.sign-in h1 {
    font-family: var(--font-serif-display);
    font-size: var(--font-h1-3-mobile);
    text-transform: uppercase;
    padding-top: 60px;
    padding-bottom: 10px;
}

.sign-in p {
    font-family: var(--font-manrope);
    font-size: var(--font-text-normal-mobile);
    padding-bottom: 60px;
}

.cta-button-6 {
    padding: 15px 45px;
    background-color: var(--color-secondary);
    border-radius: 10px;
    text-transform: uppercase;
    font-family: var(--font-kulim);
    font-size: var(--font-button-1-mobile);
    color: var(--color-primary);
    font-weight: var(--weight-semi-bold);
}

@media (min-width: 768px) {
    .form {
        padding: 60px 30px;
    }

    .form-container {
        padding: 60px 30px;
    }
}

@media (min-width: 1024px) {
    .form {
        padding: 60px;
    }

    .form-container {
        flex-direction: row;
        padding: 60px 120px;
    }

    .sign-up {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 60px 60px 60px 0px;
        border-right: 1px solid var(--color-dark-neutral);
        border-bottom: 0;
    }

    .sign-up h1 {
        font-family: var(--font-serif-display);
        font-size: var(--font-h1-2-desktop);
        text-transform: uppercase;
        padding-bottom: 60px;
    }

    .sign-up form input::placeholder {
        font-size: var(--font-header-desktop);
    }    

    .sign-up a {
        font-size: var(--font-text-xsmall-desktop);
    }

    .sign-up button {
        font-size: var(--font-button-1-desktop);
    }

    .sign-in {
        padding: 0px 0px 0px 60px;
    }

    .sign-in h1 {
        font-size: var(--font-h1-2-desktop);
        padding-bottom: 10px;
    }

    .sign-in p {
        font-size: var(--font-text-normal-desktop);
        padding-bottom: 30px;
    }

    .cta-button-6 {
        font-size: var(--font-button-1-desktop);
    }
}

@media (min-width: 1200px) {
    .form {
        padding: 120px;
    }
}

@media (min-width: 1680px) {
    .form-container {
        max-width: 1440px;
    }
}