/* 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: white;
  color: #ef476f;
  font-family: Monospace;
  font-size: 20px;
  background: linear-gradient(to bottom, #fff0d4, #ffffea); /* Example: orange to peach */
  background-attachment: fixed; /* Ensures the gradient covers the viewport even on scroll */
  animation: flowGradient 5s ease-in-out infinite;
  background-size: 200% 100%;
  text-align: center; /* Centers the text within the block */
}
    @keyframes gradient {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }
.big-title {
  background-color: white;
  color: #ef476f;
  font-family: Monospace;
  font-size: 30px;
         position: relative;
         width: 30%; /* Or any specific width like 600px, max-width: 800px, etc. */
  margin: 0 auto; /* Centers the block horizontally */
  text-align: center; /* Centers the text within the block */
  border-radius: 20px;
}
.outer-1 > img {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  left: 0px;
  top: 0px;
}
 .section-explanation {
  background-color: white;
  color: #118ab2;
  font-family: Monospace;
  font-size: 16px;
           position: relative;
        top: 10px;
        left: 5px;
}
 .section-green {
  background-color: white;
  color: #06d6a0;
  font-family: Monospace;
  font-size: 16px;
    width: 20%; /* Or any specific width like 600px, max-width: 800px, etc. */
  margin: 0 auto; /* Centers the block horizontally */
   text-align: center;
  
}

  .hover-enlarge {
      font-size: 16px; /* Initial font size */
      transition: font-size 0.1s ease-in-out; /* Smooth transition for font-size */
  }

  .hover-enlarge:hover {
      font-size: 17px; /* Larger font size on hover */
  }