body {
    --bs-body-font-family: Raleway, sans-serif;
    font-variant-numeric: lining-nums;
}

*[data-bs-theme] {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}
/***********
 Typography
***********/

.text-sentence::first-letter {
    text-transform: uppercase;
}
.fs-smaller {
    font-size: 75%;
}

/***********
 Sizing
***********/

.w-pct-sign {
    display: inline-block;
    width: 0.7125em
}
.mw-img {
    max-height: 400px;
    max-width: 525px;
}

/***********
 Tables
***********/

/* Adjust table fonts for small screen widths */
@media (max-width: 520px) {
    table .fs-1 { font-size: clamp(1em, 5vw, 16em) !important; }
    table .fs-2,
    table .fs-3,
    table .fs-4,
    table .fs-5 { font-size: var(--bs-body-font-size) !important; }
}

/***********
 Navigation
***********/

* {
    scroll-margin-top: 3.5em; /* navbar offset */
}
.navbar, .navbar-brand {
    transition: all 0.5s ease-in-out,
                background-image 0.5s step-start; /* change image on start */
    background: transparent;
}
.navbar-brand {
    height: 4.25rem;
    aspect-ratio: 550/144;
    background-image: url(admetsys_logo.svg),
                      url(admetsys_logo_simple.svg);
    background-size: cover;
}

/* Styles for when scrolled class is applied */
.scrolled .navbar-brand {
    height: 2.5rem;
    background-image: url(admetsys_logo_simple.svg);
}
.scrolled .navbar {
    background-color: var(--bs-body-bg);
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
}

/* When navigation items are displayed as a drop-down, top pad to vertically
   separate from logo */
.navbar-collapse:is(.collapsing, .show) {
    padding-top: 0.75rem;
}

/* When the page is not scrolled, the navbar background is transparent.
   The responsive navbar drop-down menu (for small screen sizes) is harder to
   read on a transparent background, so when expanding the menu, give the navbar
   the same background color as if the page were scrolled. */
:not(.scrolled) .navbar:has(.navbar-toggler[aria-expanded=true]) {
    background-color: var(--bs-body-bg);
}

/***********
 Intro
***********/

.btn {
    --bs-btn-font-size: 60%;
    --bs-btn-color: rgba(255,255,255,0.75);
    --bs-btn-border-color: rgba(255,255,255,0.5);
    --bs-btn-border-width: 2px;
    --bs-btn-hover-color: white;
    --bs-btn-hover-bg: rgba(255,255,255,0.5);
}

#intro {
    --medium-blue: #4455dd;
    --dark-blue: #223982;
    color: white;
    background: linear-gradient(var(--medium-blue), var(--dark-blue));
    overflow: hidden;
    position: relative; /* position to contain overflow */
}
.lyric {
    --header-height: 5rem;
    position: absolute;
    top: calc(var(--header-height) + (100vh - var(--header-height)) * 0.4);
    transform: translate(-50%, -50%);
}
.link {
    position: absolute;
    bottom: 20vh;
    transform: translate(-50%, -50%);
}
.reveal {
    --duration: 3.5s;
    --start: 0.25s;
    opacity: 0;
    animation: fade-in-out 1 var(--duration) ease-in forwards;
    animation-delay: calc(var(--duration) * var(--index) + var(--start));
}
.reveal.stay { animation-name: fade-in; }

.reveal:nth-of-type(1) { --index: 0; }
.reveal:nth-of-type(2) { --index: 1; }
.reveal:nth-of-type(3) { --index: 2; }
.reveal:nth-of-type(4) { --index: 3; }
.reveal:nth-of-type(5) { --index: 4; }
.reveal.stay:nth-of-type(1) { --index: 5; }
.reveal.stay:nth-of-type(2) { --index: 6; }

@keyframes fade-in {
    0%   { opacity: 0; }
    25%  { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes fade-in-out {
    0%   { opacity: 0; }
    25%  { opacity: 1; }
    85%  { opacity: 0.9; }
    100% { opacity: 0; }
}

/***********
 Lights
***********/

@keyframes float-up {
    0%   { opacity: 0; top: 100vh; }
    25%  { opacity: 0.5; }
    50%  { opacity: 0.3; top: 0vh; }
    75%  { opacity: 0.5; }
    100% { opacity: 0; top: -100vh; }
}
.light {
    position: absolute;
    width: 0px;
    background-color: white;
    box-shadow: #e9f1f1 0px 0px 20px 2px;
    opacity: 0;
    top: 100vh;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    animation: float-up 1s infinite linear;
}
.x1 { animation-duration: 4.0s; transform: scale(1.0); }
.x2 { animation-duration: 7.0s; transform: scale(1.6); left: 15%; }
.x3 { animation-duration: 2.5s; transform: scale(0.5); left: -15%; }
.x4 { animation-duration: 4.5s; transform: scale(1.2); left: -34%; }
.x5 { animation-duration: 8.0s; transform: scale(2.2); left: -57%; }
.x6 { animation-duration: 3.0s; transform: scale(0.8); left: -81%; }
.x7 { animation-duration: 5.3s; transform: scale(3.2); left: 37%; }
.x8 { animation-duration: 4.7s; transform: scale(1.7); left: 62%; }
.x9 { animation-duration: 4.1s; transform: scale(0.9); left: 85%; }