* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: #ccc;
  font-family: 'Courier New', Courier, monospace;
}

/* Full-screen Matrix canvas */
#matrix {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  z-index: 1;
}

/* Content area */
.content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding-top: 14vh;
  padding-bottom: env(safe-area-inset-bottom);
  min-height: 100dvh;
}

h1 {
  font-size: clamp(3.6rem, 11.5vw, 7.8rem);     /* now scales perfectly on phones */
  letter-spacing: 0.38em;
  color: #eee;
  text-shadow: 
    0 0 15px #fff,
    0 0 30px #ddd,
    0 0 50px #999;
  margin-bottom: 2.2rem;
}

nav {
  font-family: 'VT323', monospace;   /* cyber-edged terminal font */
  font-size: clamp(1.45rem, 4.8vw, 1.85rem);
  letter-spacing: 3px;
  margin: 1.2rem 0;
}

nav a {
  color: #aaa;
  text-decoration: none;
  margin: 0 14px;
  transition: all 0.25s;
}

nav a:hover {
  color: #eee;
  text-shadow: 0 0 18px #fff;
}