:root {
  box-sizing: border-box;

  --primary: #5331ff;
  --hover-color: #fdd052;
  --dark: #1c2022;
  --light: #fff;
  --header-bg: var(--primary);
}
*,
*::after,
*::before {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
main{
  font-family: "josefin sans", "helvetica", sans-serif;
  font-size: 1rem;
}

header {
  background: var(--header-bg);

}

.branding-logo {
  color: var(--light);
  font-size: calc(0.8rem + 1vw);
  text-decoration: none;
}

.navbar {
					/*  display: flex; */
  justify-content: space-between;
  align-items: center;
}

.menu {
  display: flex;
  flex-direction: row;
}
.menu li {
  list-style: none;
}
.menu li a {
  display: block;
  text-decoration: none;
  color: var(--light);
  padding: 1em 1.5em;
  font-size: 1rem;
}

/* Styling submenu */
.has-dropdown {
  position: relative;
}
.submenu {
  position: absolute;
  left: 0;
  background-color: var(--dark);
  white-space: nowrap;
  padding: 1.5em 0;
  min-width: 16em;

  /* hide submenus */
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top center;
}
.submenu > li > a {
  padding: 0.8em 1.5em;
}
.submenu .submenu {
  left: -100%;
  top: 0;
}
.submenu .submenu .submenu {
  left: -100%;
  top: 0;
}

.menu > li:hover > a,
.submenu > li:hover > a {
  background-color: hsla(0, 0%, 100%, 0.05);
  color: var(--hover-color);
}
.menu > li:hover > a {
  background-color: hsla(0, 0%, 0%, 0.95);
}

/* Arrows */

.arrow {
  width: 0.5em;
  height: 0.5em;
  display: inline-block;
  vertical-align: middle;
  border-left: 0.15em solid currentColor;
  border-bottom: 0.15em solid currentColor;
  transform: rotate(-45deg);
  margin-top: -0.25em;
  transition: transform 100ms ease-in-out;
}

/* Reveal  */
.menu > li:hover > a + .submenu,
.submenu > li:hover > a + .submenu {
  opacity: 1;
  transform: scaleY(1);
}

/* Animate Arrows */
.menu > li:hover > a > .arrow,
.submenu > li:hover > a > .arrow {
  transform: rotate(225deg);
}

@media only screen and (max-width: 78.75em) {
  .submenu .submenu .submenu {
    left: -100%;
    top: 0.5em;
  }
  .submenu {
    min-width: 16em;
  }
}
@media only screen and (max-width: 58.75em) {
  .menu li a {
    font-size: 1rem;
  }
}

@media only screen and (max-width: 50em) {
  header {
/*     position: relative; */
    padding: 1.5em 2em;
  }
  .menu {
    flex-flow: column;
    position: absolute;
    background: var(--primary);
    top: 4.55em;
    left: 0;
    right: 0;
    					/*  height: 100vh;  */
    					
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top center;
    transition: 200ms transform cubic-bezier(0.36, 0.4, 0.42, 1.48) 100ms,
      100ms opacity ease-in-out;
    overflow-y: scroll;
    
  }
  .menu > li > a {
    font-size: 1rem;
           					 font-color: var(--light);
   						/* color: var(--dark);   */
  }
  .submenu > li > a {
    font-size: 1rem;
  }

  .submenu {
    top: 0;
    padding-left: 1.5em;
    border-left: 0.12em dotted hsla(342, 99%, 45%, 0.95);
  }
  .submenu .submenu {
    left: 0;
    top: 0;
  }
  .submenu .submenu .submenu {
    left: 0;
    top: 0;
  }

  .menu > li:hover > a + .submenu,
  .submenu > li:hover > a + .submenu {
    position: relative;
  }

  .hamburger {
    width: 2em;
    height: 0.25em;
    display: block;
    background: var(--light);
    position: relative;
    cursor: pointer;
    transition: 0.2s transform ease-in-out;
  }
  .hamburger::after,
  .hamburger::before {
    content: "";
    position: absolute;
    left: 0;
    background: inherit;
    width: inherit;
    height: inherit;

    transition: 0.2s transform ease-in-out;
  }

  .hamburger::after {
    top: 0.65em;
  }
  .hamburger::before {
    bottom: 0.65em;
  }

  .close::after,
  .close::before {
    top: 0;
    transition: 0.2s transform ease-in-out;
  }
  .close::before {
    display: none;
  }
  .close {
    transform: rotate(45deg);
    transition: 0.2s transform ease-in-out;
  }
  .close::after {
    transform: rotate(-90deg);
  }

  /* reveal menu */
  input[type="checkbox"]:checked + .menu {
    position: absolute;
    opacity: 1;
    transform: scaleY(1);
  }
}