#menu-mobile a {
  text-decoration: none;
  color: var(--purple);
  opacity:1;
  font-size: 4em;
  font-weight: 400;
  transition: 200ms;
  display: flex;
  width: 100%;
}
#menu-mobile a:hover {
  opacity:0.5;
}
#menu-mobile ul {
  padding: 0;
  list-style-type: none;
}


#menu-mobile  {
  background-color: var(--purple);
  height: 150px;
  width: 100vw;
}


#menuToggle {
  display: flex;
  flex-direction: column;
  position: relative;
  top: 50px;
  left: 50px;
  z-index: 250;
  -webkit-user-select: none;
  user-select: none;
  width:fit-content;
}

#menuToggle input
{
    display: flex;
    width: 95px;
    height: 95px;
    position: absolute;
    cursor: pointer;
    opacity: 0;
    z-index: 350;
    top: -22px;
    left: -19px;
}

#menuToggle span
{
  display: flex;
  width: calc(29px * 3);
  height: calc(2px * 3);
  margin-bottom: 20px;
  position: relative;
  background: var(--yellow);
  border-radius: 6px;
  z-index: 325;
  transform-origin: 5px 0px;
  transition: transform 0.25s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.25s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.25s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-3px, -1px);
  background: #36383F;
}
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

#menu-mobile ul
{
  position: absolute;
  width: 80vw;
  height: 100vh;
  border-right: 1em solid var(--purple);
  margin: -50px 0 0 -50px;
  background-color: var(--yellow);
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-102%, 0);
  transition: transform 0.25s cubic-bezier(0.77,0.2,0.05,1.0);
  z-index: 250;
  display: flex;
  flex-direction: column;
}

#menu-mobile li
{
  padding: 10px 0;
  transition-delay: 2s;
  display: flex;
  width: 100%;
}

#menuToggle input:checked ~ ul
{
  transform: none;
}

#header-title-mobile {
    position: absolute;
    height: 150px;
    display: flex;
    align-items: center;
    padding-top: 18px;
    margin: 0% 25%;
    width: 50%;
    justify-content: center;
}

#header-title-mobile h1 {
    font-family: 'poc_font';
    letter-spacing: -0.17em;
    font-size: 6em;
}