/* Variables */
:root {
    --darkest-gray: rgb(20, 20, 20);
    --background-dark-gray: rgb(30, 30, 30);
    --dark-gray-2: rgb(44, 44, 44);
    --light-gray: rgba(255, 255, 255, 0.7);
    --off-white: rgba(255, 255, 255, 0.9);
    --red: rgb(180, 0, 0);

    --mobile-header-image-height: 15vw;
}

/* CSS Style Reset */
* {
    border: none;
    margin: 0;
    padding: 0;
}

/*
--------------------------------------------------------------------------------
        Styles for All Sizes
--------------------------------------------------------------------------------
*/   

/* Entire Website */
body {
    color: white;
    background-color: var(--background-dark-gray);
    font-family: "Montserrat", sans-serif;
}

/* Main Body */
main {
    margin-top: var(--header-height); /* offset to fit header */
}

/* Links */
a {
    color: rgb(0, 136, 255);
    cursor: pointer;
}
a:visited {
    color: rgb(221, 0, 255);
}
a:hover {
    color: rgb(0, 187, 255);
}

/* Media (Images, Videos) */
img, video {
    max-width: 100%;
}

/*-------------------- UNIVERSAL ADDITIVE STYLE CLASSES --------------------*/
/* Button Class */
.button {
    cursor: pointer;
}
.button:hover {
    transition: transform .1s; /* animation speed */
    transform: scale(1.01); /* increase size */
}

/* Font Class */
.code_font {
    font-family: "Courier Prime", monospace;
}

/*-------------------- HEADER BAR --------------------*/
/* Header Bar */
header {
    background-color: black;
    position: fixed;
    top: 0;
}

/* Nav */
nav a,
nav a:visited,
nav a:link {
    color: white;
    text-decoration: none;
}
/*
--------------------------------------------------------------------------------
        ^ Styles for All Sizes ^
--------------------------------------------------------------------------------
*/        

/*
--------------------------------------------------------------------------------
        Mobile Only Styles
--------------------------------------------------------------------------------
*/      
@media all and (max-width: 849px) {
    .desktop {
        display: none;
    }  
    .mobile {
        display: block;
    }

    /*-------------------- GENERAL FORMATTING --------------------*/
    /* Main Body */
    main {
        padding: 10px 8vw 50px 8vw;
    }

    /* Lists (UL) */
    ul {
        margin-left: 24px;
    }
    ul li {
        margin-top: 5px;
    }

    /* Left Indent */
    .left_indent {
        margin-left: 10px;
    }
    
    /*-------------------- HEADER BAR --------------------*/
    /* Header */
    header {
        width: 100%;
    }

    .header_beginning {
        display: flex;
        padding: 5px;
        height: var(--mobile-header-image-height);
    }

    /* Hamburger Button */
    .hamburger {
        margin: auto 10px;
        font-size: 8vw;
        padding: 2px;
        border-radius: 5px;
    }

    /* Website Logo */
    .website_logo {
        /* center horizontally */
        position: absolute;
        left: 50%;
        transform: translate(-50%);
    }
    .website_logo img {
        height: var(--mobile-header-image-height);
        max-width: 100vw;
    }

    /* Nav */
    nav {
        display: none;
        width: 100%;
    }
    nav a {
        background-color: var(--dark-gray-2);
        display: block;
        text-align: center;

        margin-bottom: 5px;
        padding: 3px;
        font-size: 5vw;
    }
    
    /* Nav Buttons */
    nav .button:active {
        background-color: var(--darkest-gray);
        color: var(--light-gray);
    }
}
/*
--------------------------------------------------------------------------------
        ^ Mobile Only Styles ^
--------------------------------------------------------------------------------
*/      
/*
--------------------------------------------------------------------------------
        Desktop Only Styles
--------------------------------------------------------------------------------
*/    
@media all and (min-width: 850px) {
    .desktop {
        display: block;
    }  
    .mobile {
        display: none;
    }

    /*-------------------- GENERAL FORMATTING --------------------*/
    /* Main Body */
    main {
        padding: 20px 8vw 50px 8vw;
    }

    /* Lists (UL) */
    ul {
        margin-left: 40px;
    }
    ul li {
        margin-top: 8px;
    }

    /* Left Indent */
    .left_indent {
        margin-left: 20px;
    }
    

    /*-------------------- HEADER BAR --------------------*/
    /* Header Bar */
    header {
        width: 100%;
    }
    header, .header_beginning {
        display: flex;
        height: max-content;
        justify-content: space-between;
        align-items: center;
    }

    /* Website Logo */
    .website_logo {
        margin: 7px 15px;
        height: max-content;
    }
    .website_logo img {
        display: block;
        height: 50px; 
    }

    /* Nav */
    nav {
        margin-right: 25px;
    }
    nav a {
        margin: 5px;
    }
    /* Nav Buttons */
    nav .button {
        max-width: max-content;
        padding: 5px 7px;
    }
    nav .button:hover {
        color: var(--light-gray);
    }
    .current_nav {
        border-bottom: 2.5px solid var(--red);
    }
}
/*
--------------------------------------------------------------------------------
        ^ Desktop Only Styles ^
--------------------------------------------------------------------------------
*/