:root {
   font-family: 'Roboto', serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #12130F;
        --font-color: #FFFFFF;
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --bg-color: #FFFFFF;
        --font-color: #12130F;
    }
}

* {
    margin: 0;
    padding: 0;
}
html {
    height: 100%; /* Fallback CSS for IE 4-6 and older browsers. Note: Without this setting, body below cannot achieve 100% height. */
    height: 100vh;/* Overrides 100% height in modern HTML5 browsers and uses the viewport's height. Only works in modern HTML5 browsers */
    background: limegreen;
}

body {
    height: auto; /* Allows content to grow beyond the page without overflow */
    width: auto; /* Allows content to grow beyond the page without overflow */
    min-height: 100%; /* Starts web page with 100% height. Fallback for IE 4-6 and older browsers */
    min-height: 100vh;/* Starts web page with 100% height. Uses the viewport's height. Only works in modern HTML5 browsers */
    overflow-y: scroll;/* Optional: Adds an empty scrollbar to the right margin in case content grows vertically, creating a scrollbar.  Allows for better width calculations, as the browser pre-calculates width before scrollbar appears, avoiding page content shifting.*/
    margin: 0;
    padding: 0;
    color: var(--font-color);
    background: var(--bg-color);/* FOR TESTING: Next add a large block of text or content to your page and make sure this background color always fills the screen as your content scrolls off the page. If so, this works. You have 100% height with flexible content! */
}

@media only screen and (min-width: 300px) and (max-width: 500px) {
   
}

@media screen and (min-width: 501px) {

}