/* global properties */

:root {
    /* color scheme */
    --prim-bg-color: #353d3f;
    --sec-bg-color: white;
    --prim-accent-color: #f5ff00;
}

/* element selectors */

html, body {
    margin: 0;
    padding: 0;
}

a {
    color: white;
    text-decoration: none;
}

body {
    background-color: var(--prim-bg-color);
}

h1 {
    font-size: 50px;
}

/* class selectors */

.bi {
    color: white;
    font-size: 1.8rem;
}

.bi:hover {
    color: var(--prim-accent-color);
}

.bi-github {
    padding-right: 10px;
}

.body {
    grid-row-start: 2;
    grid-row-end: 4;
}

.body-text {
    font-size: 15pt;
    font-weight: 50;
}

.copyright-div {
    grid-row: 4;
    grid-column: 1;
    align-self: center;
}

.links-div {
    grid-row: 4;
    grid-column:  1;
    align-self: center;
    justify-self: right;
    padding-right: 40px;
}

.container {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 62px 200px auto 100px;
    height: 100vh;
}

.grid {
    border-style: solid;
    border-width: 0pt;
    border-color: white;
}

.header {
    background-color: var(--prim-bg-color);
    width: 100%;
    position: fixed;
    top: -5px;
    z-index: 100;
}

.header-text {
    font-size: 12pt;
    font-weight: bold;
}

.nav-text {
    padding-top: 14px;
    padding-left: 40px;
    padding-right: 40px;
}

.nav-tile {
    background-color: var(--prim-bg-color);
    height: 75px;
}

.nav-tile:hover {
    background: linear-gradient(var(--prim-accent-color));
}

.nav-tile:hover a {
    color: var(--prim-bg-color)
}

.text {
    font-family: Helvetica, sans-serif;
    color: white;
}

.text-accent {
    color: var(--prim-accent-color)
}

/* id selectors */

#header-grid {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto auto;
}

#title, #desc {
    padding-left: 50px;
}


#portrait-div {
    display: none;
    grid-row: 3;
    grid-column: 1;
}

#timeline-div {
    display: none;
}

#title-div {
    grid-row: 2;
    grid-column: 1;
}

@media (min-width: 51rem) {
    .container {
        display: grid;
        width: 100vw;
        grid-template-columns: min(38.2vw, 450px) auto;
        grid-template-rows: 62px auto 1fr 100px;
        height: 100vh;
    }

    .copyright-div {
        grid-row: 4;
        grid-column: 1;
        align-content: center;
    }

    .links-div {
        grid-row: 4;
        grid-column: 2;
        align-content: center;
        justify-self: right;
        padding-right: 40px;
    }

    #portrait-div {
        display: block;
        grid-row: 2;
        grid-column: 1;
        width: 100%;
    }

    #timeline-div {
        display: block;
        grid-row: 3;
        grid-column-start: 1;
        grid-column-end: 3;
        background-color: var(--sec-bg-color);
    }

    #title-div {
        display: block;
        grid-row: 2;
        grid-column: 2;
    }
}

#portrait {
    display: block;
    width: inherit;
    max-width: 450px;
}

#desc {
    padding-right: 50px;
}

#name-div {
    height: 75px;
}

#name {
    padding-top: 14px;
    padding-left: 40px;
}

#footer-text {
    font-size: 10pt;
    font-weight: 100;
    padding-left: 40px;
}

#nav-bar {
    display: none;
}

@media (min-width: 64rem) {
    #nav-bar {
        display: block;
        position: fixed;
        right: 0px;
    }

    #nav-tiles {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-template-rows: 1;
    }
}