.buttonsContainer {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-bottom: 10px;
}

.buttonRow {
  display: flex;
  justify-content: flex-start;
  gap: 15px;
}

.button {
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--ifm-global-radius);
  transition:
    transform 0.1s ease,
    background-color 0.3s ease,
    box-shadow 0.3s ease;
  height: 75px;
  flex-grow: 1; /* Allow buttons to grow and fill the available space */
  flex-basis: 0; /* Ensure buttons start with zero width */
  position: relative; /* Ensure the <a> tag can be positioned absolutely */
  box-shadow: var(--button-box-shadow);
}

.button:hover {
  box-shadow: var(--button-hover-box-shadow); /* Use CSS variable */
  transform: translateY(-2px); /* Slight lift effect */
}

.button:active {
  transform: scale(0.95); /* Make the button slightly smaller */
  box-shadow: var(--button-active-box-shadow); /* Pressed effect */
}

.button a {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  position: absolute; /* Position the <a> tag absolutely within the button */
  top: 0;
  left: 0;
}

/* Specific button colors */
.installButton {
  background-color: #28a745; /* Green */
}

.installButton:hover {
  background-color: #218838; /* Darker green */
}

.installWebButton {
  background-color: #6f42c1; /* Purple */
}

.installWebButton:hover {
  background-color: #5a32a3; /* Darker purple */
}

.configureButton {
  background-color: #007bff; /* Blue */
}

.configureButton:hover {
  background-color: #0056b3; /* Darker blue */
}

.sourceCodeButton {
  background-color: #ffc107; /* Yellow */
}

.sourceCodeButton:hover {
  background-color: #e0a800; /* Darker yellow */
}

.shareGuideButton {
  background-color: #6c757d; /* Gray */
}

.shareGuideButton:hover {
  background-color: #5a6268; /* Darker gray */
}

.copyManifestUrlButton {
  background-color: #ff8c00; /* Dark Orange */
}

.copyManifestUrlButton:hover {
  background-color: #e07b00; /* Darker Orange */
}
