@font-face {
      font-family: 'ABCDiatypePixel';
      src: url('/assets/ABCDiatype-RegularPixelBeta.woff2') format('woff2'),
           url('/assets/ABCDiatype-RegularPixelBeta.woff') format('woff');
      font-weight: normal;
      font-style: normal;
    }

    html, body {
      margin: 0;
      padding: 0;
      background: black;
      overflow: hidden;
      height: 100%;
      font-family: 'ABCDiatypePixel', sans-serif;
      color: #00FF41;
      font-feature-settings: "ss15";
      font-weight: inherit;
    }

    canvas {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      z-index: 0;
    }

    .message {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
      background-color: rgba(0, 0, 0, 0.75);
      padding: 2em;
      border: 1px solid #00FF41;
      border-radius: 0px;
      box-shadow: 0 0 15px #00FF41;
      max-height: 80vh;
      text-align: center;
      overflow-y: auto;
    }

    h1 {
      font-size: 2rem;
      margin-bottom: 1.5rem;
      text-transform: uppercase;
      letter-spacing: 2px;
      border-bottom: 2px solid #00FF41;
      padding-bottom: 0.5rem;
      color: #00FF41;
      text-shadow: 0 0 10px #00FF41;
    }

    ul {
      list-style: none;
      padding-left: 0;
      margin-top: 2rem;
    }

    li {
      margin: 1em 0;
    }

    a {
      color: #00FF41;
      text-decoration: none;
      font-size: 1.1em;
      padding: 0.4em 0.8em;
      border: 1px solid #00FF41;
      border-radius: 2px;
      display: inline-block;
      transition: all 0.2s ease-in-out;
    }

    a:hover {
      background-color: #00FF41;
      color: #000;
      box-shadow: 0 0 15px #00FF41;
    }

    .footer {
      position: absolute;
      bottom: 10px;
      width: 100%;
      text-align: center;
      font-size: 0.9em;
      z-index: 1;
      color: #00FF41;
      opacity: 0.8;
      text-shadow: 0 0 5px #00FF41;
    }