/* referencing */

@font-face {
  font-family:OpenDyslexic;
  src: url(/assets/fonts/OpenDyslexic-Regular.otf);
  }
  
/* defining */

:root {
  /* blob goblin toy co web palette, use var(--x) to access */
  --soapflower: #DBB3FF;
  --shinygooblue: #3279F6;
  --electricfuchia: #D900DF;
  --isitgrey: #DDDBDD;
  --goblinseggblue: #00D9D9;
  --gooblue: #134FC5;
  --blaringblue: #0D0D8B;
  --bgpurp: #5D3184;
  --grumbleberry: #A1156C;
  --deepocean: #1E3A5E;
  --xxhotpink: #EE005F;
  --duskycove: #00445D;
  --slimegreen: #00C845;
  --fakefern: #007429;
  --lessdark: #211427;
  --darkest: #1F0023;
  --deadtech: #D9D900;
  --okayorange: #FF5F00;

  --main-bg:
    linear-gradient(
    to bottom, 
    var(--goblinseggblue)1%,
    var(--slimegreen)66%,
    var(--fakefern),
    var(--bgpurp)99%);
    
  --lavpillcontainerbg: 
    linear-gradient(to top, var(--fakefern), var(--slimegreen)69%, var(--isitgrey)99%);
    
  --pillbox-light: inset -2px 4px 5px;  /* specify color here */
  --pillbox-shadow: inset 2px -4px 8px;  /* specify color here */
  --pillbox-text-light: -1px 1px 2px;  /* specify color here */
  --pillbox-text-shadow: 1px -1px 2px;  /* specify color here */
  
  --nav-buttons: url(/assets/buttons/nav-sprites.png);
}

    
    /* styling */
  
    
  header {
    height: 50px;
    margin: auto;
    font-family: "OpenDyslexic";
    font-size: 30px;
    text-align: center;
    color: var(--blaringblue);
    background: var(--goblinseggblue);
    border-radius: 50px;
    padding: 10px 0px 15px 0px;
    box-shadow: var(--pillbox-light) var(--deadtech), var(--pillbox-shadow) var(--deepocean);
    text-shadow:  var(--pillbox-text-light) var(--deepocean), var(--pillbox-text-light) var(--deadtech);
     position: sticky;
     top: 30px;
    }
     
    .indexbody {
      height: 100vh;
      width: 100vw;
      background: var(--main-bg);
      background-repeat: no-repeat;
      align-items: center;
      justify-content: center;
      position: fixed;
      display: flex;
      flex-direction: column;
      }
    
    
    a > .lavpillbutton {
      box-sizing: border-box;
      font-family: "OpenDyslexic";
      font-size: 20px;
      padding: 11px;
      width: 250px;
      cursor: help;
      background: var(--soapflower);
      text-align: center;
      text-shadow: var(--pillbox-text-shadow) var(--bgpurp), var(--pillbox-text-light) var(--isitgrey);
      color: var(--darkest);
      border: none;
      border-radius: 50px;
      margin: auto;
      box-shadow: var(--pillbox-light) var(--isitgrey), var(--pillbox-shadow) var(--bgpurp);
      
      }
      
     .lavpillbuttoncontainer {
        background-image: var(--lavpillcontainerbg);
        width: 280px;
        height: auto;
        padding: 1.8em .5em 2.5em .5em;
        border: none;
        outline: double;
        outline-width: 5px;
        outline-offset: -5px;
        outline-color: var(--fakefern);
        box-shadow: 0px 7px 8px 0px #00742969;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
       gap: 1em;
        }
        
        
.nav-list {
  list-style: none;
 position: relative;
  width: 100vw;
  margin: auto;
}

.nav-button {
  position: relative;
  display: inline-block;
  flex-basis: 30%;
  width: 150px;
  height: 150px;
  background: var(--nav-buttons);
}

#prev {
  background-position: 0;
   animation: play-prev 2s steps(3) infinite;
}

#home {
  background-position: -450px;
   animation: play-home 2s steps(3) infinite;
}

#next {
  background-position: -900px;
  animation: play-next 2s steps(3) infinite;
 }

@keyframes play-prev {
  100% {background-position: -450px;}
}

@keyframes play-home {
  100% {background-position: -900px;}
}
  
  
@keyframes play-next {
  100% {background-position: -1350px;}
}