.main-header {
    height: 50px;
    background-color: var(--bg-color01);
    color: white;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;

    display: flex;
    align-items: center;
}

.button-container {
  visibility: hidden;
 }

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: white;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

  /* large screen */
  @media (min-width: 1200.1px) {
   .button-container {
    visibility: hidden;
   }
}

/* Tablet screen */
@media (max-width: 1200px) {
  .button-container {
    visibility: visible;
   }
  }
  
  /* Mobile screen */
  @media (max-width: 580px) {
    .button-container {
      visibility: visible;
     }
    
  }