body {
 
  background-color: rgb(230, 232, 240);
  background-image: url(assets/twinkle\ twinkle.gif);
  background-repeat: repeat; 
}

p {
  font-family: Optima, sans-serif;
  font-size: 20px;
  font-style: normal;
  color: rgba(75, 94, 236, 0.976);
  a {
    font-style: italic;
  }
  text-align: center;
}
header {
  text-align: center;
}
h1 {
  font-family: Recife, serif;
  color:rgb(113, 128, 243);
  font-style: italic;
  font-size: 380px;
  font-weight: 600;
  text-align: center;
  text-rendering: geometricPrecision;
  text-decoration: rgb(114, 12, 33);
}
.scrolling-container {
  /* Defines the visible window for the scrolling text */
  width: 100%;
  overflow: hidden;
  white-space: nowrap; /* Prevents text from wrapping */
  box-sizing: border-box;
  padding: 10px 0; /* Add some vertical padding */
  background-color: rgba(101, 84, 232, 0); /* Example background */
}
.scrolling-track {
  /* Contains the duplicated content */
  display: inline-block;
  /* Applies the animation */
  animation: scroll 40s linear infinite; /* Adjust duration to control speed */
}

.text-content {
  /* Styles for the individual text blocks */
  display: inline-block;
  padding: 15px; /* Spacing between the original and duplicated content */
  font-family: Optima, sans-serif;
  font-size: 3em; /* Example font size */
  font-style: fantasy, cursive;
  color: rgba(222, 222, 222, 0.976); /* Example text color */
}
/* Defines the animation sequence */
@keyframes scroll {
  /* Start position: 0% horizontal translation */
  from {
    transform: translateX(0);
  }
  /* End position: moves the entire track off-screen to the left */
  to {
    transform: translateX(-100%);
  }
}
.orb {
  position: fixed;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.8;
  background: radial-gradient(circle, #ff00ff, #00ffff);
  box-shadow:
    0 0 10px #5470ef,
    0 0 20px #00ffff,
    0 0 30px #ff00ff66;

  /* REMOVE THESE */
  /* transform: translate(-50%, -50%); */
  /* margin: -30px 0 0 -30px; */

  will-change: transform, opacity;
  z-index: -999;
}

body::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("image.jpg"); /* replace with your image */
  background-size: cover;
  background-position: center;
  background-repeat: repeat;
  filter: blur(10px); /* adjust blur */
  opacity: 1; /* adjust transparency */
  z-index: -1;
  pointer-events: none;
}
.button {
  background-color: rgba(150, 75, 236, 0.976);
  font-weight: 300;
}

.center {
  width: 100%;
  display: flex;
  justify-content: center;
}