/*MEDIA QUERIES*/

/*Consider an ultra-wide option
@media (max-width: 1920px) {

}*/

@media (max-width: 1280px) {
  #main-content{
    padding-bottom: 50px;
  }
  h2{
    font-size:4rem;
  }
  .iconPlaceholder{
  height: 120px;
}

.icon{
  height:120px;
  width:120px;
}

}

@media (max-width: 1024px) {
  #main-content{
    grid-template-columns: 1fr;
    padding-bottom: 50px;
  }
  .bottomRight{
  row-gap:50px;
  }

.iconPlaceholder{
  height: 100px;
}

.icon{
  height:100px;
  width:100px;
}
}

@media (max-width: 820px) {
  #main-content{
    grid-template-columns: 1fr;
    padding-bottom: 50px;
  }
  .bottomRight{
  row-gap:50px;
  }
  .halloween-hat {
  left: 80px;
}
}

@media (max-width: 600px) {
  #main-content{
    grid-template-columns: 1fr;
    padding-bottom: 100px;
    padding:20px;
  }
  h2{
    font-size: 3rem;
    padding-top:4vh;
  }
  p{
    font-size: 1rem;
  }
  .subheading{
    padding-top:10px;
    font-size: 1.8rem;
  }

  .bottomRight{
  gap:8px;
  row-gap:50px;
  }
  .iconPlaceholder{
  height: 100px;
}

.icon{
  height:100px;
  width:100px;
}
.halloweenImg {
  width:100px;
}
.halloween-hat {
  left: 80px;
}
.healthBar{
  display: flex;
  justify-content: center;
  gap:5px;

}
  .heart{
    height:40px;
    image-rendering: pixelated;
  }
#galleryImg {
  width: 45vw;   /* or whatever size you want */
  height: auto;   /* keeps correct proportions */
}
.imageGallery{gap:5px;
}
.leftColumn{gap:5px;padding:0px;}
.rightColumn{gap:5px;padding: 0;}
#img1{border-radius:5px;
}
.title-h3{
  padding:12px;
  margin: 0;
}
.imageGallery{

  grid-template-columns: 1fr;
}

}

@media (max-width: 480px) {
  #main-content{
    grid-template-columns: 1fr;
    padding:20px;
  }
  .bottomRight{
    grid-template-columns: 1fr 1fr;;
    gap:8px;
  }
  .topLeft{
    gap:12px;
    padding:8px;
    
  }
  .iconPlaceholder{
  height: 100px;
}
.halloweenImg {
  width:80px;
}
h2{
    font-size: 3rem;
    padding-top:1vh;
  }
  p{
    font-size: 1rem;
  }
  .subheading{
    padding-top:10px;
    font-size: 1.5rem;
  }
.arrowIcon{
  height:30px;
}

.icon{
  height:100px;
  width:100px;
}
.healthBar{
  display: flex;
  justify-content: center;
  gap:5px;

}
  .heart{
    height:40px;
    image-rendering: pixelated;
  }

}




    /* Small responsive niceties */
    @media (min-width: 700px) {
      main { margin: 1.5rem 3rem; padding: 1.25rem; }
      .content { margin: 1.5rem 3rem; padding: 1.25rem; }
      header h1 { font-size: 1.25rem; }
    }