:root { 
  --bgcolor: #EFC7C2;
  --bttncolor: #694F5D;
}

html, body {
  height: 100%;
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center; /* Centers content horizontally */
  align-items: flex-start; /* Align content to the top */
  background-color: var(--bgcolor);
  width: 100%;
}

.buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2vh 4vw;
  width: 100%;
  max-width: 100%;
  height: 0;
}

.buttons a,
.button,
.back-button,
.menu-button {
  position: absolute;
  top: 15%;
  background-color: var(--bttncolor);
  color: var(--bgcolor);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 2.5rem;
  font-weight: bold;
  font-family: Fascinate;
  border-radius: 12px;
  transition-duration: 0.4s;
  z-index: 100;
}

.back-button {
  left: calc(20px + 2vw);
}

.menu-button,
.button2 {
  right: calc(20px + 2vw);
}

.buttons a:hover,
.button:hover,
.back-button:hover {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 
              0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

h1 {
  font-size: clamp(40px, 8vw, 80px); /* Adjusted clamp range for better responsiveness */
  -webkit-text-stroke: 1.5px #000;
  text-stroke: 1.5px #000;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  color: transparent;
  transition: opacity 0.4s;
  font-family: Fascinate;
  text-align: center;
  margin-top: 10vh; /* Top margin for balance */
  z-index: 5;
}

.main-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: 50px;
  padding-bottom: 50px;
  margin-top: 15vh;
  overflow: auto;
  max-width: 100%; /* Ensures content fills width on small screens */
}

.center {
  display: grid;
  justify-items: center; /* Ensures the iframe is centered horizontally */
  width: 100%;
  padding-top: 20px;
  box-sizing: border-box;
}

iframe {
  width: 80vw; /* PDF iframes should take up more horizontal space */
  height: calc(80vw * 1.25); /* Adjust height for a PDF aspect ratio */
  border: none;
  display: block;
  margin: 0 auto; /* Centers the iframe horizontally */
}

.padding {
  margin: 2vh;
}

.top-header {
  position: relative; /* Important for child positioning */
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--bgcolor);
  z-index: 10;
  text-align: center;
  padding-top: 2vh;
  padding-bottom: 2vh;
  box-sizing: border-box;
}

@media (max-width: 650px) {
@media (max-width: 650px) {
  h1 {
    font-size: 50px;
  }

  .buttons a,
  .button,
  .back-button,
  .menu-button {
    font-size: 2rem;
    padding: 12px 24px;
    top: 2vh; /* Adjusted from 5% for better spacing */
  }

  .back-button {
    left: 4vw;
  }

  .menu-button,
  .button2 {
    right: 4vw;
  }
}
  iframe {
    width: 90vw; /* Adjust iframe width on mobile */
    height: calc(90vw * 1.25); /* Adjust height for PDF aspect ratio on mobile */
  }