/* ---------------------------------------------------- Global */
html,
body {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* ---------------------------------------------------functionality */
.multi-level,
.item ul,
.mobile-nav input[type="checkbox"] {
  display: none;
}

#menu:checked ~ .multi-level,
.item input:checked ~ ul {
  display: block;
}

/* -------------------------------------------------arrow */
.arrow {
  width: 12px;
  height: 12px;
  vertical-align: middle;
  float: left;
  z-index: 0;
  margin: 17px 1em 0 2em;
}

/* arrow rotate function */
.item input + .arrow {
  transform: rotate(-90deg);
  transition: 0.1s;
}

.item input:checked + .arrow {
  transform: rotate(0deg);
  transition: 0.1s;
}

/* ------------------------------------------------- Styles */
label:hover {
  cursor: pointer;
}

label {
  width: 100%;
  display: block;
  z-index: 3;
  position: relative;
  border-bottom: 1px solid white;
}

.mobile-nav {
  width: 100%;
  background-color: hsl(205,44%,47%);
  overflow-x: hidden;
  /* border-bottom: 1px solid yellowgreen; */
}

#nav-icon {
  font-size: 28px;
  line-height: 50px;
  padding-left: 1.5em;
  color: whitesmoke;
  background-color: hsl(205,44%,47%);
  /* background-color: wheat; */
}

.mobile-nav ul,
.mobile-nav li,
.mobile-nav li a,
label {
  line-height: 50px;
  margin: 0;
  list-style: none;
  text-decoration: none;
  color: whitesmoke;
  font-weight: 400;
  width: 100%;
}

.mobile-nav li a {
  display: block;
}

.mobile-nav ul li {
  padding-left: 2em;
  border-bottom: 1px solid white;
}

/* input[type="checkbox"]#a {
  border-bottom: 1px solid white;
} */

.item ul li {
  padding-left: 2em;
  background-color: rgb(128, 128, 128);
}

.item ul li a {
  color: wheat;
}

.mobile-nav {
  display: none;
}

.light-blue {
  background-color: rgb(21,52,74);
  color: wheat;
}

.font1-5{
  font-size: 1.5em;
}

@media screen and (max-width: 770px) {
  .mobile-nav {
    display: block;
  }
}