:root {
  --light-gcolor: #2c5f51;
  --dark-gcolor: #233328;
  --darker-gcolor: #122217;
  --light-ycolor: #ffc74f;
  --dark-ycolor: #d66939;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-size: 1.1rem;
  font-family: "Noto Sans TC", sans-serif;
  font-weight: lighter;
  background-color: var(--light-gcolor);
  color: white;
}

b, .fw-bold {
  font-weight: bold;
  color: var(--dark-ycolor);
}

h1, h2, h3, h4, h5 {
  margin-bottom: 0.75rem;
  font-weight: bold;
  color: var(--light-ycolor);
}

h1 {
  filter: drop-shadow(2px 2px 1px black);
}

h6 {
  font-size: 1.1rem;
  color: var(--light-ycolor);
}

a:link:not(.btn, .nav-link), a:visited:not(.btn, .nav-link) {
  color: var(--light-ycolor);
  text-decoration: underline;
}
a:link:not(.btn, .nav-link):hover, a:visited:not(.btn, .nav-link):hover {
  filter: brightness(1.2);
}

.btn, button {
  border-radius: 4px;
  box-shadow: none !important;
}

.btn.btn-anim {
  position: relative;
}
.btn.btn-anim::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 0;
  height: calc(100% + 4px);
  backdrop-filter: hue-rotate(90deg);
  transition: 0.3s;
  pointer-events: none;
}
.btn.btn-anim:hover::after {
  width: calc(100% + 4px);
}

.dark-box {
  background: var(--dark-gcolor);
  border-radius: 4px;
}

#navbar-spaceholder {
  height: 3.5rem;
}

nav.navbar {
  height: 3.5rem;
  background: var(--darker-gcolor);
}
nav.navbar .offcanvas {
  --bs-offcanvas-bg: var(--darker-gcolor);
}

footer {
  background: var(--light-ycolor);
}
footer img {
  height: 3.2rem;
}
footer img.smaller {
  height: 3rem;
}