:root {
    --navBarBackground: #242424;
    --navLinkText: rgb(255, 255, 255);
    --navLinkActiveText: rgb(90, 90, 90);
    --navLinkGlow: rgb(223, 223, 223);
    --contentBackgroundColor: white;
}

div.nav {
    position: absolute;
    background-color: #202020;
    margin:0;
    top:0px;
    left: -7vw;
    height: 100%;
    box-shadow: 0px 10px 10px;
    border-width: 1px;
    border-color: var(--navBarBackground);
    border-style: solid;
    z-index: 999;
    width: 10vw;
    transition: all 250ms ease-in;
}

ul.nav, li.nav {
    position: relative;
    display: none;
    padding: 1vh 0;
    margin-right:3vw;
}

* {
    padding: 0;
}

div.about p {
    overflow: scroll;
}

div.content {
    position: absolute;
    left: 5vw;
    width: 95vw;
    height: 100vh;
    transition: left 250ms ease-in;
    overflow-x: auto;
    overflow-y: scroll;
    margin: auto;
    background-color: var(--contentBackgroundColor);
    justify-content: center;
    display: flex;
    align-items: center;
}

div.nav:hover ul.nav, li.nav {
    display: block;
    animation: appear 1.5s;
}

ul.nav {
    position: relative;
    justify-content: center;
}

li.nav a.nav {
    font-size: 3em;
}

div.nav:hover {
    transition: all 500ms ease-out;
}

div.nav:hover ~ div.content {
    transition: all 500ms ease-out;
}

div.about {
    position: relative;
    padding-bottom: 10vh;
    justify-content: center;
}

@keyframes appear {
    0%{opacity: 0;}
    100%{opacity: 1;}
}

a.nav:link, a.nav:visited {
    font-size: 3em;
    font-family: "'Impact', Charcoal, sans-serif";
    color: var(--navLinkText);
    text-decoration: none;
    transition: text-shadow 250ms ease-in;
}

a.nav:hover {
    font-size: 3em;
    color: var(--navLinkText);
    text-shadow: 0 0 0 white;
    animation: pulsingText 1.5s infinite;
}

@keyframes pulsingText {
    0%{text-shadow: 0 0 0 white;}
    50%{text-shadow: 0px 0px 20px var(--navLinkGlow);}
    100%{text-shadow: 0 0 0 white;}
}

a.nav:active {
    font-size: 3em;
    color: var(--navLinkActiveText)
}

a.navActive:link, a.navActive:visited {
    font-size: 3em;
    font-family: "'Impact', Charcoal, sans-serif";
    color: var(--navLinkText);
    text-decoration: none;
    text-shadow: 0px 0px 20px var(--navLinkGlow);
    transition: text-shadow 250ms ease-in;
}

a.navActive:hover {
    font-size: 3em;
    color: var(--navLinkText);
    text-shadow: 0 0 0 white;
    transition: text-shadow 250ms ease-out;
}

a.navActive:active {
    font-size: 3em;
    color: var(--navLinkActiveText)
}

.blinking{
    animation: blinkingText 1.2s infinite;
    text-shadow: none;
}

@keyframes blinkingText{
    0%{color: white;}
    49%{color: white;}
    60%{color: transparent;}
    99%{color: transparent;}
    100%{color: white;}
}

code {
    font-variant: small-caps;
    color: rgb(212, 212, 212);
}

html {
    scroll-behavior: smooth;
    height: 100%;
    overflow: hidden;
    width:100%; 
}

div.content div {
    position: relative;
    justify-content: center;
    align-items: center;
    margin: auto;
}

@media only screen and (min-width: 800px) {
    div.nav:hover {
        left: 0;
    }

    div.nav:hover ~ div.content {
        left: 12vw;
    }

    div.nav {
        transition: all .5s ease-out;
    }

    h2[id="title"] {
        margin: 1vh 1vw;
    }

    div.nav:hover {
        left: 0;
    }

    .title {
        top: 5vh;
    }

    ul.nav {
        margin: 15vh 1vw;
    }
    
    div.about p {
        width: 20vw;
    }
}

@media only screen and (max-width: 800px) {
    div.about p {
        width: 80vw;
    }

    div.nav:hover {
        top: 0;
    }

    div.nav:hover ~ div.content {
        top: 100vh;
    }

    h1 {
        margin: 7.5vh 0 0;
    }

    html {
        overflow: hidden;
    }

    div.nav {
        top: -95vh;
        height: 100vh;
        width: 102vw;
        left: 0;
        overflow: hidden;
        display: flex;
        margin: auto;
        justify-content: center;
        align-items: center;
    }
    li.nav {
        margin-top: 5vh;
    }
}