html,
body {
    height: 100%;
    margin: 0;
}

:root {
    /* Default colors */
    --white-prim-bg-color: white;
    --dark-prim-bg-color: rgb(20, 20, 25);

    --white-sec-bg-color: rgb(235, 235, 235);
    --dark-sec-bg-color: rgb(40, 40, 45);

    --white-prim-color: rgb(20, 20, 20);
    --dark-prim-color: white;
}

/* Default/white mode */
:root {
    --prim-bg-color: var(--white-prim-bg-color);
    --sec-bg-color: var(--white-sec-bg-color);
    --prim-color: var(--white-prim-color);

    /* Reverse colors */
    --rev-prim-bg-color: var(--dark-prim-bg-color);
    --rev-sec-bg-color: var(--dark-sec-bg-color);
    --rev-prim-color: var(--dark-prim-color);
    /* */
}

:root {
    --font-size: 1.1rem; /* rem based of html root fsize and browser settings*/
}

/* Darkmode */
@media (prefers-color-scheme: dark) {
    :root {
        --prim-bg-color: var(--dark-prim-bg-color);
        --sec-bg-color: var(--dark-sec-bg-color);
        --prim-color: var(--dark-prim-color);

        /* Reverse colors */
        --rev-prim-bg-color: var(--white-prim-bg-color);
        --rev-sec-bg-color: var(--white-sec-bg-color);
        --rev-prim-color: var(--white-prim-color);
        /* */
    }
}

/* Dynamic theme */
.DynTheme {
    color: var(--prim-color);

    /* Font */
    font-size: var(--font-size);
}

html.DynTheme {
    background-color: var(--prim-bg-color);
}