:root{
    --background: rgb(213, 213, 225, 1);
    --shadowColor: rgb(106, 106, 138);
    --accentColor: rgb(255, 47, 134);
}

/* reset defaults */
*{
    margin: 0;
    padding: 0;
}

#header {
    background: var(--background);
    color: white; 
    text-align: center;
    position: fixed;
    width: 100%;
    z-index: 999; /*make sure its on top of everything else */
    border-bottom: 2px solid var(--accentColor);
    display: grid;
    grid-template-columns: .5fr auto auto minmax(350px, 3fr);
}

#content{
    position: fixed;
    top: 90px;  /*leave some space for the header */
    width: 100%;
    height: 100%;
    overflow: scroll;
    padding: 0 0 15px 0;  /* a little space for the footer */
    background: var(--background);
    color: var(--shadowColor); 
    font-family: 'Abel', sans-serif;
    text-align: center;
}

#footer{
    position: fixed;
    bottom: 0;  /* align it to the bottom of the page */
    z-index: 999;
    width: 100%;
    text-align: center;
    font-size: small;
    color: grey;
    background-color: var(--background);
    border-top: 2px solid var(--accentColor);
}

#content hr{
    border: none; 
    border-bottom: 1px solid var(--shadowColor);  
    margin-left: 25%;
    max-width: 50%;
}

.entry{
    text-align: center;
    margin-left: 40px;
    margin-right: 40px;
}

.art{
    margin: 10px;
    max-width: 30%;
    height: auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);  
}

.updates{
    margin: 10px;
    max-width: 45%;
    height: auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.paint{
    grid-column: 2 / 3;
}

.title{
    grid-column: 3 / 4;
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 20px 10px 0 10px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0px 2px 3px var(--shadowColor); /* whatever dropshadows are cooool! */
}

/* Nav stuff */
nav {
    font-family: 'Montserrat', sans-serif;
    grid-column: 4/5;
    position: absolute;
    text-align: left;
    top: 100%;
    right: 0;
    background: var(--background);
    width: 100%;
    transform: scale(1,0);
    transform-origin: top;
    transition: transform 100ms ease-in-out;
    border-left: 2px solid var(--accentColor);
    border-bottom: 2px solid var(--accentColor);
}

nav ul {
    list-style: none;
}

nav li {
    margin: 1em;
}

nav a {
    color: var(--shadowColor);
    text-decoration: none;
    font-size: 1.2rem;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 150ms ease-in-out;
}

nav a:hover{
    color: white; /* this style gets used when mouse hovers over a list element*/
    text-shadow: 2px 2px 2px var(--shadowColor);
}

.nav-toggle:checked ~ nav {
    transform: scale(1,1);
}

.nav-toggle:checked ~ nav a{
    opacity: 1;
    transition: opacity 200ms ease-in-out 50ms;
}

.nav-toggle {
    display: none;
}

.nav-toggle-label {
    position: absolute;
    top: 0;
    right: 3em;
    margin-left: 1em;
    height: 100%;
    display: flex;
    align-items: center;
}

/* huge mess of stuff to make the hamberger menu icon thing, maybe this is dumb */
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after{
    display: block;
    background: var(--shadowColor);
    height: 2px;
    width: 2em;
    border-radius: 2px;
    position: relative;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after{
    content: '';
    background: var(--shadowColor);
    position: absolute;
}
.nav-toggle-label span::before{
    bottom: 7px;
}
.nav-toggle-label span::after{
    top: 7px;
}
/* ok that's all the stuff to make the menu icon */


/* adjusting layout for more than 1100px wide */
@media screen and (min-width: 1100px){

    .nav-toggle-label {
        display: none;
    }

    #header {
        grid-template-columns: .5fr auto auto minmax(350px, 3fr) .5fr;
    }

    nav {
        all: unset;
        font-family: 'Montserrat', sans-serif;
        grid-column: 4/5;
        padding:15px 10px 0 10px;
    }

    nav ul{
        display: flex;
        justify-content: right;
    }

    nav li {
        margin-left: 3em;
    }

    nav a {
        opacity: 1;
        position: relative;
    }

    nav a::before { /* makes the bar over the nav elements */
        content: '';
        display: block;
        height: 2px;
        background: var(--accentColor);
        position: absolute;
        top: -.2em;
        left: 0;
        right: 0;
        transform: scale(0,1);
        transition: transform ease-in-out 150ms;
    }

    nav a:hover::before {
        transform: scale(1,1);
    }
}


/* adjusting layout for less than 500px wide */
@media screen and (max-width: 500px) and (min-width:0px){

    #header {
        display: grid;
        grid-template-columns: .2fr auto .2fr auto .2fr;
        padding: 0 0 30px 0;
    }

    .paint{
        display: none;
    }

    .title{
        grid-column: 2 / 3;
    }

    nav{
        grid-column: 2 / 5;
        border-right: 2px solid var(--accentColor);
    }
}