body { --color-text: #fff; --color-bg: #fff; --color-link: #fff; --color-link-hover: #fff; --color-bg-item1: #000; --color-bg-item2: #2c35b7; --color-bg-item3: #0f1013;
  --color-bg-item4: #1d2027; --color-bg-item5: #0f1013; --color-item-alt: #494d54; --color-quote: #5b677a; --color-info: #57535a; --color-title: #e23434; --color-tagline: #e2e2e2;
  min-height: 100vh; color: #57585c; }

  a { text-decoration: none; color: var(--color-link); outline: none; transition: color 0.2s; }
  a:hover, a:focus { color: var(--color-link-hover); }
  button:focus, a:focus { outline: none; }

  .action { background: none; border: 0; color: #fff; cursor: pointer; padding: 0; }
  .action--menu { z-index: 1000; }
  .menu--open .action--menu { pointer-events: none; }
  .menu-close-header { width: 100%; position: absolute; top: 30px; right: 0; z-index: 1000; text-align: right; padding: 20px 0; }
  .action--close { opacity: 0; padding: 10px; display: inline-flex; }
  .icon--menu { width: 2rem; }
  .icon--close { width: 24px; fill: #000; }
  .menu { color: var(--color-text); text-align: center; width: 100%; height: 100vh; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 200; display: grid;
  grid-template-columns: 100%; pointer-events: none; }
  .menu--open { pointer-events: auto; }
  .menu__item { width: 100%; position: relative; overflow: hidden; }
  .menu__item-inner { overflow: hidden; transform: translate3d(101%, 0, 0); height: 100%; width: 100%; position: relative; display: flex; flex-direction: column; justify-content:
  center; }
  .menu__item--1 .menu__item-inner { background: var(--color-bg); }
  .menu__item--2 .menu__item-inner { background: var(--color-bg-item2); }
  .menu__item--3 .menu__item-inner { background: var(--color-bg-item3); }
  .menu__item--4 .menu__item-inner { background: var(--color-bg-item4); }
  .menu__item--5 .menu__item-inner { background: var(--color-bg-item5); }
  .menu__item--4, .menu__item--5 { display: none; }
  .label { display: none; }
  .mainmenu__item { opacity: 0; }
  .mainmenu__item, .sidemenu__item { position: relative; overflow: hidden; transition: color 0.1s; margin: 0.25rem 0; display: block; font-size: 5vw; }
  .mainmenu__item a { font-size: 5vw; text-transform: capitalize; overflow: visible; position: relative; transition: color 0.3s; font-family:
  'DM Serif Display', serif; font-weight: 500; line-height: 1.4; }
  .sidemenu__item-inner { display: block; transform: translate3d(0, 100%, 0); }
  .menu__item-map { width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: transform 0.8s cubic-bezier(0.2, 1, 0.8, 1); }
  .menu__item-inner:hover .menu__item-map { transform: scale3d(1.1, 1.1, 1); }
  .menu__item-hoverlink { font-weight: bold; text-transform: capitalize; position: relative; z-index: 1000; display: block; }
  .menu__item-hoverlink:hover { color: var(--color-link); }
  .quote { font-size: 2rem; padding: 1rem; text-align: center; max-width: 70%; color: var(--color-quote); font-family: 'DM Serif Display', serif; }
  .menu__item-link { text-align: left; align-self: flex-start; justify-self: start; font-size: 1.5rem; width: 100%; line-height: 1; padding: 2rem; margin: 3rem 0 auto; display: flex;
  flex-direction: column; height: calc(100% - 3rem); }

  .menu { width: 100%; height: 100vh; overflow: hidden; position: fixed; top: 0; left: 0; grid-template-columns: 100%; grid-template-rows: 100%; grid-template-areas: "item1"; }
  .menu__item { height: 100%; }
  .menu__item--1 { grid-area: item1; }
  .menu__item--2 { grid-area: item2; }
  .menu__item--3 { grid-area: item3; }
  .menu__item--4 { grid-area: item4; }
  .menu__item--5 { grid-area: item5; }
  .menu__item--4, .menu__item--5 { display: block; }
  .menu__item-inner { align-items: center; }
  .label { display: block; color: var(--color-item-alt); position: absolute; z-index: 1000; font-weight: bold; margin: 0; white-space: nowrap; }
  .label a { color: var(--color-item-alt); font-weight: bold; margin: 0; white-space: nowrap; }
  .label--topleft { top: 2rem; left: 2rem; }
  .label--vert, .label--vert-mirror { -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; }
  .label--vert-mirror { transform: rotate(180deg); }
  .label--bottomright { bottom: 2rem; right: 2rem; }
  .label::before { content: '------------- '; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -1px; margin: 0 0.75rem 0 0; }
  .label--vert::before, .label--vert-mirror::before { margin: 0.75rem 0; }
  .mainmenu, .sidemenu { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .mainmenu { counter-reset: menuitem; }
  .mainmenu__item { font-size: 5vw; text-transform: capitalize; overflow: visible; margin: 0.5rem 0; padding: 0 0.5rem; position: relative; transition: color 0.3s; font-family:
  'DM Serif Display', serif; font-weight: 500; line-height: 1.4; }
  .mainmenu__item:hover { color: var(--color-item-alt); }
  .mainmenu__item::after { content: ''; width: 100%; top: 50%; height: 2px; background: var(--color-item-alt); position: absolute; left: 0; opacity: 0; transform: scale3d(0, 1, 1);
  transition: transform 0.3s, opacity 0.3s; transform-origin: 100% 50%; }
  .mainmenu__item:hover::after { opacity: 1; transform: scale3d(1, 1, 1); }
  .sidemenu__item { text-transform: uppercase; letter-spacing: 0.15rem; font-size: 0.85rem; }
  .menu__item-hoverlink { font-size: 1.25rem; text-transform: capitalize; border-bottom: 2px solid #fff; opacity: 0; transition: opacity 0.3s; }
  .menu__item-inner:hover .menu__item-hoverlink { opacity: 1; }
  @media screen and (max-width: 767px) {
  .mainmenu__item, .mainmenu__item a { font-size: 8vw; }
  }
  @media screen and (max-width: 575px) {
  .mainmenu__item, .mainmenu__item a { font-size: 10vw; }
  }
  @media screen and (max-width: 479px) {
  .mainmenu__item, .mainmenu__item a { font-size: 10vw; }
  }