body {
  background: #e5c66a;
  color: #6e0000;
  margin-top: 5rem;
}

h1, h2, h3, h4, h5, h6 {
  color: #6e0000;
}

.bg-steel {
  background-color: #6e0000;
}

.container {
  color: #6e0000;
}
.site-header .navbar-nav .nav-link {
  color: #e5c66a;
}

.site-header .navbar-nav .nav-link:hover {
  color: #e5c66a;
}

.site-header .navbar-nav .nav-link.active {
  font-weight: 500;
}

.content-section {
  background: #e5c66a;
  padding: 10px 20px;
  border: 1px solid #6e0000;
  border-radius: 3px;
  margin-bottom: 20px;
  color: #6e0000;
}

.article-title {
  color: #6e0000;
}

.list-group {
  color: #6e0000;

}

.list-group-item{
  color: #6e0000;
}

a.article-title:hover {
  color: #428bca;
  text-decoration: none;
}

.article-content {
  white-space: pre-line;
    color: #6e0000;
}

.article-img {
  height: 65px;
  width: 65px;
  margin-right: 16px;
}

.article-metadata {
  padding-bottom: 1px;
  margin-bottom: 4px;
  border-bottom: 1px solid #6e0000
}

.article-metadata a:hover {
  color: #333;
  text-decoration: none;
}

.article-svg {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}

.account-img {
  height: 125px;
  width: 125px;
  margin-right: 20px;
  margin-bottom: 16px;
}

.account-heading {
  font-size: 2.5rem;
}
    /* Style the checkbox to appear bigger */
  .form-check-input {
      width: 75%;
      height: auto;
      margin: 0 auto;
      transform: scale(2); /* You can adjust the scale value to make it bigger if needed */
  }

.quadro-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 60vw; /* Adjust this if you want the quadrant to be bigger or smaller */
}

.quadro-card {
    background: #6e0000;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px; /* Adjust this for card height */
    text-align: center;
    overflow: hidden; /* Ensures that the anchor tag covers the whole card */
    transition: box-shadow 0.3s, transform 0.3s;
    perspective: 1500px; /* This gives the feeling of depth, enhancing the 3D effect */

}

.card-link {
    color: #e5c66a;
    font-size: 1.5em;
    text-decoration: none;
    transition: color 0.3s ease;
    display: block; /* Makes the entire card clickable */
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: text-shadow 0.3s;
    text-shadow: none; /* Removes the glow until hover */
    transform: perspective(500px) translateZ(0); /* Initial state, flat */

}

.card-link:hover {
    color: #FFD700; /* Gold color against royal blue */
    text-decoration: none;
    background: #4169E1; /* Royal Blue */
    box-shadow: 0 0 10px #FFD700, 0 0 20px #FFD700, 0 0 30px #FFD700, 0 0 40px #4169E1, 0 0 70px #4169E1, 0 0 80px #4169E1, 0 0 100px #4169E1, 0 0 150px #4169E1;
    transform: scale(2.05); /* Slightly enlarges the card on hover */

}

.guardian-table {
  background-color: white;
  color: #6e0000; /* Guardian Burgundy */
  border-collapse: collapse;
}

.guardian-table th,
.guardian-table td {
  padding: 0.5rem;
  text-align: center;
  border: 1px solid #6e0000; /* Border color */
}

.guardian-table thead {
  background-color: #6e0000; /* Guardian Burgundy header */
  color: #e5c66a; /* Guardian Gold text */
}

@media (max-width: 768px) {
  .guardian-table th:first-child,
  .guardian-table td:first-child {
    width: 30%; /* Larger width for the first column on smaller screens */
  }
  .align-items-center {
        display: flex;
        flex-wrap: wrap;
    }
}

@media (min-width: 769px) {
  .guardian-table th:first-child,
  .guardian-table td:first-child {
    width: 40%; /* Larger width for the first column on larger screens */
  }
}


.table-padding {
    margin-top: 20px; /* Adjust this value as needed for more space */
}

.btn-guardian-save {
    background-color: #6e0000; /* Guardian Burgundy */
    color: #e5c66a; /* Guardian Gold */
    border-color: #e5c66a; /* Guardian Gold */
    width: 100%;
    margin-bottom: 10px; /* Add some margin below the button on small screens */
}

.btn-guardian-save:hover {
    background-color: #e5c66a; /* Guardian Gold */
    color: #6e0000; /* Guardian Burgundy */
    border-color: #6e0000; /* Guardian Burgundy */
}

/* Style for input fields inside the table */
.guardian-table input {
    max-width: 80px; /* Limiting the width of input fields */
    text-align: center;
}

/* For Chrome, Safari, Edge, Opera */
.guardian-table input::-webkit-outer-spin-button,
.guardian-table input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* For Firefox */
.guardian-table input[type=number] {
    -moz-appearance: textfield;
}

.centered-image {
    display: block; /* Makes the image a block-level element */
    margin-left: auto; /* Auto margin to the left */
    margin-right: auto; /* Auto margin to the right */
}

.save-column {
    width: auto; /* Adjust as needed */
    min-width: 80px; /* Adjust as needed */
}

.day-column {
    padding-left: 20px; /* Adjust as needed */
    padding-right: 20px; /* Adjust as needed */
}

.day-input {
    min-width: 20px; /* Adjust the width as needed to fit 4 digits */
}

.list-group-item {
    background-color: #6e0000; /* Guardian Burgundy */
    color: #e5c66a; /* Guardian Gold */
    text-align: center; /* Center the text */
}

.list-group-item a {
    color: #e5c66a; /* Guardian Gold */
}

.list-group-item a:hover {
    color: #FFD700; /* Lighter gold on hover */
    text-decoration: none; /* Remove underline on hover */
}