:root {
    --theme-blue: #1637e6;
    --theme-indigo: #4d1de5;
    --theme-purple: #890ce4;
    --theme-magenta: #df00e4;
    --theme-pink: #f100a9;
    --theme-lighter-blue: #dde1fe;
    --theme-lighter-yellow: #fef4c1;
    --theme-light-yellow: #f0e186;
    --theme-brown: #403635;
    --theme-black: #281f20;
    --theme-dark-blue: #272c4a;
    --theme-light-blue: #c6cefc;

    --theme-gradient: linear-gradient(135deg, blue, magenta);
}

body { 
    padding-top: 56px; 
    overflow-y: hidden;     /* Prevent scrolling during loading */
    background-color: black;
}

.btn-primary {
    border: none;
    --bs-btn-bg: var(--theme-blue);
    --bs-btn-hover-bg: var(--theme-blue);
    --bs-btn-active-bg: var(--theme-blue);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-bg: var(--theme-blue);
    --bs-btn-disabled-border-color: var(--theme-blue);
    box-shadow: 0 0 6px var(--theme-blue);
}
button.indigo {
    --bs-btn-bg: var(--theme-indigo);
    --bs-btn-hover-bg: var(--theme-indigo);
    --bs-btn-active-bg: var(--theme-indigo);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-bg: var(--theme-indigo);
    --bs-btn-disabled-border-color: var(--theme-indigo);
}

b, strong {
    color: var(--theme-lighter-yellow);
    text-shadow: 0 0 0.25rem var(--theme-lighter-yellow);
}

.left-aligned { margin-left: auto; }
.bg-dark { background-color: #343a40 !important; }
.bg-hero { background-color: #45b06cff; }

/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom: 1.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }


.inline-image {
    display: block;
    float: right;
}
.block-image {
    display: block;
    margin: 1em auto;
    max-height: 300px;
    max-width: 100%;
}
.video-container {
    text-align: center;
    margin: 1em auto;
    max-width: 100%;
}
header {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.header-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.5));
}

#loading-animation {
  position: fixed;
  z-index: 9999 !important;
  background: var(--bs-body-bg);
  width: 100vw;
  height: 100vh;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity 0.5s ease-in-out;
}

#loading-animation .frame {
  font-size: 2rem;
  font-weight: bold;
  position: absolute;
  opacity: 0;
  transition: opacity 0.2s;
}

/* #loading-animation .frame1 {
  animation: frameSwitch 0.5s infinite;
}

#loading-animation .frame2 {
  animation: frameSwitch2 0.5s infinite;
}

@keyframes frameSwitch {
  0% { opacity: 1; }
  49% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes frameSwitch2 {
  0% { opacity: 0; }
  49% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 1; }
} */