/* === Global Styles === */
body {
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url(https://imgproxy.staging.fourthwall.com/hdT3LVbzk94go2ELr-e_0E-0mT5tKOu02Y-aNjM11ic/w:1920/sm:1/enc/GpouJgBTtpNC4KGz/xcyWBqFKgYihLDeo/YjSYt31gtTDLJtN5/ujCk0Qlt3SWoUN1n/W4FlEdQfdCxJ00hW/4t9RYROO3SeVUnQI/7zikgB2MLCJYqY8P/jBE26i879YCfaa-I/Rc7ewTMqTgWCYhvf/zQfBFLw2PnUzazzg/BiqqNBLxDdojEQTl/kz-MQf0Xil62KAnh/3n199ZbBTwDHTMdo/OHNxMECxFFGKu5JO/kSWG4klo9Tch_T35/YleJldModeEnlf5U);
  background-size: cover;
  background-attachment: fixed;
  color: yellow;
  font-family: "Times New Roman", serif;
  overflow-y: auto;
  margin: 0;
  padding: 0;
}

/* === Typography === */
h1 {
  font-size: 600%;
  text-align: center;
}

h2 {
  font-size: 225%;
  margin: 75px;
}

h3 {
  margin: 75px;
}

h4 {
  font-size: 150%;
  margin: 75px;
}

h5 {
  font-size: 125%;
  margin: 75px;
}

h6 {
  font-size: 110%;
  margin: 75px;
}

p {
  font-size: 150%;
  margin: 75px;
  text-indent: 60px;
  text-align: left;
}

a {
  color: blue;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* === Navigation Bar === */
.navbar {
  background-color: rgba(0, 0, 0, 0.8);
  font-size: 112.5%;
  padding: 15px;
  position: sticky;
  top: 0;
  z-index: 100;
  overflow: visible;
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.navbar li {
  position: relative;
}

.navbar a {
  display: block;
  color: yellow;
  padding: 10px 15px;
  text-align: center;
}

.navbar a:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* === Dropdown Menu === */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.9);
  min-width: 180px; /* slightly wider to fit all items */
  z-index: 1000;
  flex-direction: column;
  top: 100%;
  left: 0;
}

.dropdown-content a {
  padding: 9px 12px;
  text-align: left;
  color: yellow;
  text-decoration: none;
  white-space: nowrap; /* prevents wrapping */
}

.dropdown-content a:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.dropdown:hover .dropdown-content {
  display: flex;
}
