@import '/resources/global.css';

/*main header, set colors*/
.page_header {
  background-color: var(--english-lavender);
  border-radius: 25px;
  border: 2px solid var(--independence);
  width: 100%;
  margin-bottom: 1%;
}

/*make full width, center content*/
.header_content {
  display: flex;
  align-items: center;
  width: 100%;
}

/*size the icon*/
.header_icon {
  width: max(6%, 6vh);
  display: inline-block;
  padding: 1%;
}

/*title and nav bar, center*/
.header_right_bar {
  display: inline-block;
  width: 100%;
}

/*size the title, move it down*/
.header_text {
  font-size: max(220%, 3vh);
  color: var(--dark-text);
  position: relative;
  top: 1vh;
}

/*move nav bar up*/
nav {
  position: relative; 
  top: -1vh;
}

/*top level ul*/
nav ul {
  padding: 0;
  margin: 0;
}
/* all li*/
nav li {
  padding: 0.5%;
}
/*top level li*/
nav ul li {
  display: inline;
  position: relative;
}

/*style for a vertical line
only apply to top level elements
do not apply to first element*/
nav > ul > li:not(:first-child) {
  border-left: 2px solid var(--independence);
}

/*style for a horizontal line
only apply to sub level elements
do not apply to first element*/
nav ul ul li:not(:first-child) {
  border-top: 1px solid var(--independence);
}

/*sub ul for drop downs*/
nav ul ul {
  position: absolute;
  display: none;
  left: -50%;
  background-color: var(--english-lavender);
  border-bottom: 1px solid var(--independence);
  border-left: 1px solid var(--independence);
  border-right: 1px solid var(--independence);
  width: 600%;
}
/*sub li for drop down*/
nav ul ul li {
  display: block;
  padding-top: 2%;
  padding-bottom: 0%;
  padding-left: 5%;
  padding-right: 5%;
}
/*show the sub list on hover*/
nav li:hover ul {
  display: block;
}

/*attribute for links*/
nav li a {
  text-decoration: none;
  font-size: 130%;
  color: var(--link-text);
  width: 100%;
  white-space: nowrap;
}
/*change link color on hover*/
nav li a:hover {
  color: var(--dark-text);
}