:root {
    --bg_colour: rgb(32,32,32);
    --txt_colour: rgb(250,235,215);
    --cfb_lines: rgb(100,149,237);
    --crim_lines: rgb(220,20,60);
}

/* MOBILE SCREENS BEGIN */
/*@media only screen and (max-width: 767px)  {*/

    .body-main {
        background-color: var(--bg_colour);
        font-family:'Courier New', monospace, 'Lucida Sans Typewriter', 'Lucida Typewriter';
        color: var(--txt_colour);
    }

    /* HEADER BEGIN */

    .header-container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        
    }

    .header-main-image {
        justify-content: center;
        margin-right: 5vw;
        width: 75vw;
    }

    .nav-hamburger-container {
        margin-right: 5vw;
        margin-left: auto;
    }

    .nav-hamburger-container button {
        background-color: transparent;
        border: 0px;
    }

    #nav-mobile-hamburger-button-img {
        display: block;
    }

    #nav-mobile-close-button-img {
        display: none;
    }

    /* HEADER END */

    /* NAV MAIN BEGIN */

    .nav-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    
    #nav-list {
        display: none;
    }

    .nav-container ul {
        list-style-type: none;
        padding: 0px;
        width: 100%;
        background-color: rgb(36, 36, 36);
        border: 3px solid var(--cfb_lines);
        border-radius: 15px;    
    }

    .nav-container li {
        text-align: center;
        padding-top: 5px;
        padding-bottom: 5px;
        font-size: large;
    }

    .nav-container li a {
        display: block;
    }


    .nav-container a, a:visited, a:hover, a:focus {
        text-decoration: none;
        color: inherit;
    }


    /* NAV MAIN END*/



    /* FOOTER BEGIN */

    .footer-github-image {
        justify-content: flex-end;
        margin-left: auto;
        margin-top: auto;
        padding-right: 35px;
        padding-bottom: 15px;
    }

    /* FOOTER END */

/*}*/
/* MOBILE SCREENS END */


@media only screen and (min-width: 768px) {
    
    /* HEADER BEGIN min768 */

    .header-container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        
    }
    
    .header-main-image {
        justify-content: center;
        margin-right: 5vw;
        width: 75%;
    }

    /* HEADER END min768 */

    /* NAV MAIN BEGIN min768 */

    .nav-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    
    #nav-list {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-container ul {
        list-style-type: none;
        padding: 0px;
        width: 100%;
        background-color: rgb(36, 36, 36);
        border: 1px solid var(--cfb_lines);
        border-radius: 15px;    
    }

    .nav-container li {
        text-align: center;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: x-large;
        margin: auto;
    }

    .nav-container li a {
        display: block;
    }


    .nav-container a, a:visited, a:hover, a:focus {
        text-decoration: none;
        color: inherit;
    }
    
    .nav-hamburger-container {
        display: none;
    }
    
    .nav-hamburger-container button {
        display: none;
    }
    
    #nav-mobile-hamburger-button-img {
        display: none;
    }
    
    #nav-mobile-close-button-img {
        display: none;
    }
    
    /* NAV MAIN END min768 */
    
}