button {

  outline: none;
  cursor: pointer;
  width: 120px;
  height: 35px;
  background-image: linear-gradient(to top, #D8D9DB 0%, #fff 80%, #FDFDFD 100%);
  border-radius: 18px;
  border: 1px solid #D8D9DD;
  transition: all 0.2s ease;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: grey;
  text-shadow: 0 2px #fff;

}

button:hover {
  box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 3px 3px #CECFD1;
    font-family: "Source Sans Pro", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #C3D9B6;
  text-shadow: 0 1px #fff;
}

button.active,
button:active{

  box-shadow:
  0 4px 3px 1px #FCFCFC,
  0 6px 8px #D6D7D9,
  0 -4px 4px #CECFD1,
  0 -6px 4px #FEFEFE,
  inset 0 0 5px 3px #999,
  inset 0 0 30px #aaa;

  color:#7DBD57;

}


.button-container{
  display: flex;
  gap: 8px; /* Adds space between the buttons */
  flex-direction: column; 

}
.button-container_hor{
  display: flex;
  justify-content: center; /* Centers horizontally */
  gap: 8px; /* Adds space between the buttons */
  flex-direction: row; 

}
.centered-div {
  width: max(0, 800px);      
}