#global {
  position: fixed;
  right: 0;
  top: 0;
  padding: 1rem;
  z-index: 80;
}

#global #menuButton {
  top: 1rem;
  position: relative;
  background-color: var(--roseLight);
  background-image: url("/wp-content/themes/treaty/assets/images/bg_texture.png");
  background-size: 100%;
  border: 2px solid var(--midnight);
  padding: 0.5rem 1rem;
  color: var(--midnight);
  font-family: 'BerkshireSwash';
  font-size: max(1.25rem, 2vw);
  border-radius: 5px;
  cursor: pointer;
  z-index: 50;
  -ms-user-select:none;
  -moz-user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
   user-select:none;
}

#global #menuSwitch[type='checkbox']:checked ~ #menuButton .closed,
#global #menuSwitch[type='checkbox'] ~ #global-menu,
#global #menuSwitch[type='checkbox'] ~ #menuButton .open {
  display: none;
}

#global #menuSwitch[type='checkbox']:checked ~ #menuButton .open,
#global #menuSwitch[type='checkbox'] ~ #menuButton .closed,
#global #menuSwitch[type='checkbox']:checked ~ #global-menu {
  display: initial;
}

#global #menuSwitch[type='checkbox'] {
  z-index: 2;
  position: fixed;
  top: 0;
  right: 0;
  visibility: hidden;
}

#global #global-menu {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: var(--midnight);
  top: 0;
  left: 0;
  z-index: 20;
  overflow-y: scroll;
}

#global #global-menu > ul {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#global #global-menu ul li {
  font-family: 'BerkshireSwash';
  font-size: max(2.5rem, 4vw);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#global #global-menu ul li.second-level a {
  font-size: max(1.5rem, 2.75vw);
  font-family: 'Merriweather';
  padding-left: 4rem;
  padding-right: 4rem;
}

#global #global-menu ul li a,
#global #global-menu ul li label {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
  color: var(--roseLight);
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  min-height: 8rem;
}

#global #global-menu ul li {
  background-position-x: right;
  background-position-y: center;
  background-size: cover;
}

#global #global-menu ul li a:hover {
  mix-blend-mode: luminosity;
}

#global #global-menu ul li.bg-festival:hover {
  background-image: url('/assets/images/menu/bg-festival.jpg');
}

#global #global-menu ul li.bg-dial:hover {
  background-image: url('/assets/images/menu/bg-dial.jpg');
}

#global #global-menu ul li.bg-tree:hover {
  background-image: url('/assets/images/menu/bg-tree.jpg');
}

#global #global-menu ul li.bg-squirrel:hover {
  background-image: url('/assets/images/menu/bg-squirrel.jpg');
}

#global #global-menu ul li.bg-grass:hover {
  background-image: url('/assets/images/menu/bg-grass.jpg');
}

#global #global-menu ul li.bg-goose:hover {
  background-image: url('/assets/images/menu/bg-goose.jpg');
}

#global #global-menu ul li.bg-bee:hover {
  background-image: url('/assets/images/menu/bg-bee.jpg');
}

#global #global-menu ul li.bg-beetle:hover {
  background-image: url('/assets/images/menu/bg-beetle.jpg');
}

#global #global-menu ul li.bg-dog:hover {
  background-image: url('/assets/images/menu/bg-dog.jpg');
}

#global #global-menu ul li.bg-finsbury:hover {
  background-image: url('/assets/images/menu/bg-finsbury.jpg');
}