/***** Global, Tags, Classes, IDs ******/

/***** Global *****/
:root {
    --color: #CCC;
    --background: #333;
    --background-light: #444;
    --border: #555;
    --nav-width: 12em;
}

@media screen and (min-width: 1px) and (max-width: 580px) {
    :root {
        --nav-width: 0;
    }

    .sidenav:hover::before {
        content: "";
    }
    .sidenav::before {
        content: "≡";
        font-size: 40px;
        display: block;
        position: fixed;
        z-index: 1;
    }
    .sidenav a {
        display: block;
        padding: 4px;
        text-decoration: none;
    }
    .sidenav object {
        float: left;
    }
    .sidenav:hover ul {
        display: block;
    }
    .sidenav ul {
        display: none;
        padding: 4px 8px;
        background: var(--background);
        list-style-type: none;
        position: fixed;
        z-index: 1;
        width: 14em;
    }
    .sidenav ul ul {
        list-style-type: '-';
        margin-left: 0.5em;
        padding: 0 0 4px 1em;
        position: relative;
        width: 10em;
    }
}

@media screen and (min-width: 580px) {
    /* this section is for the left side navigation menu properties*/
    .sidenav {
        width: var(--nav-width);
        height: 100%;
        position: fixed;
        z-index: 1;
        background: var(--background);
        color: var(--color);
        overflow-x: hidden;
    }
    .sidenav a.active{
        background-color: #04AA6D;
        color: var(--color);
    }
    .sidenav a {
        padding: 6px 8px 6px 16px;
        text-decoration: none;
        font-size: 15px;
        color: #2196F3;
        display: block;
    }
    .sidenav ul {
        list-style-type: none;
        padding-left: 1em;
    }
    .sidenav ul ul {
        list-style-type: '-';
        padding-left: 1em;
        margin-left: 0.5em;
    }
    /* side nav properties end at this line   */
}


/***** Tags *****/
html, body {
	font-family: "Lato", sans-serif;
    background: var(--background);
    color: var(--color);
}

a { color: #2196F3; }
a:hover:not(.active) { color: #064579; }

h1, h2, h3 { margin-bottom: 0; }

footer {
    background: var(--background);
    color: var(--color);
	text-align: center;
  	padding: 3px;
} 

table, th, td {
	border: 1px solid black;
  	border-collapse: collapse;
}


/***** Classes *****/

.main {
    background: var(--background);
    color: var(--color);
	margin-left: var(--nav-width); /* Same width as the sidebar + left position in px */
  	font-size: 20px; /* Increased text to enable scrolling */
  	padding: 0px 10px;
    text-align: justify;
}

.footer {
    background: var(--background);
    color: var(--color);
	text-align: center;
	margin-left: var(--nav-width); /* Same width as the sidebar + left position in px */
  	font-size: 20px; /* Increased text to enable scrolling */
  	padding: 0px 10px;
}


/***** IDs *****/

#logo_banner {
    float: right;
    padding: 0 0 0 10px;
    min-width: 100px;
    max-width: 600px;
    width: 100%;
}

#logo_tux {
    display: block;
    margin: 0 auto;
    width: 120px;
}