@font-face {
        font-family: 'Sequel 100';
        src: url('sequel100.woff2') format('woff2'), /* Modern Browsers */ url('sequel100.woff') format('woff'); /* Older Browsers */
        font-weight: bold;
      }
      body {
        background-color: black;
        color: #fff;
        overflow: hidden;
        font-family: 'Sequel 100', sans-serif;
        display: flex;
        justify-content: center;
        font-size: small;
        align-items: center;
        height: 100vh;
        margin: 0;
      }

      .container {
        max-width: 400px;
        padding: 20px;
        background-color: black;
        border-radius: 10px;
        box-shadow: 0 0 30px rgb(86, 245, 237);
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .input-container {
        display: flex;
        align-items: center;
        width: 100%;
        margin-bottom: 10px;
      }

      select {
        padding: 10px;
        border: none;
        border-radius: 5px;
        background-color: #333;
        color: #fff;
        margin-right: 5px;
        flex-shrink: 0;
      }

      input[type='text'] {
        flex-grow: 1;
        padding: 10px;
        border: none;
        border-radius: 5px;
        background-color: #333;
        color: #fff;
        font-family: 'Consolas', monospace;
      }

      button {
        background-color: #56f5ed;
        color: #000;
        font-family: 'Sequel 100', sans-serif;
        padding: 10px 0;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        width: 100%;
        font-weight: bold;
      }

      button:hover {
        background-color: #000;
        color: #56f5ed;
        outline: 2px solid;
        border-radius: 5px;
      }

      #result {
        margin-top: 20px;
        color: #fff;
        font-family: 'Consolas', monospace;
        font-size: 16px;
        cursor: pointer;
        font-weight: 800;
      }