/* 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: black;
  font-family: Verdana;
  
}
h1 {
  color: #660000;
}
main {
  background-color: white;
  padding: 10px;
  width: 800px;
  min-height: 800px;
  margin: auto;
}

.header {
  font-weight: bold;
  border: 1px solid #000;
}

.marquee-container {
  width: 25%;
  height: 500px;
  overflow: hidden; /* Hides content outside the container */
  white-space: nowrap; /* Prevents text from wrapping */
  box-sizing: border-box;
  border: 1px solid #ccc;
  padding: 10px;
}

.marquee-content {
  display: inline-block; /* Allows content to be a single scrolling line */
  animation: marquee-scroll 10s linear infinite; /* Defines the animation */
}

/* Define the keyframes for the scrolling animation */
@keyframes marquee-scroll {
  0% { transform: translateY(500px); } /* Starts off-screen to the right */
  100% { transform: translateY(-500px); } /* Ends off-screen to the left */
}

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