/* static/css/base.css */

.pagebanner {
    height: 500px;
    width: auto;
}

.btn-primary {
    color: #fff; /* Keep text white for readability */
    background-color: #A1021A; /* Brand dark red as the button background */
    border-color: #A1021A; /* Same for the border */
}

.btn-primary:hover {
    color: #fff;
    background-color: #D42A0F; /* A lighter red on hover for a subtle effect */
    border-color: #D42A0F;
}

.btn-primary:focus,
.btn-primary.focus {
    color: #fff;
    background-color: #A1021A;
    border-color: #82000F;
    box-shadow: 0 0 0 0.2rem rgba(161, 2, 26, 0.5); /* A subtle glow for focus */
}

.btn-primary:disabled,
.btn-primary.disabled {
    color: #fff;
    background-color: #A1021A;
    border-color: #A1021A;
}

  .btn-discord {
    background-color: #5865F2; /* Discord's brand purple */
    color: #ffffff; /* White text color */
    border: none; /* No border for a cleaner look */
  }

  .btn-discord:hover {
    background-color: #4752c4; /* A slightly darker purple for hover effect */
    color: #ffffff;
  }

/* Ensure all primary buttons are full-width on small devices */
@media (max-width: 576px) {
  .btn-primary, .btn-discord {
    display: block;
    width: 100%;
    margin-top: 10px; /* Optional: adds some space between stacked buttons */
  }
}