/* General button styles */
.basic-button,
.basic-button-blue,
.basic-button-w {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  text-decoration: none;
  cursor: pointer;
  font-size: 1.2em;
  transition: var(--transition-fast);
  text-align: center;
}

.basic-button {
  border: 2px solid var(--blue);
  width: 300px;
  height: 52px;
  background: linear-gradient(to left, rgba(255,236,200,0.25) 50%, var(--blue) 50%) right;
  background-size: 200%;
  color: var(--blue);
}

.basic-button-blue {
  border: 2px solid var(--blue);
  width: 300px;
  height: 52px;
  background: linear-gradient(to left, var(--blue) 50%, var(--white) 50%) right;
  background-size: 200%;
	color: var(--white);
}

.basic-button-w {
  border: 2px solid var(--white);
  width: 250px;
  height: 40px;
  background: linear-gradient(to left, rgba(255,236,200,0) 50%, var(--white) 50%) right;
  background-size: 200%;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
	font-size: 1em !important;
}

/* Hover effects for buttons */
.basic-button:hover,
.basic-button-blue:hover,
.basic-button-w:hover {
  background-position: left;
  box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.5);
}

/* Ensure color stays consistent on hover */
.basic-button:hover {
  color: var(--white);
}

.basic-button-blue:hover {
  color: var(--blue);
}

.basic-button-w:hover {
  color: var(--blue);
}

/* Ensure button text color remains appropriate on hover */
.basic-button-blue a,
.basic-button-w a {
  color: var(--white);
}

.basic-button-blue:hover a,
.basic-button-w:hover a {
  color: var(--blue);
}

/* Make button classes work nicely on <a> as well */
.basic-button a,
.basic-button-blue a,
.basic-button-w a {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  color: inherit;
}

/* Center container for 404 actions */
.not-found-actions {
  display: flex;
  justify-content: center;
  margin-top: 25px;
}