@import url(https://fonts.bunny.net/css?family=anonymous-pro:400|beth-ellen:400);
/* import fonts with the function above */

/* STYLING */
:root {
  /* change colors and fonts here */
  --nav-background-color: #cc8e4a;
  --nav-background-color-hover: #cc8e4a;
  --sublink-background-color: #e0af7b;
  --sublink-background-color-hover: #e0af7b;
  --nav-text-color: #f3f1ef;
  --sublink-text-color: white;
  --nav-text-hover-color: #fff01f;
  --nav-font: 'Beth Ellen', handwriting;
  --sublink-font: 'Anonymous Pro', monospace;
}

/* ADVANCED STYLING */
#mainNav a {
  cursor: pointer;
  /* Navigation buttons */
  text-decoration: none;
  color: var(--nav-text-color);
  font-family: var(--nav-font);
  font-size: .8rem;
  line-height: 1.1rem;
}

#mainNav > ul > a > li {
  /* Navigation buttons */
  background-color: var(--nav-background-color);
}

#mainNav a:hover {
  /* Navigation buttons hover*/
  color: var(--nav-text-hover-color);
  background-color: var(--nav-background-color-hover);
}

.subLinkItem {
  /* Sub-link buttons */
  color: var(--sublink-text-color);
  font-family: var(--sublink-font);
  text-transform: uppercase;
  font-size: .7rem;
  letter-spacing: .1rem;
}

.subLinkItem:hover {
  /* Sub-link buttons hover */
  background-color: var(--sublink-background-color-hover);
  text-decoration: underline wavy var(--nav-text-hover-color)
}
/* END STYLING */

#mainNav {
  background-color: var(--nav-background-color);
  width: 100%;
  margin: 0;
  z-index: 999;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(145, 112, 67, 0.2);
  -moz-box-shadow: 0px 0px 5px 0px rgba(145, 112, 67, 0.2);
  box-shadow: 0px 0px 5px 0px rgba(145, 112, 67, 0.2);
  position: absolute;
  top: 0;
}

#mainNav ul {
  display: flex;
  justify-content: center;
}

#mainNav li {
  position: relative;
  list-style: none;
  z-index: 999;
  padding: .5rem .6rem;
}

#mainNav > ul > a > li {
  background-color: var(--nav-background-color);
}

.dropdownItems {
  position: absolute;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  transform: translateY(-6rem);
  transition: all .5s ease-in-out;
  background-color: var(--sublink-background-color);
}

.dropdownBtn:hover + .dropdownItems, .dropdownItems:hover {
  visibility: visible;
  transform: translateY(0);
}