:root {
    --lightness: 50%;
    --code-background: #ddd;
}
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width:100%;
  background-color: #ff0000;
  font-family:"Courier New",monospace;

  /* Modern browsers – linear gradient from top to bottom */
  background-image: linear-gradient(
      to right,               /* direction: left → right (change to "to bottom" if you prefer vertical) */
      #ff0000,                /* red   */
      #ffff00,                /* yellow */
      #0000ff                 /* blue   */
  );
}
h1 {
  text-align: center;
}
canvas {
  display: block;
}

/* Flexbox container that centers its child */
.center-wrapper {
  display: flex;                 /* Enable flex layout */
  justify-content: center;       /* Horizontal centering */
  align-items: center;           /* Vertical centering */
  height: 100%;                  /* Take full height of the viewport */
  background: #f5f5f5;           /* Optional background for contrast */
}

/* Your actual content box */
.content {
  width:92%;
  padding: 2rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  text-align: center;            /* Center text inside the box */
  margin:5px;
}

/* -------------------------- 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);
        }
    }