@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Luckiest+Guy&family=Short+Stack&display=swap');

/* normal bfc site stuff */

body {
  font-family: "lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.navbar-nav {
  font-size: 1.2em;
}

.site-hero {
  background-size: cover;
  background-position: center;
}

.container-content {
  padding: 50px 50px;
  border-radius: 25px;
}

@media screen and (max-width: 768px) {
  .container-content {
    width: 90%;
    padding: 25px 25px;
  }
}

@media screen and (max-width: 576px) {
  .container-content {
    width: 95%;
  }
}

h1, h2, h3, h4, div, section {
  scroll-margin-top: 90px;
}

/* utility classes */

.lato {
  font-family: "lato", sans-serif;
}

.luckiest-guy {
  font-family: "luckiest guy", serif;
}

.short-stack {
  font-family: "short stack", cursive;
  letter-spacing: -2px;
}

.list-padded li {
  padding-bottom: 1rem;
}

.drop-shadow {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}

.drop-shadow-sm {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

/* bfc text colors */

.text-teal {
  color: #16b9ac !important;
}

.text-blue {
  color: #00c4ee !important;
}

.text-pink {
  color: #dc4583 !important;
}

.text-orange {
  color: #fea92b !important;
}

.text-darkblue {
  color: #2e5cad !important;
}

.text-gold {
  color: #c90 !important;
}

.text-bronze {
  color: #cd7f32 !important;
}

/* bfc background colors */

.bg-teal {
  background-color: #00b4a5;
}

.bg-blue {
  background-color: #00bbe5;
}

.bg-orange {
  background-color: #ff9c00;
}

.bg-pink {
  background-color: #f66aa2;
}

.bg-gold {
  background-color: #c90;
}

.bg-bronze {
  background-color: #cd7f32;
}

/* bfc coloring alternating <b>, <strong> */

.bfc strong:nth-child(3n+0), .bfc b:nth-child(3n+0) {
  color: #00c4ee;
}

.bfc strong:nth-child(3n-1), .bfc b:nth-child(3n-1) {
  color: #16b9ac;
}

.bfc strong:nth-child(3n-2), .bfc b:nth-child(3n-2) {
  color: #dc4583;
}

/* bfc coloring alternating <a> */

.bfc a:not(.btn):nth-child(3n+0) {
  color: #dc4583;
}

.bfc a:not(.btn):nth-child(3n-1) {
  color: #16b9ac;
}

.bfc a:not(.btn):nth-child(3n-2) {
  color: #00c4ee;
}

.bfc a:not(.btn):nth-child(3n+0):active,
.bfc a:not(.btn):nth-child(3n+0):hover,
.bfc a:not(.btn):nth-child(3n+0):focus,
.bfc a:not(.btn):nth-child(3n+0):visited {
  color: #f279a6;
}

.bfc a:not(.btn):nth-child(3n-1):active,
.bfc a:not(.btn):nth-child(3n-1):hover,
.bfc a:not(.btn):nth-child(3n-1):focus,
.bfc a:not(.btn):nth-child(3n-1):visited {
  color: #67c865;
}

.bfc a:not(.btn):nth-child(3n-2):active,
.bfc a:not(.btn):nth-child(3n-2):hover,
.bfc a:not(.btn):nth-child(3n-2):focus,
.bfc a:not(.btn):nth-child(3n-2):visited {
  color: #ff9c00;
}

/* bfc button (.btn) colors */

.btn-teal {
  color: #fff;
  background-color: #00b4a5;
  font-weight: bold;
}

.btn-teal:hover,
.btn-teal:focus,
.btn-teal:focus-visible,
.btn-teal:active,
.btn-teal:active:focus-visible {
  color: #fff !important;
  border-color: #009286 !important;
  background-color: #009286 !important;
}

.btn-blue {
  color: #fff;
  background-color: #00bbe5;
  font-weight: bold;
}

.btn-blue:hover,
.btn-blue:focus,
.btn-blue:focus-visible,
.btn-blue:active,
.btn-blue:active:focus-visible {
  color: #fff !important;
  border-color: #009fc3 !important;
  background-color: #009fc3 !important;
}

.btn-orange {
  color: #fff;
  background-color: #ff9c00;
  font-weight: bold;
}

.btn-orange:hover,
.btn-orange:focus,
.btn-orange:focus-visible,
.btn-orange:active,
.btn-orange:active:focus-visible {
  color: #fff !important;
  border-color: #d48300 !important;
  background-color: #d48300 !important;
}

.btn-pink {
  color: #fff;
  background-color: #f66aa2;
  font-weight: bold;
}

.btn-pink:hover,
.btn-pink:focus,
.btn-pink:focus-visible,
.btn-pink:active,
.btn-pink:active:focus-visible {
  color: #fff !important;
  border-color: #ef3284 !important;
  background-color: #ef3284 !important;
}

/* situational helpers */

.blur-10 {
  filter: blur(10px);
}

.card-bg {
  background-size: cover;
  background-position: 50% 50%;
}

.square-image {
  position: relative;
  overflow: hidden;
  padding-bottom: 100%;
}

.square-image img {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  top: 50%;
  left: 50%;
  transform: translatex(-50%) translatey(-50%);
}

.table-transparent {
  --bs-table-bg: transparent !important;
}