@font-face {
      font-family: 'pc98';
      src: url('../fonts/pc-9800-regular.ttf') format('truetype');
    } 

    body {
      display: flex;
      justify-content: center;
      width: 100%;
      margin: 0; /* Remove default body margins */
      padding: 0;
      height: 100dvh; /* Android Chromeなどのモダンブラウザ向け */
      /* Fallback for older browsers */
      height: 100vh;
      background: black;
      color: white;
      font-family: 'pc98', monospace;
    }


    a:link {
      color: white;
      background-color: transparent;
      text-decoration: none;
    }

    a:visited {
      color: white;
      background-color: transparent;
      text-decoration: none;
    }

    a:hover {
      color: blue;
      background-color: transparent;
      text-decoration: underline;
    }

    a:active {
      color: white;
      background-color: transparent;
      text-decoration: underline;
    }

    .viewport {
      /*display: flex;*/
      justify-content: center;
      /*align-items: flex-start;*/
      /*width: 100vw;*/
      /*overflow: hidden;
      padding-bottom: 50px;*/
    }

    .screen {
      width: 400px;
      transform-origin: center;
    }

    .frame {
      border: 3px solid white;
      padding: 16px;
      margin-bottom: 20px;
    }

    .title {
      text-align: center;
      font-size: 56px;
      color: cyan;
    }

    .center {
      text-align: center;
      margin: 1px 0;
    }

    .status {
      font-size: 24px;
    }

    .cursor::after {
      content: "■";
      margin-left: 6px;
      animation: blink 1s steps(1) infinite;
    }

    .cursor_a::after {
      content: "■";
      margin-left: 6px;
      animation: blink 1s steps(1) infinite;
    }

    @keyframes blink {
      50% { opacity: 0; }
    }

    .press {
      color: yellow;
      font-size: 24px;
    }

    .flex {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 20px;
    }

    .flex_h {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      gap: 20px;
    }

    .box {
      /*margin: 1;*/
      border: 3px solid white;
      padding: 10px;
    }

    .box-title {
      color: magenta;
      font-size: 24px;
      margin-bottom: 10px;
    }

    .box-title2 {
      color: white;
      font-size: 24px;
      margin-bottom: 10px;
    }

    .menu p,
    .updates p {
      font-size: 22px;
      margin: 6px 0;
    }

    .menu p.active {
      background: white;
      color: black;
    }

    .updates-title {
      color: yellow;
      font-size: 24px;
      margin-bottom: 10px;
    }

    footer {
      text-align: center;
      font-size: 18px;
      color: cyan;
      margin-top: 20px;
    }