* {
    box-sizing: border-box;
}


  .header {
    background-image: url('../../images/Systems_Pack\,_Inc._Logo[1526].png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top; 
    background-size: 625px;
    background-attachment: scroll;
    height: 250px;
    text-align: center;
    color: black;
  }
  
  .header h1 {
    font-size: 60px;
    opacity: 0;
  }

  .searchbar{
    padding: 15px;
    float: right;
  }
  
 
  .navbar {
    overflow: hidden;
    background-color: rgb(0, 0, 0);
    position: sticky;
  }

  .navbar a2{
    float: right;
    display: block;
    color: rgb(255, 255, 255);
    text-align: center;
    padding: 15px 20px;
    text-decoration: none;
    text-align: center;
    transition-duration: 750ms;
  }
  
  .navbar a {
    float: right;
    display: block;
    color: rgb(255, 255, 255);
    text-align: center;
    padding: 15px 20px;
    text-decoration: none;
    text-align: center;
    transition-duration: 750ms;
  }
  
  
  .navbar a.right {
    float: left;
  }
  
  .navbar a:hover {
    background-color: #ddd;
    color: black;
  }
  
  .navbar a.active {
    background-color: rgb(95, 95, 95);
    color: white;
  }

  .footer {
    padding: 20px;
    text-align: center;
    background: rgb(201, 201, 201);
  }

  @media screen and (max-width: 700px) {
    .header{
      background-size: 400px;
      background-position-x: center;
      background-position-y: 45%;
    }
    .navbar a {
      float: none;
      width: 100%;
    }
    .navbar a2 {
      float: none;
      width: 100%;
    }
  }