h4{
    font-size: 12px;
}
* {
  margin: 0;
  padding: 0;
}

    body {
      font-family: Arial, Helvetica, sans-serif;
      color: chartreuse;
    }

    /* Style the header */
    header {
        
        position: fixed;
      background-image: url('HorseBanner.jpg');
      padding: 30px;
      width: 100%;
      height: 196px;
      text-align: center;
      font-size: 35px;
      color: white;
      display: flex; /* Add this to position button and image */
      align-items: center; 
      justify-content: center; 
      gap: 20px; /* Add this for spacing */
    }
#content {
  margin-top: 100px;
}

    /* Rest of your CSS remains the same */
    nav {
      position: fixed;
        margin-top: 256px;
      float: left;
      width: 24%;
      background-image: url('Cavern2.jpg');
      height: 100%;
      padding: 20px;
      text-align: center;
    }

    nav ul {
      list-style-type: none;
      padding: 0;
    }

    article {
      float: right;
      padding: 30px;
      width: 70.2%;
      height: 80vh;
      padding-top: 285px;
      background-image: url('https://greenbrickz.neocities.org/image_2025-10-29_200445268.png');
      text-align: center;
    }

    section::after {
      content: "";
      display: table;
      clear: both;
    }

    @media (max-width: 600px) {
      nav, article {
        width: 100%;
        height: auto;
      }
    }

    .container {
      position: relative;
      text-align: center;
      color: black;
    }
    
    .centered {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-65%, -210%);
    }
    
    .Another {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -205%);
    }
 
    .Webs {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -200%);
    }

    .Horse {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -195%);
    }

    .spinning-image {
  /* Set animation properties */
  animation: spin 2s linear infinite;
}

/* Define the animation */
@keyframes spin {
  0% {
    transform: rotate(0deg); /* Start at 0 degrees */
  }
  100% {
    transform: rotate(360deg); /* End at 360 degrees (a full circle) */
  }
}
   .spintext {
  /* Set animation properties */
  animation: spin 5s linear infinite;
  color: chartreuse;
}

.corneredimage {
    position: fixed; /* Positions the image relative to the container */
  bottom: 0; /* Aligns to the bottom edge */
  right: 0; /* Aligns to the right edge */
  /* Add optional margin for spacing from the edge */
  margin: 0px; 
}