* {
  box-sizing: border-box;
}

.top-nav {
  display: flex;
align-items: center;
flex-flow: column;
height: 100%;
justify-content: space-between;
}

/*.mid {
  justify-content: space-between;
  color: black;
  border-radius: 100px;
  padding: 15px 35px;
  border: 2px solid transparent;
  width: 35%;
  background-color: #ffffff7d;   
  box-sizing: border-box;
  backdrop-filter: blur(33px);
  -webkit-backdrop-filter: blur(33px);
  background-blend-mode: overlay;
}

#mid-wrap {
  display: flex;
justify-content: center;
position: fixed;
align-items: center;
top: 2vw;
width: 100%;
left: 0;
z-index: 3;
}*/

.end {
  justify-content: flex-end;
  z-index: 3;
}

.menu-wrap {
  background-color: black;
  border-radius: 100px;
}

.menu-button-container {
  display: flex;
  height: 30px;
  width: 30px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  justify-self: end;
  z-index: 3;
}

#menu-toggle {
  display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
  display: block;
  background-color: color(display-p3 0.949 0.3412 0.1647);
  position: absolute;
  height: 2px;
  width: 30px;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2px;
}

.menu-button::before {
  content: '';
  margin-top: -8px;
}

.menu-button::after {
  content: '';
  margin-top: 8px;
}

#menu-toggle:checked + .menu-button-container .menu-button::before {
  margin-top: 0px;
  transform: rotate(405deg);
}

#menu-toggle:checked + .menu-button-container .menu-button {
  background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked + .menu-button-container .menu-button::after {
  margin-top: 0px;
  transform: rotate(-405deg);
}

  .menu {
    position: absolute;
    top: -100vh;
    left: 8vw;
    flex-direction: column;
    width: 92vw;
    height: 100vh;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 2;
    margin: 0;
    padding: 0;
    display: flex;
  }

  .menu a {
    padding: 0 5vw;
    font-size: 45px; 
    opacity:1; 
    font-family: 'Clash Display'; 
    color:white;
    border-bottom: 1px solid rgb(51, 51, 51);
    width: 100%;
    display: flex;
    align-items: center;
    height: 25vh;
    background: color(srgb 0.0902 0.0902 0.0902);
  }

  /*#menu-toggle:checked ~ .menu {border-bottom:40px solid rgba(240,240,240,1);}*/

  #menu-toggle:checked ~ .menu a {
    opacity:1;
  }

  #menu-toggle:checked ~ .menu a:hover {background: rgb(242,87,42);
    background: linear-gradient(-90deg, rgba(242,87,42,1) 0%, rgba(23,23,23,1) 100%);}

  #menu-toggle ~ .menu {
    transition: 1000ms;
  }

  #menu-toggle:checked ~ .menu {
    transition: 800ms cubic-bezier(0.23, 1, 0.32, 1);
    top: 0;
  }

  @media only screen and (max-width: 768px) {

    .menu {
      top: 12vh;
      height: 88vh;
      left: -100vw;
      width: 100vw;
    }

    .menu a {
      height: 17.6vh;
      padding: 0 7vw;
    }

    #menu-toggle:checked ~ .menu {
      left: 0;
      top: 12vh;
      height: 88vh;
    }

  }