body {

  margin: 0;

  background: #050505;

  color: #00ff00;

  font-family: "Courier New", monospace;

}

header {

  padding: 20px;

  border-bottom: 1px solid #00ff00;

}

.logo {

  letter-spacing: 2px;

}

.game {

  display: flex;

  flex-direction: column;

  align-items: center;

  margin-top: 20px;

}

.ui {

  width: 720px;

  display: flex;

  justify-content: space-between;

  margin-bottom: 10px;

}

canvas {

  border: 1px solid #00ff00;

  background: #000;

  box-shadow: 0 0 12px #00ff00;

}

body::after {

  content: "";

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 999;

  background:
    repeating-linear-gradient(

      to bottom,

      rgba(0,255,0,0.04),
      rgba(0,255,0,0.04) 1px,

      transparent 1px,
      transparent 3px

    );

}

.logo,
.logo:visited,
.logo:hover,
.logo:active {

  color: #00ff00;

  text-decoration: none;

}

.logo:hover {

  text-shadow: 0 0 10px #00ff00;

}

* {

  cursor: none !important;

}

.custom-cursor {

  position: fixed;

  width: 16px;

  height: 16px;

  pointer-events: none;

  z-index: 9999;

  transform: translate(-50%, -50%);

  filter:
    drop-shadow(0 0 2px #000)
    drop-shadow(0 0 4px #00ff00);

}