@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900');

:root {
    --bg-color: #1f1e24;
    --fg-color: #29292e;
    --accent-color: #E86E23;
    --txt-color: #FEFFEB;
}

/* ELEMENT CHANGES */

html {
    height: 100%;
}

body {
    width: 100%;
    min-height: 100vh;
    margin: 0px 0px 0px 0px;
    font-family: "Inconsolata", monospace;
    font-size: 20px;
    background-color: var(--bg-color);
    color: var(--txt-color);
    overflow-y: scroll;
}

hr {
    border-color: var(--accent-color)
}

a {
    text-decoration: none;
}

a:link {
    color: var(--txt-color);
}

a:visited {
    color: var(--txt-color);
}

a:hover {
    color: orange;
}

/* GLOBAL CLASSES */

.text-center {
    text-align: center;
}

.bold {
    font-weight: 600;
}

.nine-sixteen {
    padding-bottom: 56.25%;
    border-radius: 15px;
    background-size: 100% 100%;
}

/* PAGE TEMPLATE IDS */

#content > p, #content > div, #content > h1, #content > hr, #content > h2, #content > ul {
    position: relative;
    width: 90%;
    left: 5%;
    margin: 20px 0;
}

#content > #navbar {
    margin-top: 0;
    justify-content: space-evenly;
    display: flex;
    border-bottom: solid var(--accent-color);
}

#navbar p {
    text-align: center;
}

#navbar *:hover {
    color: var(--accent-color);
}

#content {
    display: grid;
    position: relative;
    height: 100%;
    padding-bottom: 1px;
    background-color: var(--fg-color);
}

/* MEDIA QUERIES */

/* small */
@media (min-width: 0px) and (max-width: 750px){
    #content {
        width: 100%;
    }
}

/* large */
@media (min-width: 750px){
    #content {
    width: 60%;
    left: 20%;
    }
}