/* --------------------------------------------------------------
   Minimal utility‑class CSS – ~30 lines
   -------------------------------------------------------------- */

/* Global defaults */
html { scroll-behavior: smooth; }
body {
  margin: auto 0;
  width: 100%;
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  color: #111827;               /* dark gray text */
  background-image: url(dino.webp);
}

main {
    max-width: 800px;
    margin: 2rem auto;
    padding: 1rem;
    background: #fff;
    border-radius:0.375rem;
    box-shadow:0 1px 2px rgba(0,0,0,.05);
}

/* -------------------------- Weird Footer ----------------------*/
footer {
        /* position: absolute; */
        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);
        }
    }