/* Custom CSS Styles */
:root {
  --primary-color: #115737;  /* VUW Green */
  --darker-primary-color: #0c3f30;
  --secondary-color: #990808; /* VUW Red */
  --dark-color: #17202A;
  --light-color: #F8F9FA;
}

body {
  font-family: "Lexend Deca", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height: 1.6;
  color: #333;
}

.card {
  margin-bottom: 0 !important;
}

code {
  font-family: "Martian Mono", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 87.5;
  color: var(--dark-color);
  border: var(--darker-primary-color) 1px solid;
  border-radius: 3px;
  padding: 2px;
  background-color: var(--light-color);
}

/* Navbar customization */
.navbar-dark {
  background-color: var(--primary-color) !important;
}

.navbar-brand {
  font-weight: bold;
  font-size: 1.5rem;
}

nav .nav-link.active {
  font-weight: bold;
  color: #dfdfdf !important;
}

.nav-link.active {
  font-weight: bold;
  color: var(--dark-color) !important;
}

/* Hero section */
.hero {
  color: white;
  padding: 0;
  margin-bottom: 30px;
}

.hero div {
  background-color: var(--primary-color);
  padding: 6vh 0;
  min-width: 100%;
}

.hero span {
  min-width: 100%;
  background-color: #909dac;
  padding: 0;
  margin-bottom: 0;
  display: inline-block;
}

.hero h1 {
  font-size: 2.8rem;
  margin-bottom: 20px;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 30px;
  padding: 0 15vw;
}

.hero img {
  max-height: 50vh;
  max-width: 100%;
}

/* Cards */
.card {
  transition: transform 0.3s, box-shadow 0.3s;
  margin-bottom: 20px;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.card-title {
  color: var(--primary-color);
  font-weight: bold;
}

/* Buttons */
.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-primary:hover {
  background-color: var(--darker-primary-color);
  border-color: var(--darker-primary-color);
}

.btn-secondary {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}

.btn-secondary:hover {
  background-color: #b8003b;
  border-color: #b8003b;
}

/* CSS below makes the outlined button green: */

/* .btn-outline-primary {
  --bs-btn-color: var(--primary-color);
  --bs-btn-border-color: var(--darker-primary-color);
  --bs-btn-hover-bg: var(--primary-color);
  --bs-btn-hover-border-color: var(--darker-primary-color);
  --bs-btn-active-bg: var(--primary-color);
  --bs-btn-active-border-color: var(--darker-primary-color);
  --bs-btn-disabled-color: var(--primary-color);
  --bs-btn-disabled-border-color: var(--darker-primary-color);
}

.btn-outline-primary:hover {
  background-color: var(--darker-primary-color);
  border-color: var(--darker-primary-color);
} */

/* Footer */
footer {
  background-color: var(--primary-color) !important;
  width: 100%;
}

main {
  min-height: calc(100vh - 64.4px - 166.4px - 48px - 48px - 24px);
}

footer a {
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
} 

footer p.mb-0 {
  font-weight: 200;
  color: #999;
}

.callout-info {
  --bd-callout-color: var(--bs-info-text-emphasis);
  --bd-callout-bg: var(--bs-info-bg-subtle);
  --bd-callout-border: var(--bs-info-border-subtle);
}

.callout-warning {
  --bd-callout-color: var(--bs-warning-text-emphasis);
  --bd-callout-bg: var(--bs-warning-bg-subtle);
  --bd-callout-border: var(--bs-warning-border-subtle);
}

.callout {
  padding: 0.75rem;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  background-color: var(--bd-callout-bg, var(--bs-gray-100));
  border-left: 0.25rem solid var(--bd-callout-border, var(--bs-gray-300));
}

.accordion-button:not(.collapsed) {
  color: var(--primary-color);
  background-color: rgb(176, 216, 198);
}

.accordion-button:focus {
  border-color: #1f5a3e;
  box-shadow: 0 0 0 0.25rem rgba(61, 163, 102, 0.25);
}

.category-dropdown {
    color: var(--bs-heading-color);
    border: 1px white solid;
    padding: 0.375rem 0.2rem;
}

#category-dropdown option {
    color: rgba(var(--bs-dark-rgb),var(--bs-bg-opacity)) !important;
}

.stat-card {
    background-color: var(--primary-color);
    --bs-text-opacity: 1;
}

.censored {
    background-color: var(--bs-body-color) !important;
}

.censored:hover {
    transition: background-color 0.25s ease !important;
    background-color: transparent !important;
}

.submission-entry {
    width: 60%;
    word-wrap: break-word;
}