/**LAYOUT CONTAINER**/

/** credits to be placed 

Nav Menu - https://www.foollovers.com/mat/menu21.html 
Header Banner Image - https://fi.pinterest.com/pin/26388347813004310/
Header and Footer Pixels - https://jasminnie.weebly.com/pixels2.html
Sun Pixel - https://www.deviantart.com/itwoi/art/Pixel-Sun1v2-F2U-632202305
Moon Pixel - https://www.foollovers.com/mat/i-star/ib04-icon-moon.gif
Arrow Pixel - https://www.foollovers.com/mat/i-arrow01.html
**/

.permanent-marker-regular {
  font-family: "Permanent Marker", cursive;
  font-weight: 400;
  font-style: normal;
}

.chewy-regular {
  font-family: "Chewy", system-ui;
  font-weight: 400;
  font-style: normal;
}

.sansation-light {
  font-family: "Sansation", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.sansation-regular {
  font-family: "Sansation", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.sansation-bold {
  font-family: "Sansation", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.sansation-light-italic {
  font-family: "Sansation", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.sansation-regular-italic {
  font-family: "Sansation", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.sansation-bold-italic {
  font-family: "Sansation", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.sitename {font:50px 'Chewy';letter-spacing:5px; color: #ffc603; text-shadow:2px 2px 3px #fff;padding-top:125px;}

.headers {color: #ffc603}

body {
    background-color: #070707;
    color: white;
}

#container {
    max-width: 1250px;
    margin: 100px auto;
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
}

#box {
    background-color: #070707;
    height: max-content;
    font-family: Sansation, Arial, Helvetica, sans-serif;
}

header {
    background-color: transparent;
    font-family: Sansation, Arial, Helvetica, sans-serif;
    width: 100%;
    height: 300px;
    background: url(https://i.postimg.cc/SNHMc94n/Gif-Background.gif) center;
    background-size: cover;
    background-position: center;
    border-bottom: 0px solid #0a0a0a;
    text-align:center;
    grid-row: 1 / 3;
    grid-column: 1 / 3;
}

footer {
    background-color: transparent;
    text-align: center;
    margin-top: 30px;
}




main {
    display: grid;
    grid-template: repeat(2, 1fr) / repeat(2, 1fr);
    background-color: #070707;
    font-family: Sansation, Arial, Helvetica, sans-serif;
}

main {
    width: auto;
    border-style: solid;
    border-width: 1px;
    border-color: white;
}

.UL, .UR, .LL, .LR {
    width: auto;
    height: auto;
    border-style: solid;
    border-width: 1px;
    border-color: white;
    overflow: auto;
    scrollbar-color: #ffc603 black;
    scrollbar-width: thin; 
}

nav, section {
    display: grid;
    background-color: #070707;
    border-style: solid;
    border-width: 1px;
    border-color: white;
    grid-row: 1 / 3;
    grid-column: 1 / 3;
}

nav {
    grid-row: 1 / 3;
    grid-column: 1 / 3;
}

section {
    height: 418px;
    grid-row: 2 / 3;
    grid-column: 1 / 3;
}