body {
    background-color: #fff;
}
.bg {
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.login-box {
    height: 100vh;
    margin-left: auto;
    font-family: "MD Nichrome Test", sans-serif;
    p {
        font-family: "Inter", sans-serif;
        font-weight: 400;
        color: var(--grey-text);
    }
    form {
        label {
            font-weight: 400;
        }
        ::placeholder {
            font-family: "Inter", sans-serif;
            font-size: 0.8rem;
        }
        input {
            font-family: "Inter", sans-serif;
        }
        a {
            color: var(--primary-color);
        }
        p {
            font-family: "MD Nichrome Test", sans-serif;
            letter-spacing: 0.06rem;
            a {
                font-weight: 500;
            }
        }
        .grey-text {
            color: var(--grey-text);
        }
    }
    button {
        font-family: "Poppins", sans-serif;
        &.login-button {
            color: var(--light-text);
            border-color: var(--link-text);
            background-color: var(--primary-color);
            &:hover,
            &:checked + &,
            &.active,
            &.show,
            &:first-child:active,
            :not(.btn-check) + &:active {
                color: var(--light-text);
                background-color: var(--link-text);
                border-color: var(--link-text);
            }
        }
    }
    .link {
        letter-spacing: 0.1rem;
        font-weight: 600;
        a {
            color: var(--grey-text);
        }
        span {
            color: var(--primary-color);
        }
    }
}

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.form-control {
    &:focus {
        border-color: var(--primary-color);
        outline: 0;
        box-shadow: none;
    }
}