/* CSS Reset */

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  width: 100%;
  font-family: "Roboto", sans-serif;
}

body {
  color: white;
  top: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: black;
}

p {
  margin: 4px auto;
}

.menu-bar {
  --menu-bar-height: clamp(24px, 6.5vw, 50px); /* Define a CSS variable for the height */
  width: 100%;
  background-color: black; /* darkred; /* Changed background color to dark red */
  overflow: hidden;
  text-align: center; /* Center the menu links */
  font-family: Lato, sans-serif;
  height: var(--menu-bar-height); /* Use the CSS variable for the height */
}

.menu-bar a {
  display: inline-block; /* Changed to inline-block for centering */
  color: white; /* White text color */
  text-align: center;
  margin-top: 8px; /* Top margin */
  padding: calc(var(--menu-bar-height) * 0.1) 16px; /* Top and bottom padding is 10% of the menu-bar height */
  text-decoration: none; /* No underline */
  letter-spacing: 1.5px;
  cursor: pointer;
  font-size: clamp(0.6em, 1vw, 0.7em); /* Adjust font size based on viewport width */
}

.menu-bar a:hover {
  background-color: #ddd;
  color: black;
}

.full-width-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 1.2/1;
  max-height: 90vh;
}

.full-width-image-btm {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  min-width: 400px;
  max-width: 800px;
}

.promo-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: -36px;
  width: 50%;
  height: auto;
}

#divAbout,
#divDirectors,
#divContact {
  position: absolute; /* or relative */
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  width: 60%;
  max-width: 1000px;
  min-width: 400px;
  margin: 0 auto; /* Center horizontally within the body */
  padding: 36px;
  border: 6px outset rgb(255, 188, 46);
  border-radius: 12px;
  text-align: justify;
  background-color: black;
  color: rgb(228, 202, 102);
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.25em;
  font-weight: 100;
  /* font-weight: 300; /* Lighter font weight */
  font-family: "Roboto", sans-serif;
  font-size: 1em;
  letter-spacing: 0.8px; /* Adjusted letter spacing for readability */
}

#divAbout,
#divDirectors,
#divContact div {
  margin: 12px auto;
}