/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: black;
  color: white;
  font-family: "Copperplate Gothic";
}

body {
  text-align: center; /* Centers inline content within body */
}
.wrapper {
  width: 90%; /* Or your desired max-width */
  margin: 0 auto;
  text-align: left; /* To keep content left-aligned if needed */
}
body {
  background-image: url('smosh.png');
  background-size: 1; /* Makes the image cover the whole background */
  background-repeat: repeat; /* Prevents image tiling */
  background-position: center; /* Centers the image */
  /* Optional: fallback color if image fails to load */
  background-color: #f0f0f0;

body {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Horizontal, Vertical, Blur, Color */
}

/* Or target specific common text tags */
p, h1, h2, h3, span {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
a:link {
  color: green; /* Unvisited link color */
}

a:visited {
  color: green; /* Visited link color */
}

a:hover {
  color: white; /* Color when mouse hovers over the link */
}

a:active {
  color: grey; /* Color at the moment of click */
}
.marquee-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap; /* Prevents items from wrapping */
  background-color: ##000000; /* Example background */
}

.marquee-content {
  display: inline-block; /* Or flex for more complex layouts */
  padding-left: 100%; /* Start off-screen */
  animation: scroll 20s linear infinite;
}

/* Duplicate the content inside the .marquee-content to create the seamless loop */
.marquee-content span {
  padding: 0 1rem;
}

@keyframes scroll {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-100%); } /* Scrolls the first set out */
}

/* Pause on hover (optional) */
.marquee-container:hover .marquee-content {
  animation-play-state: paused;
}