/* Import Theme Colors */
@import url('./theme.css');

header {
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 80px;
  padding: 20px 40px;
  box-sizing: border-box;
}

header.solid {
  position: relative;
}

.logo {
  user-select: none !important;
  -webkit-user-drag: none !important;
}

.logo h1 {
  font-size: 28pt;
  font-weight: 400;
  color: var(--web-contrast-text-color);
  user-select: none !important;
  -webkit-user-drag: none !important;
}

header.solid .logo h1 {
  color: var(--web-text-color) !important;
}

.logo h1 > span {
  color: var(--primary-color);
  user-select: none !important;
  -webkit-user-drag: none !important;
}

nav.menubar > ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
  list-style-type: none !important;
}

nav.menubar > ul > li > a {
  padding-bottom: 4px;
  text-decoration: none !important;
  font-size: 14pt;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--nav-contrast-text-color);
}

header.solid nav.menubar > ul > li > a {
  color: var(--nav-text-color);
}

nav.menubar > ul > li > a:hover {
  border-bottom: 2px solid var(--nav-border-color-hover);
}

header.solid nav.menubar > ul > li > a:hover {
  border-bottom: 2px solid var(--nav-border-darker-color-hover) !important;
}

nav.menubar > ul > li > a.selected,
header.solid nav.menubar > ul > li > a.selected {
  border-bottom: 2px solid var(--nav-border-color-selected) !important;
  color: var(--nav-text-color-selected) !important;
}


/* Media Query */
@media screen and (max-width: 850px) {
  header {
    flex-direction: column;
    gap: 25px;
  }
}