/* Start import fonts */
@font-face {
  font-family: 'filthyNerd';
  src: url('./fonts/nerd.woff2') format('woff2');
}

@font-face {
  font-family: 'alien';
  src: url('./fonts/alien.woff2') format('woff2');
}

@font-face {
  font-family: 'futureLight';
  src: url('./fonts/futureLight.woff2') format('woff2');
}

@font-face {
  font-family: 'futureFat';
  src: url('./fonts/futureFat.woff2') format('woff2');
}
/* End import fonts */

/* Start set primary rules */
:root {
  --primaryColorFg: #F0FFF0; /* Honey Dew */
  --primaryColorBg: #2F4F4F; /* DarkSlateGray */
  --primaryOrangeOne: #8B4000; /* Dark Burnt Orange */
  --primaryOrangeTwo: #7E2913; /* Deep Rust */
  --primaryOrangeThree: #A64B00; /* Dark Terracotta */
  --primaryGreenOne: #004225; /* Deep Emerald Green */
  --primaryGreenTwo: #4A5D23; /* Laurel Green */
  --primaryGreenThree: #002D1C; /* Dark Forest Green */
  --primaryGreenFour: #0B3D0B; /* Fir Green */
  --primaryGreenFive: #355E3B; /* Hunter Green */
}

html {
  font-family: 'futureFat';
  color: var(--primaryColorFg);
  font-size: 1em;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
  background-color: var(--primaryOrangeTwo);
}

body {
  padding: 0;
  margin: 0;
}
/* End set primary rules */

/* Start splash grid */
.gridHold {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  width: 100vw;
  height: 100vh;
  gap: 0;
  align-content: end;
}
/* End splash grid */

/* Start define splash grid panes */
.gridOne, .gridTwo, .gridThree, .gridFour, .gridFive, .gridSix {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px;
  background-size: 150%;
  background-position: center;
  box-shadow: inset 0 0 5vh 5px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  overflow-y: scroll;
  transition: 0.5s;
}

.gridOne:hover, .gridTwo:hover, .gridThree:hover, .gridFour:hover, .gridFive:hover {
  background-size: calc(100vh + 20%);
  box-shadow: inset 0 0 100vh 10px rgba(0, 0, 0, 0.8);
}

.gridOne {
  grid-area: 1 / 1 / 5 / 3;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: center / 100% no-repeat linear-gradient(rgba(0, 66, 37, 0.8), rgba(0, 66, 37, 0.8)), 
              bottom / calc(100vh + 10%) no-repeat url('./graphics/paneDrops/1.jpg');
  background-color: var(--primaryGreenOne);
}

.gridTwo {
  font-family: 'alien';
  grid-area: 1 / 3 / 3 / 5;
  background: center / 100% no-repeat linear-gradient(rgba(74, 93, 35, 0.8), rgba(74, 93, 35, 0.8)), 
              bottom / calc(100vh + 10%) no-repeat url('./graphics/paneDrops/2.jpg');
  background-color: var(--primaryGreenTwo);
}

.gridThree {
  grid-area: 3 / 3 / 5 / 4;
  background: center / 100% no-repeat linear-gradient(rgba(0, 45, 28, 0.8), rgba(0, 45, 28, 0.8)), 
              bottom / calc(100vh + 10%) no-repeat url('./graphics/paneDrops/4.jpg');
  background-color: var(--primaryGreenThree);
}

.gridFour {
  grid-area: 3 / 4 / 4 / 5;
  background: center / 100% no-repeat linear-gradient(rgba(11, 61, 11, 0.8), rgba(11, 61, 11, 0.8)), 
              bottom / calc(100vh + 10%) no-repeat url('./graphics/paneDrops/3.jpg');
  background-color: var(--primaryGreenFour);
}

.gridFive {
  grid-area: 4 / 4 / 5 / 5;
  background: center / 100% no-repeat linear-gradient(rgba(53, 94, 59, 0.8), rgba(53, 94, 59, 0.8)), 
              bottom / calc(100vh + 10%) no-repeat url('./graphics/paneDrops/5.jpg');
  background-color: var(--primaryGreenFive);
}
/* End define splash grid panes */

/* Start footer bar */
.footerHold {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 1fr;
  width: 100vw;
  height: auto;
  background-color: var(--primaryOrangeTwo);
  justify-content: center;
  align-content: center;
  align-items: start;
}

.footOne, .footTwo, .footThree {
  margin-top: 5em;
  overflow: hidden;
  height: 100%;
}

.footerBar {
  cursor: pointer;
  padding: 5px;
  font-family: 'futureFat';
  color: var(--primaryColorFg);
  font-size: 1em;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
  text-decoration: none;
  background: -15em 1.4em no-repeat linear-gradient(0deg, rgba(0, 66, 37, .5) 0%, rgba(0, 66, 37, .5) 50%, rgba(0, 66, 37, .5) 51%, rgba(0, 66, 37, .5) 100%);
  transition: 0.5s;
}

.footerBar:hover {
  padding: 5px;
  background: 0 1.4em no-repeat linear-gradient(0deg, rgba(0, 66, 37, .5) 0%, rgba(0, 66, 37, .5) 50%, rgba(0, 66, 37, .5) 51%, rgba(0, 66, 37, .5) 100%);
  transition: 0.5s;
}

.footerIcon {
  font-family: 'filthyNerd';
  padding: 5px;
  font-size: 2em;
}
/* End footer bar */

/* Start button inside splash grid panes */
.gridButton {
  cursor: pointer;
  border: solid 1px var(--primaryOrangeTwo);
  background: 0 2em no-repeat linear-gradient(0deg, rgba(126, 41, 19, .5) 0%, rgba(126, 41, 19, .5) 50%, rgba(126, 41, 19, .5) 51%, rgba(126, 41, 19, .5) 100%);
  width: 200px;
  padding: 5px;
  font-family: 'filthyNerd';
  color: var(--primaryColorFg);
  text-decoration: none;
  font-size: 1em;
  z-index: 1;
  text-align: center;
  transition: 0.5s;
}

.gridButton:hover {
  background: 0 0 no-repeat linear-gradient(0deg, rgba(126, 41, 19, .5) 0%, rgba(126, 41, 19, .5) 50%, rgba(126, 41, 19, .5) 51%, rgba(126, 41, 19, .5) 100%);
}
/* End button inside splash grid panes */

/* Start sub menu in splash pane */
.gridMenuButton {
  cursor: pointer;
  outline: solid 1px var(--primaryOrangeTwo);
  background: 0 3em no-repeat linear-gradient(0deg, rgba(126, 41, 19, .5) 0%, rgba(126, 41, 19, .5) 50%, rgba(126, 41, 19, .5) 51%, rgba(126, 41, 19, .5) 100%);
  width: 100%;
  padding: 15px;
  font-family: 'filthyNerd';
  color: var(--primaryColorFg);
  font-size: 1.5em;
  z-index: 1;
  text-align: center;
  transition: 0.5s;
}

.gridMenuButton:hover {
  background: 0 0 no-repeat linear-gradient(0deg, rgba(126, 41, 19, .5) 0%, rgba(126, 41, 19, .5) 50%, rgba(126, 41, 19, .5) 51%, rgba(126, 41, 19, .5) 100%);
}

.gridMenuLogo {
  width: 100%;
  height: 100%;
  padding: 15px;
  background: center 90% / 50% 50% no-repeat url('./graphics/logo/logo.svg');
  font-family: 'filthyNerd';
  color: var(--primaryColorFg);
  font-size: 1.5em;
  z-index: 1;
  text-align: center;
  filter: grayscale(1);
  transition: 0.5s;
}

.gridMenuLogo:hover {
  filter: grayscale(0);
}
/* End sub menu in splash pane */

/* Start floating menu */
.menuHold {
  position: fixed;
  display: grid;
  place-items: center;
  justify-content: center;
  top: 1em;
  left: 1em;
  width: 5em;
  height: 5em;
  background-color: rgba(0, 66, 37, 0.8);
  border-radius: 50%;
  z-index: 999;
  box-shadow: .5em .5em .5em rgba(0, 0, 0, .5);
  overflow: hidden;
  transition: 0.5s;
}

.menuHold:focus, .menuHold:active {
  position: fixed;
  display: grid;
  place-items: center;
  justify-content: center;
  top: 0em;
  left: 0em;
  width: auto;
  overflow-y: scroll;
  height: 100vh;
  background-color: rgba(0, 66, 37, 0.8);
  border-radius: 0;
  z-index: 999;
}

.menuActivateIcon {
  padding: 5px;
  font-size: 4em;
  cursor: pointer;
  font-family: 'filthyNerd';
  transition: 0.2s;
}

.menuActivateIcon:hover {
  padding: 5px;
  font-size: 4em;
  transform: rotate(10deg) scale(1.2);
}
/* End floating menu */

/* Start content grid */
.contentHold {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 4em;
  width: 100vw;
  min-height: 100vh;
  gap: 0;
  align-content: end;
}

.contentOne, .contentTwo {
  display: grid;
  padding: 40px;
  background-size: 150%;
  background-position: center;
  box-shadow: inset 0 0 5vh 5px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  overflow-y: scroll;
  transition: 0.5s;
}

.contentOne:hover, .contentTwo:hover {
  background-size: calc(100vw + 20%);
  box-shadow: inset 0 0 100vh 10px rgba(0, 0, 0, 0.8);
}

.contentOne {
  grid-area: 1 / 1 / 2 / 2;
  padding: 0;
  margin: 0;
  background: center / 100% no-repeat linear-gradient(rgba(0, 66, 37, 0.8), rgba(0, 66, 37, 0.8)), 
              bottom / calc(100vw + 10%) no-repeat url('./graphics/paneDrops/4.jpg');
  background-color: var(--primaryGreenOne);
}

.contentTwo {
  display: flex;
  place-items: center;
  justify-content: center;
  grid-area: 2 / 1 / 3 / 2;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: center / 100% no-repeat linear-gradient(rgba(0, 66, 37, 0.8), rgba(0, 66, 37, 0.8)), 
              bottom / calc(100vw + 10%) no-repeat url('./graphics/paneDrops/3.jpg');
  background-color: var(--primaryOrangeTwo);
}
/* End content grid */

/* Start menu button */
.contentMenuButton {
  display: flex;
  place-items: left;
  justify-content: start;
  width: 100%;
  background: 0 4em no-repeat linear-gradient(0deg, rgba(126, 41, 19, .5) 0%, rgba(126, 41, 19, .5) 50%, rgba(126, 41, 19, .5) 51%, rgba(126, 41, 19, .5) 100%);
  height: 4em;
  box-shadow: .25em .25em .25em rgba(0, 0, 0, .5);
  transition: .5s;
}

.contentMenuIcon {
  display: grid;
  place-items: left;
  justify-content: center;
  font-size: 4em;
  font-family: 'filthyNerd';
  color: var(--primaryColorFg);
  width: 1em;
  height: 1em;
  background-color: var(--primaryGreenOne);
  box-shadow: .25em .25em .25em rgba(0, 0, 0, .5);
  transition: .5s;
}

.contentMenuIcon:hover {
  transform: rotate(10deg) scale(1.2);
}

.contentMenuText {
  display: grid;
  place-items: center;
  justify-content: start;
  font-size: 1em;
  font-family: 'futureFat';
  color: var(--primaryColorFg);
  text-decoration: none;
  padding-left: 1em;
  width: 100%;
  height: 100%;
}

.contentMenuButton:hover {
  background: 0 0 no-repeat linear-gradient(0deg, rgba(126, 41, 19, .5) 0%, rgba(126, 41, 19, .5) 50%, rgba(126, 41, 19, .5) 51%, rgba(126, 41, 19, .5) 100%);
}
/* End menu button */

/* Start space for text */
.textSpace {
  width: calc(100vw - 12em);
  height: calc(100vh - 12em);
  padding: 6em 6em 0 6em;
  font-size: 1em;
  background-clip: content-box;
  filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, .8))
}
/* End space for text */

/* End content grid */

/* Start small screen */
@media (max-width: 1280px) {
  
  /* Start splash grid */
  .gridHold {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, 1fr);
    width: 100vw;
    height: auto;
    gap: 0;
    align-content: end;
  }
  /* End splash grid */

  /* Start define splash grid panes */
  .gridOne, .gridTwo, .gridThree, .gridFour, .gridFive, .gridSix {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    background-size: 150%;
    background-position: center;
    box-shadow: inset 0 0 5vh 5px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    overflow-y: scroll;
    transition: 0.5s;
  }

  .gridOne:hover, .gridTwo:hover, .gridThree:hover, .gridFour:hover, .gridFive:hover {
    background-size: cover;
    box-shadow: inset 0 0 100vh 10px rgba(0, 0, 0, 0.8);
  }

  .gridOne {
    grid-area: 1 / 1 / 2 / 2;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: center / cover no-repeat linear-gradient(rgba(0, 66, 37, 0.8), rgba(0, 66, 37, 0.8)), 
                bottom / cover no-repeat url('./graphics/paneDrops/1.jpg');
    background-color: var(--primaryGreenOne);
  }

  .gridTwo {
    font-family: 'alien';
    grid-area: 2 / 1 / 3 / 2;
    background: center / cover no-repeat linear-gradient(rgba(74, 93, 35, 0.8), rgba(74, 93, 35, 0.8)), 
                bottom / cover no-repeat url('./graphics/paneDrops/2.jpg');
    background-color: var(--primaryGreenTwo);
  }

  .gridThree {
    grid-area: 3 / 1 / 4 / 2;
    background: center / cover no-repeat linear-gradient(rgba(0, 45, 28, 0.8), rgba(0, 45, 28, 0.8)), 
                bottom / cover no-repeat url('./graphics/paneDrops/4.jpg');
    background-color: var(--primaryGreenThree);
  }

  .gridFour {
    grid-area: 4 / 1 / 5 / 2;
    background: center / cover no-repeat linear-gradient(rgba(11, 61, 11, 0.8), rgba(11, 61, 11, 0.8)), 
                bottom / cover no-repeat url('./graphics/paneDrops/3.jpg');
    background-color: var(--primaryGreenFour);
  }

  .gridFive {
    grid-area: 5 / 1 / 6 / 2;
    background: center / cover no-repeat linear-gradient(rgba(53, 94, 59, 0.8), rgba(53, 94, 59, 0.8)), 
                bottom / cover no-repeat url('./graphics/paneDrops/5.jpg');
    background-color: var(--primaryGreenFive);
  }
  /* End define splash grid panes */

  /* Start footer bar */
  .footerHold {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    padding: 1em;
    width: calc(100vw - 2em);
  }

  .footOne, .footTwo, .footThree {
    margin-top: 1em;
  }
  /* End footer bar */

  /* Start button inside splash grid panes */
  .gridButton {
    cursor: pointer;
    border: solid 1px var(--primaryOrangeTwo);
    background: 0 2em no-repeat linear-gradient(0deg, rgba(126, 41, 19, .5) 0%, rgba(126, 41, 19, .5) 50%, rgba(126, 41, 19, .5) 51%, rgba(126, 41, 19, .5) 100%);
    width: 200px;
    padding: 5px;
    font-family: 'filthyNerd';
    color: var(--primaryColorFg);
    text-decoration: none;
    font-size: 1em;
    z-index: 1;
    text-align: center;
    transition: 0.5s;
  }

  .gridButton:hover {
    background: 0 0 no-repeat linear-gradient(0deg, rgba(126, 41, 19, .5) 0%, rgba(126, 41, 19, .5) 50%, rgba(126, 41, 19, .5) 51%, rgba(126, 41, 19, .5) 100%);
  }
  /* End button inside splash grid panes */

  /* Start sub menu in splash pane */
  .gridMenuButton {
    cursor: pointer;
    outline: solid 1px var(--primaryOrangeTwo);
    background: 0 3em no-repeat linear-gradient(0deg, rgba(126, 41, 19, .5) 0%, rgba(126, 41, 19, .5) 50%, rgba(126, 41, 19, .5) 51%, rgba(126, 41, 19, .5) 100%);
    width: 100%;
    padding: 15px;
    font-family: 'filthyNerd';
    color: var(--primaryColorFg);
    font-size: 1.5em;
    z-index: 1;
    text-align: center;
    transition: 0.5s;
  }

  .gridMenuButton:hover {
    background: 0 0 no-repeat linear-gradient(0deg, rgba(126, 41, 19, .5) 0%, rgba(126, 41, 19, .5) 50%, rgba(126, 41, 19, .5) 51%, rgba(126, 41, 19, .5) 100%);
  }

  .gridMenuLogo {
    width: 100%;
    height: 10em;
    padding: 15px;
    background: center 90% / 50% 50% no-repeat url('./graphics/logo/logo.svg');
    font-family: 'filthyNerd';
    color: var(--primaryColorFg);
    font-size: 1.5em;
    z-index: 1;
    text-align: center;
    filter: grayscale(1);
    transition: 0.5s;
  }

  .gridMenuLogo:hover {
    filter: grayscale(0);
  }
  /* End sub menu in splash pane */

  /* Start floating menu */
  .menuHold {
    top: .1em;
    left: .1em;
    width: 3em;
    height: 3em;
  }

  .menuActivateIcon {
    padding: 5px;
    font-size: 2.5em;
    cursor: pointer;
    transition: 0.2s;
  }
  
  .menuActivateIcon:hover {
    padding: 5px;
    font-size: 2.5em;
  }
  /* End floating menu */
  
  
  /* Start content grid */
  .contentHold {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 0em;
    width: 100vw;
    min-height: 100vh;
    gap: 0;
    align-content: end;
    transition: .5s;
  }

  .contentOne, .contentTwo {
    display: grid;
    padding: 40px;
    background-size: 150%;
    background-position: center;
    box-shadow: inset 0 0 5vh 5px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    overflow-y: scroll;
    transition: 0.5s;
  }

  .contentOne:hover, .contentTwo:hover {
    background-size: cover;
    box-shadow: inset 0 0 100vh 10px rgba(0, 0, 0, 0.8);
  }

  .contentOne {
    grid-area: 1 / 1 / 2 / 2;
    padding: 0;
    margin: 0;
    background: center / cover no-repeat linear-gradient(rgba(0, 66, 37, 0.8), rgba(0, 66, 37, 0.8)), 
                bottom / cover no-repeat url('./graphics/paneDrops/4.jpg');
    background-color: var(--primaryGreenOne);
  }

  .contentTwo {
    display: grid;
    place-items: center;
    justify-content: center;
    grid-area: 2 / 1 / 3 / 2;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: center / cover no-repeat linear-gradient(rgba(0, 66, 37, 0.8), rgba(0, 66, 37, 0.8)), 
                bottom / cover no-repeat url('./graphics/paneDrops/3.jpg');
    background-color: var(--primaryOrangeTwo);
  }
  /* End content grid */

  /* Start menu button */
  .contentMenuButton {
    display: flex;
    place-items: left;
    justify-content: start;
    width: 100%;
    background: 0 4em no-repeat linear-gradient(0deg, rgba(126, 41, 19, .5) 0%, rgba(126, 41, 19, .5) 50%, rgba(126, 41, 19, .5) 51%, rgba(126, 41, 19, .5) 100%);
    height: 4em;
    box-shadow: .25em .25em .25em rgba(0, 0, 0, .5);
    transition: .5s;
  }

  .contentMenuIcon {
    display: grid;
    place-items: left;
    justify-content: center;
    font-size: 4em;
    font-family: 'filthyNerd';
    color: var(--primaryColorFg);
    width: 1em;
    
    height: 1em;
    background-color: var(--primaryGreenOne);
    box-shadow: .25em .25em .25em rgba(0, 0, 0, .5);
    transition: .5s;
  }

  .contentMenuIcon:hover {
    transform: rotate(10deg) scale(1.2);
  }

  .contentMenuText {
    display: grid;
    place-items: center;
    justify-content: start;
    font-size: 1em;
    font-family: 'futureFat';
    color: var(--primaryColorFg);
    text-decoration: none;
    padding-left: 1em;
    width: 100%;
    height: 100%;
  }

  .contentMenuButton:hover {
    background: 0 0 no-repeat linear-gradient(0deg, rgba(126, 41, 19, .5) 0%, rgba(126, 41, 19, .5) 50%, rgba(126, 41, 19, .5) 51%, rgba(126, 41, 19, .5) 100%);
  }
  /* End menu button */
  
  /* Start space for text */
  .textSpace {
    width: calc(100vw - 6em);
    height: calc(100vh - 6em);
    padding: 3em 3em 0 3em;
  }
  /* End space for text */

  /* End content grid */
}
/* End small screen */

/* End of */
/* End of */
/* End of */
/* End of */
/* End of */