/* -------------------------------------------------
   Global reset & typography
   ------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html { font-size: 16px; }
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.6;
    background: #f5f7fa;
    color: #222;
    padding: 1rem;
}

/* -------------------------------------------------
   Header & Footer
   ------------------------------------------------- */
header {
    text-align: center;
    margin-bottom: 2rem;
}
header h1 {
    font-size: 2.4rem;
    color: #0066cc;               /* universal blue */
}
.subtitle {
    font-style: italic;
    color: #555;
    margin-top: .4rem;
}
footer {
    text-align: center;
    margin-top: 3rem;
    font-size: .9rem;
    color: #777;
}
footer a { color: #0066cc; text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* -------------------------------------------------
   Main layout
   ------------------------------------------------- */
main {
    max-width: 900px;
    margin: 0 auto;
}

/* Display boxes */
#display {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    margin-bottom: 2rem;
}
.box {
    flex: 1 1 250px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,.05);
}
.box h2 {
    margin-bottom: .5rem;
    color: #0066cc;
}
.box p {
    font-size: 1.6rem;
    word-break: break-all;
}

/* Controls */
#controls {
    text-align: center;
}
#controls button {
    margin: .4rem;
    padding: .6rem 1rem;
    background: #0066cc;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
#controls button:disabled {
    background: #999;
    cursor: default;
}
#controls button:hover:not(:disabled) { background: #004999; }

#speedRange {
    width: 200px;
    vertical-align: middle;
    margin-left: .6rem;
}
#speedDisplay {
    margin-left: .4rem;
    font-weight: bold;
}

  /* -------------------------- Weird Footer ----------------------*/
   :root {
      --lightness: 50%;
      --code-background: #ddd;
  }
   footer {
          /* position: absolute; */
          left:0;
          bottom:0;
          background: #FFF;
          text-align: center;
          clear: both;
          display: block;
          padding:10px;
          border: 2px dashed red;
          z-index: 20;
      }
  footer a:hover {
      display: inline-block;
      animation: 0.2s infinite alternate linear wiggle;

      background: linear-gradient(in hsl longer hue 45deg, hsl(0deg, 75%, var(--lightness)) 10%, hsl(0deg, 75%, var(--lightness)) 90%);
      background-clip: text;
      color: transparent;
  }
      @keyframes wiggle {
          from {
              transform: skewX(-8deg);
          }
          to {
              transform: skewX(8deg);
          }
      }