.html .body{
    background-color: #050505;
    margin-bottom: 0%;
  }
  
  /*  2 Hero */
  .hero {
    padding-top: 40px;
    background-size: cover;
    color: #fff;
    font-size: 20px;
    text-align: center;
    display: grid;
    grid-template-columns: 20px 2fr 20px;
    grid-template-rows: .5fr 0.25fr 0.25fr ;
   }

   .hero img {
    margin: auto;
    padding-top: 1rem;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    max-width: 200px;
  }
  
  .hero h1 {
    margin: 0;
    background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet, red);
    background-clip: text;
    color: transparent;
    padding: 0px 0px;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    font-size: 4rem;
  }

  .hero p {
    margin-top: 0;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
  
  .hero button {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    background-color: #ffffff;
    border: none;
    border-radius: 4px;
    color: #000000;
    font-size: 1rem;
    padding: 5px 10px;
    margin: .75rem auto 0;
    cursor: pointer;
    margin-bottom: 50px;
  }

  .hero button:hover {
    color: rgb(238, 23, 23);
  }


/* 3 Objects */

/* Onject One */

.object_one {
    color: #fff;
    text-align: center;
    display: grid;
    grid-template-columns: 10% 80% 10%;
    grid-template-rows: 25% .75%;
    grid-gap: 2px;
    align-self: center;
    margin-bottom: 1rem;
  }

  .object_one h1 {
    font-size: 2rem;
    margin: auto;
    padding-top: 1rem;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    text-decoration: underline;
  }
  
  .object_one p {
    font-size: 1rem;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }

  .object_one iframe {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    padding: 5px 10px;
    margin: .25rem auto 0;
  }

  /* Object Two */

  .object_two {
    margin-top: 20%;
    background-size: cover;
    color: #fff;
    font-size: 1rem;
    text-align: center;
    display: grid;
    grid-gap: 2px;
    align-self: center;
    grid-template-columns: 10% 80% 10%;
    grid-template-rows: 40% 20% 20%;
  }
  
  .object_two p {
    margin: auto;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
   }

   #object_two-bullet1 {
    margin: auto;
    margin-top: 1%;
    font-size: 0.85rem;
    padding-top: 1rem;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    margin-left: 10%;
    margin-right: 10%;
   }

   #object_two-bullet2 {
    margin: auto;
    margin-top: 0.5%;
    font-size: 0.85rem;
    padding-top: 2rem;
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    margin-left: 10%;
    margin-right: 10%;
   }
   
    /* Object Three */

    .object_three {
      color: #fff;
      text-align: center;
      display: grid;
      grid-template-columns: 10% 40% 40% 10%;
      grid-template-rows: 25% 25% 25% 25%;
      grid-gap: 2px;
      align-self: center;
      margin-bottom: 1rem;
    }
  
    .object_three h1 {
      font-size: 2rem;
      margin: auto;
      margin-top: 20%;
      grid-column: 2 / 4;
      grid-row: 1 / 2;
      text-decoration: underline;
    }

    #object3_img1 {
      margin-top: 15%;
      border: rgb(109, 15, 15);
      border-width: 0.8cap;
      border-style: inset;
      width: 40%;
      height: auto;
      grid-row: 2 / 3;
      grid-column: 2 / 3;
      align-self: center;
      justify-self: center;
    }

    #object3_img1 img {
      width: 100%;
      height: 100%;
      object-fit: contain; /* Ensures the image fits inside while maintaining its aspect ratio */
      box-sizing: border-box; /* Ensures the border is accounted for in the element's size */
      display: block; /* Removes extra space below the image */
    }

    #object3_img2 {
      margin-top: 10%;
      border: rgb(109, 15, 15);
      border-width: 0.8cap;
      border-style: inset;
      width: 40%;
      height: auto;
      size: 10.5rem;
      grid-row: 3 / 4;
      grid-column: 2 / 3;
      align-self: center;
      justify-self: center;
    }

    #object3_img2 img {
      width: 100%;
      height: 100%;
      object-fit: contain; /* Ensures the image fits inside while maintaining its aspect ratio */
      box-sizing: border-box; /* Ensures the border is accounted for in the element's size */
      display: block; /* Removes extra space below the image */
    }

    #object3_img3 {
      margin-top: 10%;
      border: rgb(109, 15, 15);
      border-width: 0.8cap;
      border-style: inset;
      width: 40%;
      height: auto;
      grid-row: 4 / 5;
      grid-column: 2 / 3;
      align-self: center;
      justify-self: center;
    }

    #object3_img3 img {
      width: 100%;
      height: 100%;
      object-fit: contain; /* Ensures the image fits inside while maintaining its aspect ratio */
      box-sizing: border-box; /* Ensures the border is accounted for in the element's size */
      display: block; /* Removes extra space below the image */
    }

    #springs_valley_title {
      font-size: 200%;
      justify-self: left;
      margin-top: 20%;
      grid-row: 2 / 3;
      grid-column: 3 / 4;
      width: 50px;
    }

    #new_lands_title {
      font-size: 200%;
      justify-self: left;
      margin-top: 20%;
      grid-row: 3 / 4;
      grid-column: 3 / 4;
      width: 50px;
    }

    #basketball_stats_title {
      font-size: 200%;
      justify-self: left;
      margin-top: 20%;
      grid-row: 4 / 5;
      grid-column: 3 / 4;
      width: 50px;
    }

   

/* Media Query for 1000px */
@media screen and (min-width: 1000px) {

    /* Hero Media Queries */
    .hero {
        row-gap: 0;
        column-gap: 0;
        background-size: cover;
        text-align: left;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: .5fr .1fr .2fr .5fr;
        align-items: center;
      }

      .hero h1 {
        font-size: 400%;
        grid-column: 3/5;
        grid-row: 2 /3;
        text-align:center;
      }
    
      .hero img {
        margin: 0 0 0 auto;
        grid-row: 2 / 4;
        grid-column: 2 / 3;
      }
    
      .hero article {
       margin-top: 0rem;
       max-width: 1000px;
       grid-column: 3 / 5;
       grid-row: 3/3;
       text-align: center;
      }

      .hero p {
        text-align: center;
        grid-column: 3 / 5;
        grid-row: 3 / 4;
        margin-top: 0;
      }

      .hero button {
        text-align: center;
        grid-column: 3 / 5;
        grid-row: 4 / 5;
        margin-top: 0;
      }


    /* Object Media Queries */
    
    /* Object One */
   
    .object_one {
      padding-top: 2rem;
      padding-bottom: 100px;
      min-height: 200px;
      display: grid;
      grid-template-columns: 1fr .5fr .5fr 1fr 1fr 1fr;
      grid-template-rows:  .75fr;
      align-items: center;
    }
    
    .object_one h1 {
      font-size: 3.5rem;
      grid-row: 1 / 2;
      grid-column: 3 / 4;
      width: 100%;
      white-space: wrap;
      text-decoration: underline;

      margin-top: 1.75rem;
      text-align:center;
      margin-right: 100px;
      align-self: center;   /* Vertically center the h1 */
    }

    .object_one p {
      font-size: 1.5rem;
      border-left: solid 1px #fff;
      padding-left: 1rem;
      text-align: left;
      grid-row: 1 / 2;
      grid-column: 4 / 6;
    }

    /* Objcet Two */

    .object_two {
      padding-bottom: 100px;
      min-height: 200px;
      display: grid;
      grid-template-columns: 1fr .5fr .5fr 1fr 1fr 1fr;
      grid-template-rows:  .75fr .25fr .25fr;
      align-items: center;
    }
    
    .object_two h1 {
      font-size: 2.5rem;
      grid-row: 1 / 2;
      grid-column: 3 / 4;
      width: 100%;
      white-space: wrap;
      text-decoration: underline;

      margin-top: 1.75rem;
      text-align:center;
      margin-right: 100px;
      align-self: center;   /* Vertically center the h1 */
    }

    .object_two p {
      font-size: 1.5rem;
      padding-left: 1rem;
      text-align: left;
      grid-row: 1 / 2;
      grid-column: 3 / 6;
    }

    #object_two-bullet1 {
      font-size: 1.25rem;
      padding-left: 1.5rem;
      grid-row: 2 / 3;
      grid-column: 3 / 6;
    }

    #object_two-bullet2 {
      font-size: 1.25rem;
      padding-left: 1.5rem;
      grid-row: 3 / 4;
      grid-column: 3 / 6;
    }

    /* Object Three */

    .object_three {
      padding-bottom: 100px;
      min-height: 200px;
      display: grid;
      grid-template-columns: 1fr .5fr .5fr .5fr .5fr 1fr;
      grid-template-rows:  .75fr .25fr;
      align-items: center;
    }
    
    .object_three h1 {
      font-size: 3.5rem;
      grid-row: 1 / 2;
      grid-column: 2/ 4;
      width: 100%;
      white-space: wrap;
      text-decoration: underline;

      margin-top: 1.75rem;
      text-align:center;
      margin-right: 100px;
      align-self: center;   /* Vertically center the h1 */
    }

    #object3_img1 {
      border: #e70606;
      border-width: 1cap;
      border-style: inset;
      width: 5rem;
      height: auto;
      size: 10.5rem;
      grid-row: 2 / 3;
      grid-column: 2 / 3;
      align-self: center;
      justify-self: center;
    }

    #object3_img2 {
      border: #e70606;
      border-width: 1cap;
      border-style: inset;
      width: 5rem;
      height: auto;
      size: 10.5rem;
      grid-row: 3 / 4;
      grid-column: 2 / 3;
      align-self: center;
      justify-self: center;
    }

    #object3_img3 {
      border: #e70606;
      border-width: 1cap;
      border-style: inset;
      width: 5rem;
      height: auto;
      size: 10.5rem;
      grid-row: 4 / 5;
      grid-column: 2 / 3;
      align-self: center;
      justify-self: center;
    }

    #springs_valley_title {
      font-size: 200%;
      justify-self: left;
      margin-top: 20%;
      grid-row: 2 / 3;
      grid-column: 3 / 5;
    }

    #new_lands_title {
      font-size: 200%;
      justify-self: left;
      margin-top: 20%;
      grid-row: 3 / 4;
      grid-column: 3 / 4;
      width: 50px;
    }

    #basketball_stats_title {
      font-size: 200%;
      justify-self: left;
      margin-top: 20%;
      grid-row: 4 / 5;
      grid-column: 3 / 4;
      width: 50px;
    }
  
  }