/* -------------------------------------------------
   Global page styling
------------------------------------------------- */
body {
    height: 100%;
    width:50%;
    margin: auto 0;
    overflow: hidden;
    background: #111;               /* Very dark room */
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    font-size:larger;
    text-align: center;
}

/* -------------------------------------------------
   Hidden content – initially invisible
------------------------------------------------- */
.secret {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    max-width: 80%;
    pointer-events: none;           /* Prevents accidental selection */
}

/* -------------------------------------------------
   Darkness overlay – we’ll punch a hole in it
------------------------------------------------- */
#darkness {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.98); /* Almost total darkness */
    pointer-events: none;
}

/* -------------------------------------------------
   Candle‑light element
------------------------------------------------- */
#light {
    position: fixed;
    width: 200px;          /* Diameter of the illuminated circle */
    height: 200px;
    border-radius: 50%;
    box-shadow: 0 0 150px 80px rgba(255, 226, 148, 0.5);
    pointer-events: none;
    mix-blend-mode: screen;   /* Makes the light “add” to the background */
}


  /* -------------------------- Weird Footer ----------------------*/
   :root {
      --lightness: 50%;
      --code-background: #ddd;
  }
   footer {
          position: absolute;
          left:20%;
          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);
          }
      }