:root {
    --bottom-layer: #2e3440;
    --second-layer: #3b4252;
    --text: #eceff4;
    --button-base: #b48ead;
    --button-border: #b48ead;
    --button-hover-base: #a3be8c;
    --button-hover-border: #a3be8c;
    --button-hover-font-color: #2e3440;
    --content-border: #b48ead;
    --content-border-radius: .5rem;
    /* --second-layer: #3b4252; */
}

body {
    background-color: var(--bottom-layer);
    /* THIS FIXES THE OVERFLOW ON THE SIDES. DO NOT ADD PADDING TO ANY OTHER THIRDS DIVS */
    margin: 0;
}

img {
    display: block;
    margin: 0 auto;
    width: 100%;
    border-radius: var(--content-border-radius);
}

h1, h2, h3, h4 {
    color: var(--text);
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 1.75rem;
}

h3 {
    font-size: 1.25rem;
}

h4 {
    font-size: 1.0rem;
}

.article-heading-image {
    display: block;
    width: 80%;
}

.col-image {
    width: 100%;
    height: 100%;
    /* margin-top: 1rem; */
    justify-content: center;
}

/* .col-image:hover {
    border-color: var(--button-hover-border);
    border: .175rem solid var(--button-hover-border);
    margin: -.1rem;
    height: calc(12vw - .350rem);
    width: calc(12vw - .350rem);
} */

.hr {
    width: 60%;
    color: var(--content-border);
}

#container { 
    display: block;
    justify-content: center;
    background-color: var(--bottom-layer);
    width: 100vw;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: center;
    color: var(--text);
    font-size: 1rem;
}

.top-third {
    /* Push the box out of bounds to make background fit whole screen */
    margin-top: -1rem;
    padding-top: 1rem;
    /* padding-left: 1rem; */
    /* padding-bottom: -1rem; */
    justify-content: center;
    background-color: var(--bottom-layer);
}


.middle-third {
    background-color: var(--second-layer);
    /* Push the box out of bounds to make background fit whole screen */
    padding-top: 1rem;
    padding-bottom: 1rem;
    /* margin-left: -1rem;
    padding-left: 1rem;
    margin-right: -1rem;
    padding-right: 1rem; */
}

.lower-third {
    display: flex;
    width: 100vw;
    /* margin-left: -1rem;
    padding-left: 1rem;
    margin-right: -1rem;
    padding-right: 1rem; */
    padding-top: 1rem;
}

.nav-excerpts {
    justify-content: center;
    display: inline-block;
    width: 85vw;
    margin: auto;
    position: relative;
}

.caption {
    text-align: center;
    font-style: italic;
    font-size: .9rem;
}

.single-article {
    border: .175rem solid var(--content-border);
    margin: auto;
    padding: .25rem;
    border-radius: var(--content-border-radius);
    width: 90vw;
}

.single-article p {
    padding: 1rem;
    margin: auto;
    text-align: left;
}

.single-article .caption {
    text-align: center;
}

nav {
    display: block;
    justify-content: center;
    /* border: .175rem solid var(--content-border); */
    border-radius: var(--content-border-radius);
    width: 60vw;
    margin: auto;
}

nav ul {
    padding: 0;
    list-style-type: none;
}

nav li {
    display: inline-block;
    width: 50vw;
    border: none;
    margin: auto;
}

nav li a {
    display: block;
    background-color: var(--button-base);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    margin: .5vw;
    /* width: 100%; */
    line-height: 1.25rem;
    font-size: 1.25rem;
    font-weight: bold;
    text-align: center;
    color: var(--text);
    text-decoration: none;
    border: .175rem solid var(--button-border);
    border-radius: var(--content-border-radius);
}

nav li a:hover {
    background-color: var(--button-hover-base);
    color: var(--button-hover-font-color);
    border-color: var(--button-hover-border);
}

main {
    display: block;
    justify-content: center;
    width: 100%;
}

section, aside {
    display: inline-flex;
    border: .175rem solid var(--content-border);
    margin: auto;
    padding: 1rem;
    border-radius: var(--content-border-radius);
}

section {
    width: 30%;
    margin: auto;
}

aside {
    width: 30%;
    margin: auto;
}

aside ul {
    margin: 0 0;
}

aside ul li {
    margin: 1rem auto;
    padding: 0;
}

.single-page {
    width: 100%;
}

#main-image-resize {
    width: 75%;
}

.col {
    border: none;
    /* margin: 1rem .5rem; */
    /* padding: 0 1rem; */
    border-radius: var(--content-border-radius);        
    margin: auto;
    /* margin-top: 1vh; */
    margin-bottom: 5vh;
    /* margin-left: .5rem;
    margin-right: .5rem; */
    padding: .25rem;
    width: 60%;
    height: 25vh;
}

.col h4 {
    margin: auto;
    width: 50vw;
    text-align: justify;
}

.col hr {
    width: 100%;
    justify-content: left;
    margin-left: 0;
}

.col a img {
    margin: auto;
    height: 50vw;
    width: 50vw;
}

footer {
    display: block;
    background-color: var(--bottom-layer);
    width: 20%;
    text-align: center;
    margin: auto;
    margin-bottom: 1rem;
    padding: .01rem 0;
    color: var(--text);
    border-radius: var(--content-border-radius);
}

/* .button {
    display: block;
    background-color: var(--button-base);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    width: 100%;
    line-height: 1.25rem;
    font-size: 1.25rem;
    font-weight: bold;
    text-align: center;
    color: var(--text);
    text-decoration: none;
    border: .175rem solid var(--button-border);
    border-radius: var(--content-border-radius);
} */

/* .button:hover {
    background-color: var(--button-hover-base);
    color: var(--button-hover-font-color);
    border-color: var(--button-hover-border);
} */

table {
    /*border: 2px solid #7287fd;*/
    margin: auto;
}

td, tr {
    /* border: .175rem solid var(--content-border); */
}

td {
    padding: 1rem;
}

.square-image {
    border-radius: 0px;
    /* border: .175rem solid var(--content-border); */
    /* width: 95%; */
}


@media (min-width: 1080px) {
    body {
        background-color: var(--bottom-layer);
        /* THIS FIXES THE OVERFLOW ON THE SIDES. DO NOT ADD PADDING TO ANY OTHER THIRDS DIVS */
        margin: 0;
    }
    
    img {
        display: block;
        margin: 0 auto;
        width: 100%;
        border-radius: var(--content-border-radius);
    }
    
    h1, h2, h3, h4 {
        color: var(--text);
        margin: 1rem;
    }
    
    h1 {
        font-size: 4rem;
    }
    
    h2 {
        font-size: 2.5rem;
    }
    
    h3 {
        font-size: 1.5rem;
    }

    h4 {
        font-size: 1.25rem;
    }
    
    .article-heading-image {
        display: block;
        width: 80%;
    }
    
    .col-image {
        width: 100%;
        height: 100%;
        /* margin-top: 1rem; */
        justify-content: center;
    }

    .col-image:hover {
        border-color: var(--button-hover-border);
        border: .175rem solid var(--button-hover-border);
        /* margin: -.1rem; */
        height: calc(12vw - .350rem);
        width: calc(12vw - .350rem);
    }

    .hr {
        width: 60%;
        color: var(--content-border);
    }
    
    #container { 
        display: block;
        justify-content: center;
        background-color: var(--bottom-layer);
        width: 100vw;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        text-align: center;
        color: var(--text);
        font-size: 1rem;
    }
    
    .top-third {
        /* Push the box out of bounds to make background fit whole screen */
        margin-top: -1rem;
        padding-top: 1rem;
        /* padding-left: 1rem; */
        /* padding-bottom: -1rem; */
        justify-content: center;
        background-color: var(--bottom-layer);
    }


    .middle-third {
        background-color: var(--second-layer);
        /* Push the box out of bounds to make background fit whole screen */
        padding-top: 1rem;
        padding-bottom: 1rem;
        /* margin-left: -1rem;
        padding-left: 1rem;
        margin-right: -1rem;
        padding-right: 1rem; */
    }

    .lower-third {
        display: flex;
        width: 100vw;
        /* margin-left: -1rem;
        padding-left: 1rem;
        margin-right: -1rem;
        padding-right: 1rem; */
        padding-top: 1rem;
    }

    .nav-excerpts {
        justify-content: center;
        display: inline-flex;
        width: 65vw;
        margin: auto;
        position: relative;
    }

    .caption {
        text-align: center;
        font-style: italic;
        font-size: .9rem;
    }

    .single-article {
        border: .175rem solid var(--content-border);
        margin: auto;
        /* padding: 1rem; */
        border-radius: var(--content-border-radius);
        width: 55vw;
    }

    .single-article p {
        padding: 1rem;
        margin: auto;
        text-align: left;
    }
    
    nav {
        display: block;
        justify-content: center;
        /* border: .175rem solid var(--content-border); */
        border-radius: var(--content-border-radius);
        width: 60vw;
        margin: auto;
    }
    
    nav ul {
        padding: 0;
        list-style-type: none;
    }
    
    nav li {
        display: inline-block;
        width: auto;
        border: none;
        margin: auto;
    }
    
    nav li a {
        display: block;
        background-color: var(--button-base);
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: .5rem;
        padding-bottom: .5rem;
        margin: .5vw;
        /* width: 100%; */
        line-height: 1.25rem;
        font-size: 1.25rem;
        font-weight: bold;
        text-align: center;
        color: var(--text);
        text-decoration: none;
        border: .175rem solid var(--button-border);
        border-radius: var(--content-border-radius);
    }
    
    nav li a:hover {
        background-color: var(--button-hover-base);
        color: var(--button-hover-font-color);
        border-color: var(--button-hover-border);
    }
    
    main {
        display: block;
        justify-content: center;
        width: 100%;
    }
    
    section, aside {
        display: inline-flex;
        border: .175rem solid var(--content-border);
        margin: auto;
        padding: 1rem;
        border-radius: var(--content-border-radius);
    }
    
    section {
        width: 30%;
        margin: auto;
    }

    aside {
        width: 30%;
        margin: auto;
    }
    
    aside ul {
        margin: 0 0;
    }
    
    aside ul li {
        margin: 1rem auto;
        padding: 0;
    }
    
    .single-page {
        width: 100%;
    }
    
    #main-image-resize {
        width: 75%;
    }
    
    .col {
        border: none;
        /* margin: 1rem .5rem; */
        /* padding: 0 1rem; */
        border-radius: var(--content-border-radius);        
        margin: auto;
        margin-top: 1vh;
        margin-left: .5rem;
        margin-right: .5rem;
        padding: .25rem;
        width: 20vw;
        height: 28vh;
    }

    .col h4 {
        margin: 0;
        width: 10vw;
        text-align: left;
    }

    .col hr {
        width: 80%;
        justify-content: left;
        margin-left: 0;
    }

    .col a img {
        height: 12vw;
        width: 12vw;
    }
    
    footer {
        display: block;
        background-color: var(--bottom-layer);
        width: 20%;
        text-align: center;
        margin: auto;
        margin-top: 3vh;
        margin-bottom: 1rem;
        padding: .01rem 0;
        color: var(--text);
        border-radius: var(--content-border-radius);
    }
    
    /* .button {
        display: block;
        background-color: var(--button-base);
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: .5rem;
        padding-bottom: .5rem;
        width: 100%;
        line-height: 1.25rem;
        font-size: 1.25rem;
        font-weight: bold;
        text-align: center;
        color: var(--text);
        text-decoration: none;
        border: .175rem solid var(--button-border);
        border-radius: var(--content-border-radius);
    } */
    
    /* .button:hover {
        background-color: var(--button-hover-base);
        color: var(--button-hover-font-color);
        border-color: var(--button-hover-border);
    } */
    
    table {
    }
    
    td, tr {
    }
    
    .square-image {
        margin: auto;
        border-radius: 0px;
        width: 10vw;
        height: 10vw;

    }
}