body{
    background-color: var(--color1);

}
#homeLogo {
    height: 150px;
}

#userForms {
    input[name=formType] {
        display: none;

        &:checked+form {
            display: block;
        }
    }

    form {
        max-width: 90%;
        margin-inline: auto;
        display: none;
        padding: 15px;

        h4{
            margin: 0;
            grid-column: 1 / -1;
            text-align: center;
        }

        &#loginForm,
        &#forgetForm {
            width: 400px;
        }

        &#regForm {
            width: 800px;
        }

        input[type=submit] {
            width: 100%;
        }

        .otherForms label {
            display: block;
            text-align: center;
            line-height: 200%;
            font-weight: bold;
            cursor: pointer;

            &:hover {
                color: var(--color2);
            }
        }
    }
}