@font-face {
  font-family: "iA Writer Mono";
  src: url("fonts/iAWriterMonoS-Regular.eot"); /* IE9 Compat Modes */
  src: url("fonts/iAWriterMonoS-Regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
       url("fonts/iAWriterMonoS-Regular.woff2") format("woff2"), /* Modern Browsers */
       url("fonts/iAWriterMonoS-Regular.woff") format("woff"); /* Pretty Modern Browsers */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
      font-family: "iA Writer Mono", monospace;
      background-color: #f8f6f3;
      color: #000;
      margin: 0;
      padding: 2rem 1rem;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      text-transform: uppercase;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      letter-spacing: -.01em;
      word-spacing: -0.4ch;
      font-size: 1rem;
      line-height: 1.6;
    }
    
    .container {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 1rem 1.5rem;
      font-size: 1rem;
      line-height: 1.3;
      width: 100%;
      max-width: 600px;
      padding-bottom: 4rem;
    }
    .error-message {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      font-size: 1.25rem;
      font-weight: 400;
    }
    
    .label {
      font-weight: 400;
      text-align: right;
      white-space: nowrap;
    }
    
    .content {
      font-weight: 400;
      min-width: 0;
    }
    
    a {
      color: inherit;
      display: block;
      word-break: break-word;

      text-underline-offset: .2em;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
    text-decoration-skip-ink: auto;
    color: currentColor;
    transition: all 0.1s ease;
    position: relative;
    }
    
    a:hover {
      //text-decoration: underline;
    }
    
    /* Tablet styles */
    @media (min-width: 768px) {
      body {
        padding: 3rem 2rem;
      }
      
      .container {
        gap: 1.25rem 2rem;
        font-size: 1.125rem;
      }
    
    }

    /* Desktop styles */
    @media (min-width: 1024px) {
      body {
        padding: 4rem 2rem 2rem;
        height: 100vh;
      }
      
      .container {
        gap: 1.5rem 2rem;
        font-size: 1.25rem;
      }
      
    }

    /* Mobile landscape */
    @media (max-width: 767px) and (orientation: landscape) {
      body {
        padding: 1rem;
      }
      
      .container {
        gap: 0.75rem 1.25rem;
        font-size: 0.9rem;
      }
    }

    

    /* color themes */

    .theme-1 {
  color: rgb(209, 247, 67); /* lime green */
  background: rgb(49, 64, 227); /* blue */
  --bg-color: rgb(49, 64, 227);
}

.theme-2 {
  color: rgb(254, 220, 210); /* light peach */
  background: rgb(13, 83, 44); /* dark green */
  --bg-color: rgb(13, 83, 44);
}

.theme-3 {
  color: rgb(62, 83, 73); /* dark green */
  background: rgb(222, 181, 208); /* pink */
  --bg-color: rgb(222, 181, 208);
}

.theme-4 {
  color: rgb(156, 15, 18); /* dark red */
  background: rgb(252, 242, 184); /* yellow */
  --bg-color: rgb(252, 242, 184);
}

.theme-5 {
  color: rgb(97, 156, 47); /* green */
  background: rgb(15, 35, 74); /* navy */
  --bg-color: rgb(15, 35, 74);
}

.theme-6 {
  color: rgb(245, 157, 179); /* light pink */
  background: rgb(91, 30, 164); /* violet */
  --bg-color: rgb(91, 30, 164);
}

.theme-7 {
  color: rgb(133, 33, 2); /* dark red */
  background: rgb(235, 179, 42); /* orange */
  --bg-color: rgb(235, 179, 42);
}