@font-face {
  font-family: Rockboxcond12;
  src: url(Rockboxcond12.ttf);
}

@font-face {
  font-family: Nunito Sans;
  src: url(NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf);
}

:root,
[data-bs-theme=light] {
  --bg-img: url("sc_mesh_tile_blue_lg.png");
  --font-face-primary: Rockboxcond12;
  --bs-body-bg-rgb: rgb(255, 255, 255);
  --bs-primary-rgb: rgb(249, 115, 100);
  --bs-secondary-rgb: rgb(6, 179, 183);
  --bs-link-color-rgb: rgb(6, 179, 183);
  --bs-link-hover-color-rgb: rgb(249, 115, 100);
  --bs-border-color: rgb(0,0,0);
}
[data-bs-theme=dark] {
  --bg-img: url("sc_mesh_tile_purple_lg.png");
  --font-face-primary: Rockboxcond12;
  --bs-body-bg-rgb: rgb(22, 17, 31);
  --bs-primary-rgb: rgb(249, 115, 100);
  --bs-secondary-rgb: rgb(6, 179, 183);
  --bs-link-color-rgb: rgb(6, 179, 183);
  --bs-link-hover-color-rgb: rgb(249, 115, 100);
  --bs-border-color: rgb(255, 255, 255);
}

body {
  background-image: var(--bg-img) !important;
  background: var(--bs-body-bg-rgb);
  font-size: 0.9rem;
  font-family: Nunito Sans;
}

h1, .h1 {
  font-size: 3rem;
  font-family: var(--font-face-primary);
}

h2, .h2 {
  font-size: 2rem;
  font-family: var(--font-face-primary);
}

h3, .h3 {
  font-size: 1rem;
  font-family: var(--font-face-primary);
}

.display-1 {
  font-size: 7rem;
}

.lead {
  font-size: 1.5rem;
}

.tiny-text {
  font-size: 0.75rem;
}

.custom-header-bg, .card-header.custom-header-bg {
  background-color: var(--bs-primary-rgb);
}

.custom-body-bg, .list-group.custom-body-bg {
  background-color: var(--bs-body-bg-rgb) !important;
}

.text-bg-secondary {
  background-color: var(--bs-secondary-rgb) !important;
}

.card-name {
  color: var(--bs-white);
}

.gallery-img {
  max-height: 200px; 
  object-fit: cover;
}

a, ul.nav.nav-item.nav-link {
  color: var(--bs-link-color-rgb) !important;
  text-decoration: underline;
}

a:hover {
  color: var(--bs-link-hover-color-rgb);
}

.underline-none {
  text-decoration: none;
}

.img-thumbnail {
  padding: 0.25rem;
  background-color: var(--bs-body-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  max-width: 100%;
  height: auto;
}

#btn-back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-secondary-rgb);
  --bs-btn-border-color: #000;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary-rgb);
  --bs-btn-hover-border-color: #000;
  --bs-btn-focus-shadow-rgb: 130, 138, 145;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #565e64;
  --bs-btn-active-border-color: #000;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6c757d;
  --bs-btn-disabled-border-color: #6c757d;
}