/* 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: Verdana;
}


  .container {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;     /* Centers vertically (optional, requires a container height) */
  }
  .text-container {
  /* Box dimensions and spacing */
  max-width: 600px;         /* Prevents the container from becoming too wide */
  margin: 10px auto;        /* Centers the container horizontally on the screen */
  padding: 15px;            /* Adds inner breathing room between the text and border */
  
  /* Visual appearance */
  background-color: #f9f9f9; /* Gives the container a light grey background */
  border: 1px solid #e0e0e0; /* Adds a thin, clean border around the box */
  border-radius: 8px;       /* Softens the sharp corners */
  
  /* Typography rules inside the box */
  text-align: center;
  font-family: Verdana, sans-serif;
  line-height: 1.6;
  color: #000000;
}
/* Image container*/
.slider-container {
  width: 400px;
  height: 500px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

.slider-track {
  display: flex;
  flex-direction: column;
  animation: slideVertical 10s infinite;
}

.slider-track img {
  width: 400px;
  height: 500px;
  object-fit: cover;
}

@keyframes slideVertical {
  0% { transform: translateY(0); }
  30% { transform: translateY(-500px); }
  60% { transform: translateY(-1000px); }
  100% { transform: translateY(0); }
}