.login-container {
    background-color: rgb(250, 250, 250);
}
.login-card {
    background-color: white;
    transition: 0.2s ease-out 20ms;
    color: black;
}
.login-card > form > div > label {
    color: black;
}
.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: black;
}
.toggle-color-mode-btn {
    position: absolute;
    top: 0;right: 0;
    margin: 1rem;
}
.toggle-color-mode-btn:hover {
    cursor: pointer;
}

/* Media Query */
@media (width < 639px) {
    .login-card {
        background-color: rgb(250, 250, 250);
        box-shadow: unset;
    }
}

/* Dark mode */

.dark {
    background-color: rgb(27, 28, 27);
}
.dark > .login-card {
    background-color: rgb(39, 45, 40);
    border: 1px solid white;
}
.dark > .login-card > form > div > label{
    color: white;
}
.dark > .login-card > form > div  > a {
    color: rgb(153, 236, 255);
}
.dark > .login-card > form > div  > button {
    background-color: white;
    color: black;
}
.dark > .login-card > form > div  > button:hover {
    background-color: rgb(49, 69, 73);
    color: white;
}
.dark > .login-card > a {
    color: white
}
.dark > div > a {
    color: white;
}
.dark > .login-card > .toggle-color-mode-btn {
    color: white;
}