html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.screensaver {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #000;
}

#matrix-rain {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
}

.vignette,
.scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.vignette {
  box-shadow:
    inset 0 0 12vw rgba(0, 0, 0, 0.5),
    inset 0 0 32vw rgba(0, 0, 0, 0.28);
}

.scanlines {
  opacity: 0.13;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.025) 0,
    rgba(255, 255, 255, 0.025) 1px,
    transparent 1px,
    transparent 4px
  );
  mix-blend-mode: screen;
}