@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --primary-color: #274c69;
  --secondary-color: #000;
  --accent1-color: #fff9cc;
  --accent2-color: #4d1c07;
  --subtle-color: #fff;
  --backdrop-color: rgba(39, 76, 105, 0.7);
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

/* Light mode styles (default) */
body
{
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: "Jost", sans-serif !important;
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #333333;
    color: #ffffff;
  }
  /* This targets the modal content, header, and footer */
  .modal-content,
  .modal-header,
  .modal-footer,
  .form-select {
    background-color: #212529; /* A dark Bootstrap background color */
    color: #f8f9fa; /* A light Bootstrap text color */
    border-color: #495057; /* A slightly lighter border for contrast */
  }

  /* This ensures the close button is visible */
  .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
  }

  /* This styles any form inputs inside the modal */
  .modal-body .form-control {
    background-color: #343a40;
    color: #f8f9fa;
    border-color: #495057;
  }
}

.hidden {
  display: none;
}

.room-link:nth-child(odd) {
  background-color: #f8f9fa;
}

.room-link:nth-child(even) {
  background-color: #e9ecef;
}

.room-link:hover
{
  background-color: #0d6efd;
  color: white !important;
}

.room-link:hover .roomDate {
  color: white !important;
}

@media (max-width: 576px) {

  .header-container {
    flex-direction: column;
    align-items: center;
  }

  .logged-in-header {
    flex-direction: column;
    align-items: center;
  }

  .room-link {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .room-link button {
    align-self: flex-end;
    margin-top: 0.5rem;
  }

  .your-rooms {
    flex-direction: column;
  }
}