body {
  margin:0;
  overflow:hidden;
}

.bgImg{
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 1;
  /* Add z-index if needed to ensure it's behind nav */
  z-index: -10;
}

ul {
  display: flex;
  justify-content: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
  /* overflow: hidden; */ /* Make sure this is commented out or removed */
  background-color: #423117;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

li {
  /* Needed for absolute positioning of dropdown */
  position: relative;
}


li a {
  display: block;
  color: white;
  text-align: center;
  line-height: 8.8vh;
  /* 0.912vw */
  /*padding: 1.887vh 4.559vw;*/
  padding: 0 4.559vw;
  text-decoration: none;
  font-family: "Thorsa", Garamond, "serif";
  /* Also 1.954vw 4.0428vh (1920/928) 30px*/
  font-size: 1.954vw;
  height: 8.45vh;
}

/* Style for non-active links on hover */
li a:hover:not(.active) {
  background-color: #573F1C;
}

/* Style for the active link */
li .active {
  background-color: #C3A766;
}

.dropdown-content .active {
  background-color: #C3A766;
}

/* Style the dropdown container (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #423117;
  width: 80%; /* Adjust width as needed */
  z-index: 1; /* Ensure dropdown is above other elements */
  left: 50%; /* Center align dropdown */
  transform: translateX(-50%); /* Fine-tune centering */
}

/* Style the links inside the dropdown */
.dropdown-content a {
  color: white;
  padding: 0/*1.617vh*/ 1.042vw;
  display: block;
  text-align: center; /* Or left if preferred */
  font-size: 1.563vw; /* Slightly smaller font size for dropdown */
  font-family: "Thorsa", Garamond, "serif";
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Optional: Keep the main "Welcome to A" button highlighted when hovering the dropdown */
.dropdown:hover .dropbtn:not(.active){
  background-color: #573F1C;
}

.framedimg {
  display:block;
  object-fit: contain;
  position: fixed;
  opacity: 1;
  z-index: -1;
  border-style: solid;
  border-color: #4d4d4d;
  border-width: thick;
}

.clickable {
	z-index: 1;
}

p {
  float: center;
  font-family: 'Thorsa';
  font-weight: Regular;
  font-style: normal;
  position: relative;
}

h1 {
  float: center;
  font-family: 'Thorsa';
  font-weight: Regular;
  font-style: normal;
  position: relative;
}

@media (min-aspect-ratio: 1) {
  p {
    max-width: 50%;
	font-size: clamp(0%, 2.912vh, calc(10.8px + 0.704vw));
	/*font-size: calc(10.8px + 0.704vw);*/
  }
  h1 {
    max-width: 50%;
	font-size: clamp(0%, 5.824vh, calc(21.6px + 1.408vw));
  }
}

@media (max-aspect-ratio: 1) {
  body {
    overflow-y: scroll;
  }
  p {
    font-size: font-size: 2.912vh;
    max-width: 90%;
  }
  h1 {
    font-size: font-size: 5.824vh;
    max-width: 90%;
  }
}

@media (min-aspect-ratio: 1) {
  .mobile {
    z-index: -11;
  }
}

@media (max-aspect-ratio: 1) {
  .pc {
    z-index: -11;
  }
}

.bottomimg {
  border-style: none;
  left: 5%;
  position: relative;
  height: 128.571vw;
  width: 90vw;
  margin-top: 5vh;
  margin-bottom: 5vh;
}

@font-face {
    font-family: 'Thorsa';
    src: url('fonts/thorsa.eot');
    src: url('fonts/thorsa.eot?#iefix') format('embedded-opentype'),
         url('fonts/thorsa.woff2') format('woff2'),
         url('fonts/thorsa.woff') format('woff'),
         url('fonts/thorsa.ttf')  format('truetype'),
         url('fonts/thorsa.svg#Thorsa') format('svg');
}