.hamburger {
    position: absolute;
    right: 95px;
    float: right;
    cursor: pointer;
    z-index: 3;
  }
  
  .hamburger span {
    display: block;
    width: 3rem;
    height: .3rem;
    margin-bottom: .35rem;
    background-color: #222222;
    border-radius: .35rem;
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
  }
  
  .hamburger:hover span {
    background-color: var(--hover-button-color); /* Hover effect for the background color */
  }
  
  .hamburger.pulsing span {
    animation: pulse 0.5s ease-in-out;
  }
  
  
  @media screen and (min-width: 18in) and (max-width: 22in) {
  
    .hamburger {
      position: absolute;
      right: 75px;
      float: right;
      cursor: pointer;
      z-index: 3;
    }
    
    .hamburger span {
      display: block;
      width: 3rem;
      height: .3rem;
      margin-bottom: .35rem;
      background-color: #222222;
      border-radius: .35rem;
      transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
    }
    
  
  }
  
  
  
  @media screen and (min-width: 15in) and (max-width: 18in) {
  
  
    .hamburger {
      position: absolute;
      right: 75px;
      float: right;
      cursor: pointer;
      z-index: 3;
    }
    
    .hamburger span {
      display: block;
      width: 2.7rem;
      height: .3rem;
      margin-bottom: .3rem;
      background-color: #222222;
      border-radius: .35rem;
      transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
    }
  
  }
  
  @media screen and (min-width: 11in) and (max-width: 15in) {
  
  
    .hamburger {
      position: absolute;
      right: 75px;
      float: right;
      cursor: pointer;
      z-index: 3;
    }
    
    .hamburger span {
      display: block;
      width: 2.66rem;
      height: .3rem;
      margin-bottom: .28rem;
      background-color: #222222;
      border-radius: .35rem;
      transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
    }
  
  }
  
    /* End Hamburger Bun*/






    @media screen and (min-width: 6in) and (max-width: 11in) {
  
  
      .hamburger {
        position: absolute;
        right: 75px;
        float: right;
        cursor: pointer;
        z-index: 3;
      }
      
      .hamburger span {
        display: block;
        width: 2.66rem;
        height: .3rem;
        margin-bottom: .28rem;
        background-color: #222222;
        border-radius: .35rem;
        transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
      }
    
    }
    
      /* End Hamburger Bun*/