@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Major+Mono+Display&family=Orbitron:wght@400;700&family=Share+Tech+Mono&display=swap');

    body {
      margin: 0;
      font-family: 'Audiowide', cursive, monospace;
      background-color: #0a0a0a;
      color: #00ffea;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      transition: background-color 0.4s, color 0.4s;
      line-height: 1.6; /* Ökad radavstånd för läsbarhet */
      font-size: 18px; /* Större bastext */
    }

    a {
      color: #00ffea;
      text-decoration: underline;
    }
    a:hover,
    a:focus-visible {
      color: #39ff14;
      outline: none;
      text-shadow: 0 0 6px #39ff14cc;
    }

    /* Tydlig fokusring endast vid keyboard-navigering */
    :focus-visible {
      outline: 3px solid #39ff14;
      outline-offset: 2px;
    }

    header {
      padding: 2rem;
      text-align: center;
      border-bottom: 3px solid #39ff14;
      box-shadow: 0 0 12px 4px #39ff14aa;
    }

    header h1 {
      margin: 0;
      font-size: 3rem;
      letter-spacing: 0.15em;
      text-shadow: 0 0 10px #39ff14cc;
      font-family: 'Audiowide', cursive, monospace;
    }

    header p {
      margin: 0.5rem 0 0;
      font-weight: 600;
      font-size: 1.3rem;
      color: #00fffaa0;
      text-shadow: 0 0 6px #39ff1477;
    }

    main {
      flex: 1;
      padding: 2rem 1.5rem;
      max-width: 700px;
      margin: auto;
    }

    section {
      margin-bottom: 2.5rem;
      border-bottom: 3px solid #39ff14;
      padding-bottom: 1rem;
    }

    section h2 {
      border-left: 6px solid #39ff14;
      padding-left: 1rem;
      font-weight: 700;
      font-size: 2rem;
      margin-bottom: 1rem;
      text-shadow: 0 0 10px #39ff14cc;
      color: #39ff14;
    }

    ul {
      list-style: inside disc;
      line-height: 1.75;
      color:  #a32fff; /* Mörkare lila för högre kontrast mot svart */
      text-shadow: 0 0 6px #39ff1477;
      font-size: 1.15rem;
    }

    ul li {
      margin-bottom: 0.7rem;
    }

    button, select {
      cursor: pointer;
      background: none;
      border: 2px solid #39ff14;
      color: #39ff14;
      padding: 0.7rem 1.3rem;
      font-family: 'Audiowide', cursive, monospace;
      font-weight: 700;
      border-radius: 6px;
      transition: background-color 0.3s, box-shadow 0.3s, border-color 0.3s;
      text-shadow: 0 0 6px #39ff14cc;
      margin-top: 0.6rem;
      font-size: 1.1rem;
    }
    button:hover, select:hover {
      background-color: #39ff1422;
      box-shadow: 0 0 18px 6px #39ff14cc;
      border-color: #39ff14;
      color: #0a0a0a;
      text-shadow: none;
    }
    button:focus-visible, select:focus-visible {
      outline: 3px solid #39ff14;
      outline-offset: 2px;
    }

    footer {
      text-align: center;
      padding: 1rem 0;
      font-size: 0.9rem;
      box-shadow: 
        0 0 14px #32FF00,
        0 0 48px #32FF00,
        0 0 36px #32FF00;
      border-top: 3px solid #39ff14;
      color: #32FF00;
      text-shadow:
        0 0 7px #32FF00,
        0 0 14px #32FF00,
        0 0 28px #39FF14;
      border: 3px solid #007FFF;
      border-radius: 14px;
      font-weight: 600;
    }

    /* Light mode styles */
    body.light {
      background-color: #f9f9f9;
      color: #004d40;
    }
    body.light a {
      color: #004d40;
    }
    body.light header,
    body.light footer {
      border-color: #004d40;
      color: #004d40cc;
      box-shadow: none;
      text-shadow: none;
    }
    body.light section h2 {
      border-color: #004d40;
      box-shadow: none;
      color: #004d40;
      text-shadow: none;
    }
    body.light ul {
      color: #004d40;
      text-shadow: none;
    }
    body.light button, body.light select {
      border-color: #004d40;
      color: #004d40;
      box-shadow: none;
      text-shadow: none;
    }
    body.light button:hover, body.light select:hover {
      background-color: #004d4022;
      box-shadow: none;
      border-color: #004d40;
      color: #004d40;
    }

    /* Skip link för snabb navigation */
    .skip-link {
      position: absolute;
      top: -40px;
      left: 0;
      background: #39ff14;
      color: #000;
      padding: 8px 16px;
      z-index: 100;
      text-decoration: none;
      font-weight: 700;
      font-family: 'Audiowide', cursive, monospace;
    }
    .skip-link:focus {
      top: 0;
      outline: 3px solid #000;
    }