header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: var(--blue-main);
      padding: 15px 30px;
}

nav {
      width: 700px;
      margin-right: 50px;
}

.menu {
      display: flex;
      justify-content: space-between;
      align-items: center;
}

.menu-button-container,
#menu-toggle {
      display: none;
}

@media (max-width: 1120px) {
      nav {
            width: 600px;
      }
}

/* Tablet */
@media (max-width: 1020px) {
      nav {
            width: 95%;
            position: absolute;
      }

      .menu {
            display: none;
      }

      .menu-button-container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: absolute;
            right: 5px;
            height: 100%;
            width: 30px;
            cursor: pointer;
      }

      .menu-button,
      .menu-button::before,
      .menu-button::after {
            background-color: black;
            display: block;
            position: absolute;
            height: 4px;
            width: 25px;
            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-toggle ~ .menu {
            position: relative;
            top: 155px;
            left: 58.2%;
            flex-direction: column;
            width: 43%;
            justify-content: center;
            align-items: center;

            height: 0;
            margin: 0;
            padding: 0;
            border: 0;
            transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
      }

      #menu-toggle:checked ~ .menu {
            display: block;
            height: 220px;
            padding: 0.5em;
            background-color: var(--blue-main);
            transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
            z-index: 10;
      }

      .menu > a {
            display: flex;
            justify-content: center;
            padding: 0.5em 0;
            width: 100%;
      }
}

/* Mobile */
@media (max-width: 700px) {
      header {
            padding: 10px 20px;
      }

      .logo {
            height: 50px;
      }

      .menu-button-container {
            right: 15px;
      }

      #menu-toggle ~ .menu {
            top: 110px;
            left: 57.4%;
      }

      #menu-toggle:checked ~ .menu {
            height: 180px;
      }
}

@media (max-width: 420px) {
      #menu-toggle ~ .menu {
            left: 46.3%;
      }

      #menu-toggle:checked ~ .menu {
            width: 190px;
      }
}

@media (max-width: 350px) {
      #menu-toggle ~ .menu {
            left: 36%;
      }
}