/* This file is for styling the Quarto website.
 * Add custom CSS rules here.
 */

/* Sets plot backgrounds to transparent */
.html-widget-container {
  background-color: transparent !important;
}

/* * This is an optional rule to make sure text is readable on different themes.
 * Quarto's built-in themes should handle this, but you can override if needed.
 */
.quarto-dark-mode-enable .plotly,
.quarto-dark-mode-enable .html-widget {
  color: black !important;
}

.quarto-dark-mode .plotly,
.quarto-dark-mode .html-widget {
  color: white !important;
}

/*-- scss:rules --*/
.navbar-brand,
.navbar-logo {
  /* adjust container if needed: vertical align */
  align-items: center;
}

.navbar-brand img,
.navbar-logo img {
  max-height: 75px !important;  // scale up/down
  width: auto !important;
  /* if you want increased padding
     padding-top: 5px;
     padding-bottom: 5px; */
}

h1.title {
  text-align: center;
}

h1.text-center {
  font-family: var(--bs-font-sans-serif);
  font-size: 2.5rem;
  color: var(--bs-primary);
  margin-bottom: 1.5rem;
}

.card-hover {
  transition: background-color 0.3s ease; /* Smooth transition for hover */
}

.card-hover:hover {
  background-color: darkorange !important; /* Changes to dark orange on hover */
}

.card-link {
  display: inline-block; /* Makes the <a> tag only as wide as the card */
  text-decoration: none; /* Redundant with text-decoration-none class, but ensures consistency */
}