@charset "utf-8";

:root {
  --menu-bg-color: rgb(64, 33, 15);
  --dropdown-color: rgb(64, 33, 15);
  --dropdown-bg-color: rgba(255, 240, 0, 0.95);
  --dropdown-bg-color-hover: rgba(255, 255, 255, 0.95);
  --dropdown-box-shadow: 0.3em 0.3em 1em rgb(0 0 0 / 60%);
  --dropdown-border-radius: 5px;
  --dropdown-transform-start: translate(10px, -30px);
  --dropdown-transform-end: translate(10px, -10px);
  --dropdown-transform-transition: all 1s cubic-bezier(.5,.5,0,2);
}

a.menu {
  display: inline-block;
  color: white !important;
  text-decoration: none;
  background-color: var(--menu-bg-color);
  margin-right: 0px;
  padding: 0px 24px;
  border: 0;
  border-left: 1px solid white;
  line-height: 48px;
}
a.menu:first-of-type {
  border-left: 0;
}
a.menu:last-of-type {
  background-color: red;
  border-right: 0;
}
a.menu:hover {
  opacity: 1;
  cursor: pointer;
}

.dropdown {
  width: 200px;
  position: absolute;
  box-shadow: var(--dropdown-box-shadow);
  border-radius: var(--dropdown-border-radius);
  margin-top: 0;
  color: var(--dropdown-color);
  background: var(--dropdown-bg-color);
  content-visibility: hidden;
  opacity: 0;
  transform: var(--dropdown-transform-start);
  transition: var(--dropdown-transform-transition);
}
.dropdown a {
  display: flex;
  padding: 1em;
  text-decoration: none;
}
.dropdown a:hover {
  color: var(--dropdown-color);
  background-color: var(--dropdown-bg-color-hover);
  border-radius: var(--dropdown-border-radius);
}

#about {
  left: 132px;
}
#program {
  left: 237px;
}
#schedule {
  left: 412px;
}

.show {
  content-visibility: visible;
  opacity: 1;
  transform: var(--dropdown-transform-end);
}