@font-face {
  font-family: Aniron;
  src: url(Aniron-7BaP.ttf);
}

html,
body {
  margin: 0;
  padding: 0;
  overflow-y: auto; /* Changed to auto to allow native scrolling */
  /* height: 100vh; REMOVED */
}

.bg-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh; /* Changed to min-height so it expands if content is taller */
  background-image: url("Shire_Background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: -1;
  filter: blur(0px);
  transform: scale(1.01);
}

.main-container {
  min-height: 100vh; /* Allows it to fill the screen initially, but grow if content exceeds it */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: flex-start;
  height: auto; /* Let content dictate height */
  padding-top: 15vh;
}

h1 {
  font-family: Aniron;
}

h2 {
  font-family: Aniron;
}

#Welcome {
  margin: 0;
  flex: 0 0 100%;
  font-size: 3rem;
  text-align: center;
  text-shadow: 4px 4px 2px rgb(51, 45, 90);
  color: aliceblue;
}

#Services {
  flex: 0 0 100%;
  font-size: 2rem;
  text-align: center;
  text-shadow: 3px 3px 3px rgb(13, 10, 33);
  color: aliceblue;
}

.button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;

  margin-top: 4vh;
}

.service-button {
  flex: 0 0 40%;
  margin: 15px;
  font-size: 1.75rem;
  font-family: Aniron;
  backdrop-filter: blur(4px);
  border-color: aliceblue;
  border-radius: 8px;
  background: #ffffff11;
  color: rgb(226, 255, 221);
  text-shadow: 4px 4px 4px rgb(16, 15, 23);
  transition: 0.2s ease-in;
}

.service-button:hover {
  background: #ffffff2c;
  transform: scale(1.05);
  backdrop-filter: blur(6px);
  transition: 0.2s ease-out;
}

.service-button:active {
  color: rgb(241, 255, 238);
  background: #4545452c;
  transform: scale(1.025);
  backdrop-filter: blur(6px);
  transition: 0.2s ease-out;
}

/* Mobile Responsiveness */

@media (max-width: 768px) {
  html,
  body {
    overflow-y: auto;
    height: auto;
  }

  .main-container {
    padding-top: 10vh;
  }

  #Welcome {
    font-size: 2.5rem;
  }

  #Services {
    font-size: 1.75rem;
  }

  .button-container {
    margin-top: 3vh;
    margin-bottom: 2vh;
  }

  .service-button {
    flex: 0 0 80%;
    font-size: 1.25rem;
    padding: 15px;
  }
}