body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: antiquewhite;
}

/* Overlay to cover everything */
#enter-screen {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: wheat;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  transition: opacity 0.8s ease;
}

/* Enter button styling */
#enter-btn {
  padding: 1em 2em;
  font-size: 1.5rem;
  color: rgb(0, 0, 0);
  background: transparent;
  border: 2px solid rgb(0, 0, 0);
  cursor: pointer;
}
#enter-btn:hover {
  background: rgb(255, 255, 255);
  color: black;
}

/* Hide default audio */
audio {
  display: none;
}

/* Initially hide your page content */
#page-content {
  opacity: 0;
  transition: opacity 2s ease;
}

body {
        padding: 0px;
        margin: 0px;
        background-color: antiquewhite;
}

h1, p {
        padding: 0px;
        margin: 0px;
        text-align: center;
}

header {
        background-color: rgb(237, 223, 198);
        border-bottom: solid black 2px;
        display: flex;
        flex-direction: column;
        gap: 0px;
        align-items: center;
}

h2 {
        text-align: center;
        font-size: 57px;
        margin-bottom: 0px;
        padding: 0px;
}

main {
        display: flex;
        gap: 0px;
        flex-direction: column;
        margin-top: 40px;
        margin-bottom: 40px;
        margin-left: 24%;
        margin-right: 24%;
        padding: 57px;
        align-items: center;
        background-color: rgb(247, 240, 232);
        box-shadow: 
                14px 0 24px -6px rgba(0, 0, 0, 0.25),   /* Right */
                0 14px 24px -6px rgba(0, 0, 0, 0.25);   /* Bottom */
}

.footnote {
        width: 60%;
        margin-bottom: 5px;
}

.imgdiv {
  width: 60%;     /* Set your desired size */
  height: 700px;
  overflow: hidden; /* Crop if image overflows */
  position: relative;
  margin-bottom: 20px;
  margin-top: 70px;
}

.imgdiv img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Or 'contain' depending on effect */
  display: block;
}

.firstimg {
        padding-top: 0px;
        margin-top: 0px;
}

hr {
        width: 80%;
}

footer {
        background-color: rgb(198, 183, 156);
        border-bottom: solid black 2px;
        display: flex;
        flex-direction: column;
        gap: 0px;
        align-items: center;
        padding: 24px;
}

@media (max-width: 1400px) {

        main {
                margin-left: 5%;
                margin-right: 5%;
        }

}

@media (max-width: 1100px) {

        main {
                padding: 0px;
        }

        .imgdiv {
                width: 80%;
                max-height: 600px;
        }

        .footnote {
                width: 80%;
        }

}

@media (max-width: 500px) {

        h2 {
                text-align: center;
                font-size: 40px;
        }

}