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


.button {
    padding: 5px;
    border: 1px solid #ccc;
    height:100%;
    width:100%;
  display: inline-block;
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border-radius: 20px;
    font-size: 27px;
    justify-content: center;
    text-align: center;
     display;align-content: center;
align-items: center;
  cursor: pointer;
  border: 1px solid #00bfff;
    overflow: hidden;
}

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

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


 .button2 {
         padding: 5px;
    border: 1px solid #ccc;
    height:100%;
    width:100%;
  display: inline-block;
  padding: 10px 20px;
  background-color: dodgerblue;
  color: white;
  border-radius: 20px;
    font-size: 27px;
    justify-content: center;
    text-align: center;
     display;align-content: center;
align-items: center;
  cursor: pointer;
  border: 1px solid #00bfff;
    overflow: hidden;
  }

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


@media (max-width: 828px) {
  .button2 {
    width: 30px;
    height: 30px;
    font-size: 14px;
        display: inline-block;
      text-align: center
  }
}


.container {
  display: flex; 
  justify-content: flex-start; 
    position: sticky;
    place-content: center;
    grid-column-gap: 250px;
    padding-top: 50px;

}

.button3 {
    padding: 5px;
    border: 1px solid #ccc;
    height:250px;
    width:250px;
    position: sticky;
  padding: 10px 20px;
  background-color: whitesmoke;
    color: cornflowerblue;

  border-radius: 20px;
    font-size: 29px;
    justify-content: center;
    text-align: center;
     display;align-content: center;
align-items: center;
  cursor: pointer;
  border: 1px solid #808080;
    padding-left: 20px;
}

.button4 {
    padding: 5px;
    border: 1px solid #ccc;
    height:50px;
    width:950px;
    position: sticky;
  padding: 10px 20px;
  background-color: blue;
    color: white;

  border-radius: 20px;
    font-size: 24px;
    justify-content: center;
    text-align: center;
     display;align-content: center;
align-items: center;
  cursor: pointer;
    padding-left: 20px;
}



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

.content {
    padding-bottom: 70px; 
}


.top-nav {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    text-align: end;
    background-color: lightgrey;
    padding: 10px 20px;
    position: fixed;
    top: 0;
    text-align: left;
    
    width: 100%;
    z-index: 100;
    box-sizing: border-box;
}




.bottom-bar {
    background-color:blue;
    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;
}