.inner-div {
  text-align: center; 
}

.container {
  display: flex; 
  justify-content: flex-start; 
    position: sticky;
    place-content: center;
    grid-column-gap: 140px;

}


.button {
    padding: 5px;
    border: 1px solid #ccc;
    height:200px;
    width:200px;
    position: sticky;
  padding: 10px 20px;
  background-color: dodgerblue;
    color: white;

    font-family: inherit;
  border-radius: 20px;
    font-size: 50px;
    justify-content: center;
    text-align: center;
     display;align-content: center;
align-items: center;
  cursor: pointer;
  border: 1px solid #00bfff;
    padding-left: 20px;
}


.button2 {

    border: 1px solid #ccc;
    height:70px;
    width:150px;
    position: sticky;

  background-color: blue;
    color: white;
    font-family: monospace;
  border-radius: 20px;
    font-size: 10px;
    justify-content: center;
    text-align: center;
     display;align-content: center;
align-items: center;
  cursor: pointer;
  border: 1px solid #00bfff;

}


@media (max-width: 828px) {
  .button {
    width: 80px;
    height: 80px;
    font-size: 28px;
        display: inline-block;
      text-align: center
  }
}

@media (max-width: 828px) {
  .container {
   display: flex; 
  justify-content: flex-start; 
    position: sticky;
    place-content: center;
    grid-column-gap: 55px;
  }
}

.button:hover {
  background-color: deepskyblue;
}

body {
    margin: 0; 
    font-family: Arial, sans-serif;
}

.content {
    padding-bottom: 70px; 
}



  .container2 {
        display: flex; 
        justify-content: flex-start; 
        align-items:flex-end; 
            width: 100%;
        height: 150px;
        background-color: dodgerblue;
  position: fixed;
  top: 5%;
  left: 50%;
  transform: translate(-50%, -50%);
      opacity: 100%;
      padding-bottom: 20px;
}

  .container3 {
        display: flex; 
        justify-content: flex-start; 
        align-items:flex-end; 
            width: 100%;
        height: 107px;
        background-color: blue;
      text-decoration-color: white;
  position: fixed;
      padding-left: 15px;
        padding-bottom: 15px;
  top: 5%;
  left: 50%;
  transform: translate(-50%, -50%);
text-align: center;

}


.image {
        height:500px;
        width:600px;
    background-image: url(webpic.png);
    background-repeat:no-repeat;
    background-position: left;
  position: sticky;
}

.image4 {
        height:600px;
        width:700px;
    background-image: url(bank.png);
    background-repeat:no-repeat;
    background-position: left;
  position: sticky;
    padding left: 300px;
}


.image2 {
        height:425px;
        width:367px;
    background-image: url(painting.png);
    background-repeat:no-repeat;
    background-position: left;
  position: sticky;
    padding-right: 200px;
    padding-bottom: 200px;

}

.image3 {
        height:500px;
        width:500px;
    background-image: url(picture.png);
    background-repeat:no-repeat;
    background-position: left;
  position: sticky;
    padding-right: 200px;
    padding-top: 200px;

}

@media (max-width: 828px) {
    .image
      width: 80px;
    height: 80px;
}

.bottom-bar {
    background-color:dodgerblue;
    overflow: hidden; 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    text-align: center;
    padding: 10px 0;
    box-sizing: border-box; 
}


.bottom-bar a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.bottom-bar a:hover {
    background-color: deepskyblue;
}