:root {
    --brightRed: #e40101;
    --yellowBackground: linear-gradient(#ffe330, rgb(255, 166, 0));
    --grayShadow: gray;
    --blackBorderOrText: black;
    --buttonBackground: #ff2600;
}

html {
    scroll-behavior: smooth;
}

 body {
     background: var(--yellowBackground);
     background-repeat: no-repeat;
     background-size: contain;
     display: grid;
     grid-template-rows: 1fr auto;
 }

 header {
    background-color: var(--brightRed);
 }

 header, nav a {
     border: 5px solid var(--blackBorderOrText);
     border-radius: 5px;
     margin: 25px;
     padding: 10px;
     box-shadow: 5px 5px var(--grayShadow);
 }

 header h1 {
     font-size: 4em;
     text-align: left;
     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     margin: 10px;
 }

 header h2 {
     font-size: 1.75em;
     text-align: left;
     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     margin: 10px;
 }

 header img {
     max-height: 110px;
     max-width: 110px;
     float: right;
 }

 header nav a {
     font-size: 1.5em;
     text-decoration: none;
     text-align: left;
     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     margin: 10px;
     color: var(--blackBorderOrText);
     background-color: var(--buttonBackground);
     padding: 10px;
     display: inline-block;
 }

 footer {
     border: 5px solid var(--blackBorderOrText);
     border-radius: 5px;
     background-color: var(--brightRed);
     margin: 25px;
     padding: 10px;
     box-shadow: 5px 5px var(--grayShadow);
 }

 footer nav a {
     font-size: 1.5em;
     text-decoration: none;
     text-align: left;
     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     margin: 10px;
     margin-bottom: 60px;
     padding: 10px;
     color: var(--blackBorderOrText);
     text-align: center;
     background-color: var(--buttonBackground);
 }
 footer nav li {
    margin-bottom: 40px;
 }

 nav li, footer li {
    display: inline-block;
    margin-right: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

footer, footer nav a, footer li {
    text-align: center;
}

footer p {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

footer p a {
    color: var(--blackBorderOrText);
    text-decoration: none;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-decoration-line: underline;
}

footer p a:hover {
    font-style: italic;
}

main section {
    border: 5px solid var(--blackBorderOrText);
    border-radius: 5px;
    background-color: var(--brightRed);
    margin: 25px;
    padding: 10px;
    box-shadow: 5px 5px var(--grayShadow);
}

main section h1, main section h2, h4 {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

main h1 {
    font-size:xx-large;
}

main section p  {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 1.2em;
}


main section a {
    color: var(--blackBorderOrText);
    text-decoration: none;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-decoration-line: underline;
}

main section a:hover {
    font-style: italic;
}

main section p::first-letter {
    font-size: 1.3em;
}

img, video {
    margin: 10px;
}



caption {
    font-size: xx-large;
}

table {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    border: 5px solid var(--blackBorderOrText);
    border-collapse: collapse;
}

.centertable {
    margin-left: auto;
    margin-right: auto;
}

table, th, td {
    border: 5px solid var(--blackBorderOrText)
}

table tr th, table tr td {
    padding: 5px;
    padding-inline: 10px;
}

header nav ul li a:visited, footer nav ul li a:visited {
    font-family: italic;
}

header nav ul li a:hover, footer nav ul li a:hover {
    background-color: var(--blackBorderOrText);
    color: var(--brightRed);
}

.headergrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    justify-items: left;
}
.headergrid1 {
    grid-area: 1 / 1 / 2 / 2;
}
.headergrid2 {
    grid-area: 2 / 1 / 3 / 2;
}
.headergrid3 {
    grid-area: 1 / 2 / 3 / 3;
    justify-self: right;
}

.maingrid {
    display: grid;
    grid-template-rows: (1fr);
    grid-template-columns: (1.5fr, 0.5fr);
}
.maingrid1 {
    grid-area: 1 / 1 / 2 / 2;
}
.maingrid2 {
    grid-area: 1 / 2 / 2 / 3;
    height: 400px;
}

img:not(.headergrid3) {
    border: 5px solid var(--blackBorderOrText);
     border-radius: 5px;
     box-shadow: 5px 5px var(--grayShadow);
 }

 a:active {
    color: var(--grayShadow) !important;
} /* I have no clue why i need to use !important in order to get it to work, but it does'nt work without it */

header p {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: xx-large;
}

@media all and (max-width: 960px) {
    .maingrid {
        display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: (1fr);
    }
    .maingrid1 {
        grid-area: 1 / 1 / 2 / 2;
    }
    .maingrid2 {
        grid-area: 2 / 1 / 3 / 2;
        height: 400px;
        width: 500px;
    }
}



 @media all and (max-width: 768px) {

    .maingrid {
        display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: (1fr);
    }
    .maingrid1 {
        grid-area: 1 / 1 / 2 / 2;
    }
    .maingrid2 {
        grid-area: 2 / 1 / 3 / 2;
        height: 240px;
        width: 300px;
    }



    header nav {
        text-align: center;
    }
    
    footer nav a {
        border: 4px solid var(--blackBorderOrText);
        box-shadow: 5px 5px var(--grayShadow);
        text-align: center;
    }
    footer li {
        font-size: 0.8em;
        line-height: 50pt;
        margin: 5px
        
    }
    footer li a {
        margin: 5px;
    }
    header li, header li a {
        margin: 5px;
    }
    ul {

    padding: 0px;
    }

    header a, header li {
        margin-top: 0;
        margin-bottom: 0;
        padding: 0;
    }
 }

 @media all and (max-width: 470px) {

    header h1 {
        font-size: 2em
    }
    header h2 {
        font-size: 1.5em;
    }
    header img {
        height: 90px;
        width: 90px;
    }

    .headergrid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        justify-items: left;
    }
    .headergrid1 {
        grid-area: 1 / 1 / 2 / 2;
    }
    .headergrid2 {
        grid-area: 2 / 1 / 3 / 3;
    }
    .headergrid3 {
        grid-area: 1 / 2 / 2 / 3;
        justify-self: right;
    }
 }

 @media all and (max-width: 410px) {
    .maingrid2 {
        height: 160px;
        width: 200px;
    }
 }



 /* I'm sorry if half of my css makes no sense. it's hard to keep track of an assignment if you take month long hiatuses on each part of it. 
 All I know is that it works. Sorry.
 -Liam  */