:root {
    --lightness: 50%;
    --code-background: #ddd;
}
  canvas{display:block;margin:auto;background:#003566;}
  #ui{
    position:absolute;top:10px;left:50%;transform:translateX(-50%);
    color:#fff;pointer-events:none;
  }
  #msg{font-size:1.2rem;margin-top:0.5rem;}
  #start-screen{
    position:absolute;inset:0;background:rgba(0,0,0,0.85);
    color:#fff;display:flex;flex-direction:column;
    align-items:center;justify-content:center;z-index:10;
  }
  #start-screen h1{font-size:4rem;margin:0 0 2rem;letter-spacing:.1em;}
  #start-screen button{
    padding:.8rem 2rem;font-size:1.2rem;background:#204da7;
    border:none;border-radius:6px;color:#fff;cursor:pointer;
    transition:background .2s;
  }
  #start-screen button:hover{background:#87d3ff;}
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width:100%;
  background-color: cornflowerblue;
  font-family:"Courier New",monospace;
}
h1 {
  text-align: center;
}
canvas{
  display:block;
  margin:auto;
  background:#003566;
  width: 90%;
}

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