:root {
    --color-white: rgb(255, 255, 255);
    --color-dark: rgb(34, 36, 41);
    color-scheme: only light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-white: rgb(255, 255, 255);
        --color-dark: rgb(34, 36, 41);
    }
}

body {
    background-color: rgb(236, 242, 243);

    @media (prefers-color-scheme: dark) {
        background-color: rgb(236, 242, 243);
    }
    
    @media screen and (max-width: 429px) {
        background-color: var(--color-white);
    }
}

body.dark-theme {
    background-color: rgb(0, 7, 20);

    @media screen and (max-width: 767px) {
        background-color: rgb(14, 23, 35);
    }
}

#Login.dark-theme input {
    color: rgb(255, 255, 255);
}

#Login.dark-theme input:-webkit-autofill,
#Login.dark-theme input:-webkit-autofill:hover, 
#Login.dark-theme input:-webkit-autofill:focus, 
#Login.dark-theme input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px rgb(14, 23, 35) inset !important;
    outline: none;
    background-color: rgb(14, 23, 35) !important;
    -webkit-text-fill-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255) !important;
}

#Login input:-webkit-autofill,
#Login input:-webkit-autofill:hover, 
#Login input:-webkit-autofill:focus, 
#Login input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px var(--color-white) inset !important;
    outline: none;
    background-color: var(--color-white) !important;
    color: rgb(14, 23, 35) !important;
    -webkit-text-fill-color: rgb(14, 23, 35);
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px var(--color-white) inset !important;
    outline: none;
    background-color: var(--color-white) !important;
    color: rgb(14, 23, 35);
}