body {
  margin: 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.87);
  background-color: #000000;
}

#app {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

#app::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(
      circle,
      transparent 0%,
      transparent 50%,
      rgba(0, 20, 15, 0.7) 85%,
      rgba(0, 15, 10, 1) 100%
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(255, 255, 255, 0.02) 2px,
      rgba(255, 255, 255, 0.02) 4px
    );
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 768px) {
  #app::before {
    background:
      radial-gradient(
        circle,
        transparent 0%,
        transparent 50%,
        rgba(0, 20, 15, 0.3) 85%,
        rgba(0, 15, 10, 0.6) 100%
      ),
      repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(255, 255, 255, 0.01) 2px,
        rgba(255, 255, 255, 0.01) 4px
      );
  }
}

@media (max-width: 480px) {
  #app::before {
    background:
      radial-gradient(
        circle,
        transparent 0%,
        transparent 50%,
        rgba(0, 20, 15, 0.2) 85%,
        rgba(0, 15, 10, 0.4) 100%
      ),
      repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(255, 255, 255, 0.005) 2px,
        rgba(255, 255, 255, 0.005) 4px
      );
  }
}