:root {
    box-sizing: border-box;
    --hover-color: #fdd052;
    --dark: #1c2022;
    --light: #fff;
    --submenu-border:hsla(342, 99%, 45%, 0.95);
    --submenu-hover:hsla(0, 0%, 100%, 0.05);
    --menu-hover:hsla(0, 0%, 0%, 0.05);
  }
  .menu {
    display: flex;  flex-flow: row nowrap;
    align-items: stretch;
    gap: 1em;
  }
  .menu > li {
    list-style: none;
    display: flex;  flex-flow: row nowrap;
    align-items: stretch;
  }
  .menu > li > a {
    text-decoration: none;
    color: var(--light);
    font-size: 1em;
    display: flex;  flex-flow: row nowrap;
    align-items: center;
  }
  
  /* Styling submenu */
  .has-dropdown {
    position: relative;
  }
  .submenu {
    position: absolute;
    left: 0;
    top: 40px;
    background-color: var(--dark);
    white-space: nowrap;
    padding: 1em 0;
    min-width: 16em;
  
    /* hide submenus */
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top center;
  }
  .submenu > li > a {
    padding: 0.8em 1em;
  }
  .submenu .submenu {
    left: -100%;
    top: 0;
  }
  .submenu .submenu .submenu {
    left: -100%;
    top: 0;
  }
  
  .menu  li:hover > a {
    color: var(--hover-color);
  }
  .submenu > li:hover {
    background-color: var(--submenu-hover);
  }
  .menu > li:hover {
    background-color: var(--menu-hover);
  }
  
  /* 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: 1em;
    }
  }
  
  @media only screen and (max-width: 50em) {
    input[type="checkbox"]+.menu {
      flex-flow: column;
      position: absolute;
      background: var(--light);
      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;
      
    }
    input[type="checkbox"]+.menu > li > a {
      font-size: 0.8em;
      color: var(--dark);
    }
    input[type="checkbox"]+.menu > li > a:hover {
        font-size: 0.8em;
        color: var(--hover-color);
    }
  
    .submenu > li > a {
      font-size: 0.8em;
    }
  
    .submenu {
      top: 0;
      padding-left: 1em;
      border-left: 0.12em dotted var(--submenu-border);
    }
    .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);
    }
  }