/* General styles */
body {
    margin: 0;
    overflow-x: hidden;
    font-family: "Palatino", serif;
}

.Background {
    background-image: url("images/background.webp");
    background-size: cover;
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}

/* Top banner for wider screens */
.top_banner {
    background-color: #29371d;
    width: 100%;
    height: 3%;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    box-shadow: inset 0px 0px 3px black;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
}

/* Menu text positioned above the banner */
.menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: -2.3%;
    width: 44.69vw; /* Same as content div width */
    left: calc(50% - 26.345vw); /* Centered based on content div */
    z-index: 10;
    height: 8vh;
    white-space: nowrap;
}

.menu-item-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}

.menu-item {
    font-size: 1.5vw;
    color: #ccd5ae;
    text-align: center;
    cursor: pointer;
    padding: 0 0.8vw;
}

.menu-item:hover {
    color: white;
}

/* Rivet between each menu item */
.rivet {
    background-image: url("images/rivet.webp");
    background-size: contain;
    background-repeat: no-repeat;
    width: 1vw;
    height: 1vw;
    margin: -3px 0.8vw;
    display: block;
}

.menu-item-container:last-child .rivet {
    display: none;
}

.menu-item.selected:after {
    content: '';
    display: block;
    background-image: url("images/rivet.webp");
    width: 1.5vw;
    height: 1.5vw;
    margin-top: 10px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* Social Media Buttons Container */
.social-buttons-container {
    display: flex;
    position: absolute;
    top: 10%;
    left: 24%;
    width: 80%;
    z-index: 12;
}

.social-button {
    width: 80%; /* Set to 80% of the default size */
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.social-button:hover {
    transform: scale(1); /* Scale up to full size on hover */
}

.instagram {
    margin-left: 5%;
}

.facebook {
    margin-right: 5%;
}

/* Emblem Container */
.emblem-container {
    position: absolute;
    left: 38%;
    top: 4.93vh;
    width: 24.96vw;
    height: 22.85vh;
    z-index: 13;
    background-color: transparent;
}

/* WebP layer */
.emblem-webp {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url("images/emblem.webp");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
}

/* GIF layer (emblem.gif) */
.emblem-gif {
    position: absolute;
    width: 67%;
    height: auto;
    top: 6%;
    left: 15%;
    z-index: 3;
}

/* Hamburger menu for phone widths */
.hamburger-menu {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #29371d;
    z-index: 15;
}

.hamburger-icon {
    width: 10%;
    height: 50%;
    background-color: black;
    margin: 10px;
    cursor: pointer;
    position: relative;
}

.hamburger-icon::before,
.hamburger-icon::after,
.hamburger-icon div {
    content: '';
    background-color: white;
    height: 2px;
    width: 80%;
    position: absolute;
    left: 10%;
}

.hamburger-icon div {
    top: 50%;
    transform: translateY(-50%);
}

.hamburger-icon::before {
    top: 25%;
}

.hamburger-icon::after {
    bottom: 25%;
}

.dropdown-menu {
    display: none;
    background-color: #29371d;
    position: absolute;
    top: 3%;
    left: 0;
    width: auto;
    z-index: 20;
}

.dropdown-menu .menu-item {
    padding: 10px;
    color: #ccd5ae;
    text-align: left;
    display: block;
}

.dropdown-menu .menu-item:hover {
    color: white;
}

/* Content div */
.content {
    background-color: #29371d;
    box-shadow: inset 0px 0px 3px black;
    position: absolute;
    left: calc(50% - 22.345vw);
    top: 30.14vh;
    width: 44.69vw;
    min-height: 60.2vh;
    border-radius: 15px;
    z-index: 7;
}
  
/* Media queries for responsiveness */
@media (max-width: 768px) {
    .top_banner {
      border-bottom-right-radius: 0;
    }
  
    .menu {
      display: none;
    }
  
    .hamburger-menu {
      display: block;
    }

    .dropdown-menu {
      width: auto;
    }

    .social-button {
      width: 10%;
    }

    .social-emblem-container {
      width: 80%;
      left: 10%;
    }

    .emblem-container {
      width: 60%;
    }
  
    .content {
      width: 80%;
      left: 10%;
      height: auto;
    }

    /* Menu item text scaling for mobile */
    .menu-item {
      font-size: 4vw;
    }
}