body {
  background-image: url('background.webp');
  background-repeat: no-repeat;
  background-size: cover;
  color: black;
  font-family: arial narrow;
  text-align: center;
}
  .mainpage {
  background-color: #d0d0d0;
  opacity: 0.5;
  border: 3px solid black;
  margin: auto;
  height: auto;
  width: 1577px;
  overflow-y: auto
    }

    .spin-container {
      perspective: 1000px; /* Adds 3D perspective */
    }

    .spin-text {
      font-family: impact;
      font-size: 3rem;
      display: inline-block;
      animation: spin 5s infinite linear;
      transform-style: preserve-3d; /* Keep the 3D effect on child elements */
      margin-bottom: 3px; /* Adds space at the bottom of the spinning text */
    }
    .spin-text {
      font-family: impact;
      font-size: 3rem;
      display: inline-block;
      animation: spin 6s infinite linear, jittery-glitch 0.1s infinite linear;
      transform-style: preserve-3d;
      margin-bottom: 3px; /* Margin at the bottom */
      color: white; /* Text color */
      text-shadow: 
        1px 1px 2px rgba(0, 0, 0, 0.8), 
        -1px -1px 2px rgba(0, 0, 0, 0.8); /* Subtle shadow to enhance the glitch */
    }
    @keyframes spin {
      0% {
        transform: rotateY(0deg);
      }
      50% {
        transform: rotateY(180deg);
      }
      100% {
        transform: rotateY(360deg);
      }
    }