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

/* base */
html, body {
  height: 100%;
  background: #050505;
  color: #e6e6e6;
  font-family: "Courier New", monospace;
}

/* noise overlay */
.noise {
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 10;
}

main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 60px 24px;
  max-width: 960px;
  margin: 0 auto;
}

/* hero */
.hero {
  text-align: center;
}

h1 {
  font-size: 42px;
  letter-spacing: 4px;
  margin-top: 24px;
}

p {
  margin-top: 16px;
  opacity: 0.7;
}

/* ascii */
.ascii {
  color: #9eff00;
  text-shadow: 0 0 12px rgba(158, 255, 0, 0.6);
  font-size: 16px;
}

.ascii.small {
  font-size: 14px;
}

.ascii.tiny {
  font-size: 12px;
  opacity: 0.6;
}

/* blocks */
.block {
  margin: 80px 0;
  text-align: center;
}

/* button */
.cta {
  text-align: center;
  margin-bottom: 40px;
}

.button {
  display: inline-block;
  padding: 14px 28px;
  border: 1px solid #9eff00;
  color: #9eff00;
  text-decoration: none;
  letter-spacing: 2px;
  transition: all 0.2s ease;
}

.button:hover {
  background: #9eff00;
  color: #050505;
  box-shadow: 0 0 20px rgba(158, 255, 0, 0.8);
}

/* footer */
footer {
  text-align: center;
  opacity: 0.4;
  font-size: 12px;
}