body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-color: black;
  overflow: hidden;
}

canvas {
  position: absolute;
  width: 100%;
  height: 100%;
}

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#centered-text {
  color: darkgreen;
  font-size: 1vw;
  font-weight: lighter;
  text-align: center;
  font: monospace;
  outline-color: red;
}

#centered-text:hover {
  color: red;
  font-size: 1.1vw;
  font-weight: lighter;
  text-align: center;
  font: monospace;
  outline-color: red;
}

a:link {
  color: darkgreen;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: darkgreen;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: overline underline green 2px;
  font-size: 2vw;
  
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}

/* Text Shadow */
#centered-text pre {
  text-shadow: 2 2 4px ghostwhite;
}


/* Test - Magnification Lens */

body {
    height: 100vh;
    margin: 0;
    background: white;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: none;
}

#lens {
    position: fixed;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1), 0 0 100px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
    transform: translate(-50%, -50%);
}