.hud {
        z-index: 5;
      }
      @font-face {
      font-family: Biscuit Kids;
      src: url("../fonts/biscuitkidsDEMO.otf");
    }
    @font-face {
      font-family: "Comic Neue";
      src: url("../fonts/Comic_Neue/ComicNeue-Bold.ttf");
    }
    @font-face {
      font-family: "Playpen";
      src: url("../fonts/Playpen_Sans/PlaypenSans-VariableFont_wght.ttf");
    }
    @font-face {
      font-family: Poetsen One;
      src: url("../fonts/Poetsen_One/PoetsenOne-Regular.ttf");
    }
    @font-face {
      font-family: "Cantarell";
      src: url("../fonts/Cantarell-VF.otf");
  }
    @media (prefers-reduced-motion: no-preference) {
      @keyframes neon-bork {
        0% {color: #ffc864}
        30% {color: #ffc864}
        40% {color: #bd864c}
        43% {color: #ffc864}
        63% {color: #ffc864}
        64% {color: #bd864c}
        65% {color: #ffc864}
        67% {color: #bd864c}
        68% {color: #ffc864}
      }
    }
      svg {
        height: 1px;
        width: 1px;
        visibility: hidden;
      }
      body {
        
        background: url(../../maskhud/bg.jpg);
        overflow-x: hidden;
      }
      @keyframes fade-in {
        from {opacity: 0;}
        to {opacity: 1;}
      }
      .sr-only {
        clip: rect(0 0 0 0);
			clip-path: inset(50%);
			height: 1px;
			width: 1px;
		overflow: hidden;
		position: absolute;
      }
      .jump-main {
        position: absolute;
        padding: 0.5rem 1rem;
        transform: translateY(-200%);
        transition: transfrom 1s ease;
        background-color: #dab0e0;
        border-radius: 20px;
      }
      .jump-main:focus {
        transform: translateY(10em);
      }
      .back-top {
        opacity: 0;
        animation: fade-in 1s forwards;
        animation-timeline: scroll();
				animation-range: entry 10px 100px;
        position: fixed;
				z-index: 4;
				bottom: 1em;
        right: 1em;
        border: #ffc864 solid 3px;
        border-radius: 100%;
        padding: 10px;
        background-color: #664c44;
        transition: background-color 1s ease;
        font-size: 1.7em;
      }
      .back-top:hover {
        background-color: #040d29;
      }
      .back-top > span > a, .back-top > span > a:visited {
        text-shadow: 0 0 10px #fb6099,0 0 10px #fb6099,0 0 10px #fb6099,0 0 10px #fb6099,0 0 10px #fb6099;
			color: #fff;
        font-weight: bold;
      
      }
      @supports not (animation-timeline: scroll()) {
        .back-top {
          opacity: 1;
        }
      }
      html {
        scroll-behavior: smooth;
      }
      img {
        width: 100%;
        height: 100%;
      }
      .body-border {
        box-shadow: 5px 5px 40px 50px  #282632 inset;
        height: 106%;
        width: 101%;
        position: fixed;
        overflow: hidden;
        z-index: 0;
        filter: url(#turbulence);
        display: flex;
        left: -8px;
        right: 0;
        top: -9px;
        margin: 0px;
        pointer-events: none;
      }
      h2 {
        font-family: "Biscuit Kids";
        text-align: center;
        text-decoration: underline;
        text-underline-offset: -0.4em;
      }
      #fight::before {
        border-bottom: orange 4px dotted;
        content: "mm";
        color: #01040d;
        min-width: 10px;
        min-height: 2px;
        transform: translateY(-17px) translateX(-43px);
        position: absolute;
      }
      #fight::after {
        border-bottom: orange 4px dotted;
        content: "mm";
        color: #01040d;
        min-width: 10px;
        min-height: 2px;
        transform: translateY(-17px) translateX(2px);
        position: absolute;
      }
      #fly {
        float: right;
        font-size: 7em;
        font-family: mono;
        margin: 0px;
        font-weight: 800;

      }
      .site-nav {
        display: flex;
        margin: 0% 13%;
        

      }
      .site-nav > ul > li > a, .site-nav > ul > a:visited {
        text-shadow: 0 0 10px #fb6099,0 0 10px #fb6099,0 0 10px #fb6099,0 0 10px #fb6099,0 0 10px #fb6099;
			color: #fff;
      transition: filter 0.2s ;
      }
      .site-nav > ul > li > a:hover {
        filter: brightness(1.5);
      }
      .site-nav > ul {
        display: flex;
        background: #282632;
        gap: 1.5em;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
        height: 80px;
        list-style-type: none;
        margin-bottom: 0px;
        align-items: center;
        padding: 10px;
        border-radius: 15px 15px 0px 0px;
        border: #f1fffa solid 2px;
        border-bottom: none;
      }
      .site-nav > ul > li > a:focus {
        outline: white 1.5px solid;
			  border-radius: 5px;
        
      }
      .page-nav {
          display: flex;
          justify-content: center;
          align-items: center;
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          margin-bottom: 4em;
          z-index: 1;
      }
      .option-holder {
        
        width: 100%;
        height: 80px;
        position: absolute;

      }
      .page-nav-option-ul {
        list-style-type: none;
        padding: 0px;
        display: grid;
        grid-template-columns: 1fr 3fr 1fr;
        position: relative;
        z-index: 1;
        justify-content: center;
        align-items: center;
        
      }
      .page-nav-option-li{
        z-index: 2;
        justify-self: center;
        color: orange;
        text-align: center;
      }
      .page-nav-option-li > span > a:hover::before, .page-nav-option-li > span > a:hover::after {
        scale: 0.6;
        content: url("../images/sparkz.gif");
        filter: hue-rotate(90deg);
        display: inline;

      }
      

      .page-nav-option-li > span > a, .page-nav-option-li >span > a:visited {
          color: #ffc864;
          text-shadow: 2px 2px 5px #8a70d3, -2px -2px 5px #8a70d3;
          font-family: "Biscuit Kids";
          text-underline-offset: 10px;
          font-size: 1.4em;
          text-decoration-color: #8affb8 ;
          animation: neon-bork infinite 17s steps(3, jump-none);
          animation-delay: 3s ;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 31.4px;
      }
      .page-nav-option-box {
        background: #282632;
        border-radius: 30px;
        border: orange wavy 2px;
        filter: url("#turbulence") blur(2px);
        position: absolute;
        width: 180px;
        height: 80px;
        box-shadow: 0px 6px 7px 5px aliceblue;
        pointer-events: none;

      }
      #col1 {
        rotate: 11deg;
        width: 180px;
      }
      #col3 {
        rotate: 349deg;
        width: 180px;
      }
      #col3, #col1 {
        transform: translateY(-1em);
      }
      #col1 + .page-nav-option-box {
        right: 0;
        left: 0;
        margin:0 auto;

      }
      
      #col2 + .page-nav-option-box {
        right: 0;
      }
      @media (max-width: 500px) {
        #col3, #col1, #col2 {
          width: 100px;
        }
        .page-nav-option-ul {
          gap: 15px;
          grid-template-columns: 1fr 1fr 1fr;
        }
        
      }
      main {
        display: flex;
        flex-direction: column;
        gap: 20vh;
        
      } 
      .content-box {
       
         background: #fefbf2;
        box-shadow: 3px 3px 5px -2px rgba(0,0,0,.35),0 0 5px rgba(0,0,0,.35),inset 0 0 0 5px #fefbf2,inset 0 0 0 6px #ff7200;
        color: #ff7200;
       font-family: Cantarell;
        margin: 5% 10%;
        padding: 15px;
        padding-bottom: 25px;
      
      justify-self: center;
      margin-bottom: 10px;
      color: #8e1971;
      }
      .content-box > * {
        
      }
      .content-box > p {
        margin: 20px;
        font-size: 1em;
      }
      #fight-arr {
        filter: invert();
      }
     
      #fight-arr > * {
        filter: invert();
        color: #ffecdd;
      }
      
      #fight {
        color: #f1fffa;
      }
      .img-in {
        width: min(40%, 200px);
        float: left;
        margin-left: 10px;
        margin-right: 35px;
        border-radius: 10px;
        border: 5px dashed red;
      }
      .fgc-plat {
        background-color: lightblue;
        border: 1px solid purple;
        border-radius: 10px;
        float: right;
        color: white;
        text-align: right;
        max-width: 20%;
        padding: 10px;
        margin: 5px;
      }
      .fgc-plat > ul {
        list-style-type: none;
        padding: 5px 10px;
        list-style-position: outside;
        margin: 0px;
      }
      .fgc-plat > ul > li::before {
        content: "~ ";
      }
      h3 {
        text-align: center;
        text-decoration: underline solid 5px rgb(255, 208, 0);
        text-underline-offset: 3px;
        margin-top: 2em;
      }
      @media (min-width: 1250px) {
        .content-box {
          font-size: 1.5em;
        }

      }
      @media (max-width: 500px) {
          .img-in {
            width: 100%;
            margin: 0px;
          }
          .fgc-plat {
            max-width: 45%;
          }
      }