@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

* {
  height: auto;
  width: 100%;

    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: 'Press Start 2P', sans-serif;
   
    color: hsl(154 84% 70%);
    background: hsl(154 50% 5%);
    text-shadow: 0 0 5px hsl(154, 84%, 70%);
    z-index: -1;   


    -webkit-box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),0px 0px 0.5em 0px var(--glow-color);
    -moz-box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),0px 0px 0.5em 0px var(--glow-color);
    box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),0px 0px 0.5em 0px var(--glow-color);
    animation: border-flicker 2s linear infinite;
    animation-iteration-count: 3;

  -webkit-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3),0 0 0.45em var(--glow-color);
  -moz-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3),0 0 0.45em var(--glow-color);
  text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em var(--glow-color);
  animation: text-flicker 1s linear infinite;
  animation-iteration-count: 3;


}


.overlay {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: transparent;  /* fallback for old browsers */
  background: linear-gradient(rgb(72,0,72,0.0), rgb(192,72,72,0.0)), url("../img/mame_x4.png");  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(rgb(72,0,72,0.0), rgb(192,72,72,0.0)), url("../img/mame_x4.png"); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background-repeat: repeat;
  z-index: 2;

}

.faulty-letter {
  opacity: 0.5;
  animation: faulty-flicker 12s linear infinite;
}

@media (max-width: 600px) {
        .menu, .main, .right {
          width: 100%;
        }
      }


      
@keyframes faulty-flicker {
        0% {
          opacity: 0.1;
        }
        2% {
          opacity: 0.1;
        }
        4% {
          opacity: 0.5;
        }
        19% {
          opacity: 0.5;
        }
        21% {
          opacity: 0.1;
        }
        23% {
          opacity: 1;
        }
        80% {
          opacity: 0.5;
        }
        83% {
          opacity: 0.4;
        }
      
        87% {
          opacity: 1;
        }
      }
      
      @keyframes text-flicker {
        0% {
          opacity: 0.1;
        }
      
        2% {
          opacity: 1;
        }
      
        8% {
          opacity: 0.1;
        }
      
        9% {
          opacity: 1;
        }
      
        12% {
          opacity: 0.1;
        }
        20% {
          opacity: 1;
        }
        25% {
          opacity: 0.3;
        }
        30% {
          opacity: 1;
        }
      
        70% {
          opacity: 0.7;
        }
        72% {
          opacity: 0.2;
        }
      
        77% {
          opacity: 0.9;
        }
        100% {
          opacity: 0.9;
        }
      }
      
      @keyframes border-flicker {
        0% {
          opacity: 0.1;
        }
        2% {
          opacity: 1;
        }
        4% {
          opacity: 0.1;
        }
      
        8% {
          opacity: 1;
        }
        70% {
          opacity: 0.7;
        }
        100% {
          opacity: 1;
        }
      }