.burger {
  position: sticky;
  display: flex;
  align-items: flex-start;
  width: fit-content;
  left: 0;
  z-index: 10;
  flex-direction: column;
  color: var(--light-gray-color);
  padding: var(--spacing-1);
  cursor: pointer;
  opacity: 0;
  animation: fade-in-lefty var(--transition-normal-duration) ease calc(var(--transition-duration-7) + 0.2s) forwards 1;
}

@media only screen and (min-width: 768px) {
  .burger {
    left: var(--spacing-1);
    margin-top: var(--spacing-1);
  }
}

@media only screen and (min-width: 1200px) {
  .burger {
    margin-left: auto;
    align-items: flex-end;
    margin-right: var(--spacing-1);
    margin-top: -4%;
  }
}

.burger__title {
  margin-bottom: var(--spacing-1);
  transition: opacity var(--transition-short-duration) ease-out;
}

.burger__bar {
  width: var(--width-fixed-40);
  height: var(--height-fixed-4);
  position: relative;
  background-color: var(--light-gray-color);
}

.burger__bar--dark {
  background-color: var(--primary-color);
}

.burger__title--dark {
  color: var(--primary-color);
}

.burger__bar::before,
.burger__bar::after {
  position: absolute;
  content: '';
  box-shadow: inherit;
  width: inherit;
  height: inherit;
  background-color: inherit;
  transition: top, transform var(--transition-short-duration) ease-out;
}

.burger__bar,
.burger__bar::before,
.burger__bar::after {
  display: block;
  transform-origin: left center;
}

.burger__bar::before {
  top: -10px;
}

.burger__bar::after {
  top: 10px;
}