/* 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-image: url("bg.jpg");
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

p {
    color: white;
    line-height: 0.5;
    size: 12pt;
}
  
/* The parent container */
.flex-container {
  display: flex;
  flex-wrap: wrap; /* Allows items to wrap on small screens */
  gap: 20px;       /* Adds space between columns */
}

/* The columns */
.column {
  flex: 1;         /* Both columns take up equal space */
  min-width: 300px; /* Minimum width before they stack */
  opacity: 0; /* Ensures the element starts hidden */
    animation: fadeIn 2s forwards;
}

/* Responsive adjustment for Mobile */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;    /* Columns will take up full width on small screens */
  }
}
 .header1 {
  font-family: "Great Vibes", cursive;
  font-size: 40pt;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  color: white;
 }