:root{
    --nav-hover-color: rgb(239, 155, 59);
    --nav-color : rgb(19, 87, 121);
    --nav-ul-background-color: rgb(238, 238, 239);
    --nav-background-color: rgb(221, 236, 249);
}


@media(prefers-color-scheme: dark){
  header {
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.137);
  }
}

@media(prefers-color-scheme: light){
  header {
    box-shadow: 0px 0px 20px rgba(2, 29, 49, 0.238);
  }
}

header {
    position:fixed;
    margin-top: 0;
    font-size:large;
    font-family: "Palatino Linotype", sans-serif;           
    width: 100%;
    background-color: var(--nav-background-color);
    top: 0px;
    z-index: 100;

}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2vh 2vw;
}

#logo-nav {
    width: 20vh;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 2rem;
  justify-content: center;
  align-items: center;
}

nav li {
  width: auto;
  float: none; 
  text-align: center;
  justify-content: center;
}

nav a {
  display: block;
  text-decoration: none;
  color: var(--nav-color);
  border-bottom: 2px solid transparent;
  padding: 0.5vw 0;
  transition: color 0.3s ease, border-bottom 0.3s ease;
}

nav a:hover {
  color: var(--nav-hover-color);
  border-bottom: 2px solid var(--nav-hover-color);
}

.drop-down > a::after {
  content: " ▼";
  font-size: 0.8rem;
}

#menu-toggle {
  z-index : 2000;
  background: none;
  border: none;
  cursor: pointer;
  display: none;
}

#menu-toggle img {
  width: 32px;
  height: 32px;
  transition: transform 0.2s ease;
}

#menu-toggle:hover img {
  transform: scale(1.1);
}

@media (min-width: 1050px) {
  #menu {
    display: flex;
    gap: 2rem;
  }
}

@media (max-width: 1050px) {
  nav > ul li:hover .submenu{
    display: none;
  }

  .drop-down > a::after {
  content: "";
  }

  #menu-toggle {
    display: block;
  }

  #menu {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 250px;
    background-color: var(--nav-background-color);
    flex-direction: column;
    padding: 2rem;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

  #menu.show {
    transform: translateX(0);
  }

  #menu li {
    margin: 1rem 0;
  }


}

.submenu{
    left: 0; right: auto; width: max-content; 
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s; ;
    display: block;
    background-color: var(--nav-ul-background-color);
    position: absolute;
    width: 100%;
    z-index: 1;
}

.submenu li{
    width: 100%;
    text-align: left;
}

.submenu a{
    margin-left: 10px;
    margin-right: 10px;
    padding: 10px 10px 10px;
    border-bottom: none;
}

nav > ul li:hover .submenu{
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    transition: opacity 1s ease, transform 1s ease, visibility 1s;
}

.submenu li a {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.submenu li a img {
  width: 5vh;
  height: auto;
  display: block;
}