/* ===== VARIABLES ===== */
:root
{
    --blue:                  #002f6c;
    --gold:                  #ffce00;
    --brand-sand:            #b28200;
    --brand-blue:            #1a3c84;
    --brand-text-shadow:     #454648;
    --bg-none:               none;
    --bs-body-bg:            #fafafa;
    --ng-green:              #008b2c;
    --bs-body-color:         #333333;
    --bs-border-color:       #dee2e6;
    --bs-breakpoint-xs:      240px;
    --bg-transparent:        transparent;
    --brand-font-family:     'Oswald', sans-serif;
    --bs-nav-link-font-size: --bs-body-font-size; /* NEW */
}

/* ===--bs-body-font-size=== BASE STYLES ===--bs-nav-link-font-size=== */
body
{
    font-family:     var(--brand-font-family), serif;
    scroll-behavior: smooth;
}

/* texts -> font-size, font-weight, and text-transform */
/* text -> font-size */
.countdown-box span
{ font-size: 3rem; }

/* text -> font-weight */
.countdown-box small, .navbar-text
{ font-weight: 600 }

.countdown-box span
{ font-weight: 700 }

.countdown-box small
{ text-transform: uppercase }

/* colours -> text, shadow, and background */
/* colours -> text */
.navbar-nav > .nav-item > .nav-link
{ color: var(--bs-nav-link-color); }

.btn-whitestar-countdown
{color: #000000;}

.text-brand-sand,
.countdown-box small,
.navbar-nav > .nav-item > .nav-link:hover,
.navbar-nav > .nav-item > .nav-link.active,
.navbar-nav > .nav-item > .nav-link:active,
.navbar-nav > .nav-item > .nav-link.active:hover .bi,
.navbar-nav > .nav-item > .nav-link:active:hover .bi
{ color: var(--brand-sand); }

.carousel-caption > p,
form .btn-whitestar:hover,
.navbar-nav > .nav-item > .nav-link:hover .bi,
.navbar-nav > .nav-item > .nav-link.active .bi,
.navbar-nav > .nav-item > .nav-link:active .bi,
.navbar-nav > .nav-item > .nav-link.active:hover,
.navbar-nav > .nav-item > .nav-link:active:hover
{ color: var(--bs-body-bg); }

.carousel-caption > h5
{ color: whitesmoke }

.text-brand-blue, .countdown-box span
{ color: var(--brand-blue) !important; }

.text-brand-shadow
{ text-shadow: 2px 3px var(--brand-text-shadow) !important }

/* colours -> background */
.bg-brand-blue, form .btn-whitestar:hover
{ background: var(--brand-blue) !important; }

.carousel-caption
{ background: rgba(26, 60, 132, 0.8) }

.btn-whitestar-countdown
{background: var(--gold);}

.countdown-box div
{background: whitesmoke;}

.btn-whitestar-countdown:hover
{background: var(--brand-sand);}

.carousel .carousel-indicators .active
{ background-color: white !important }

.carousel .carousel-indicators button
{ background-color: var(--ng-green) !important }

/* spacing -> padding, margin, and line-height */
/* spacing -> padding */
.btn-whitestar-countdown
{ padding: 12px 30px; }

.countdown-box div, .carousel-caption, body > footer
{ padding: 20px; }

body > footer
{ padding: 10px; }

/* spacing -> margin */
.logo-container
{ margin-left: 8px; }

.footer-logo
{ margin-right: 8px; }

.countdown-box
{ margin: 20px 0;}

/* spacing -> line-height */
.logo-container
{ line-height: 1 }

/* display */
.navbar-brand, .logo-container, .main-content > .hero
{ display: flex; }

.countdown-box span
{ display: block; }

/* align items */
.navbar-brand, .hero
{ align-items: center; }

/* positions -> position, top, bottom, left, and right */
/* position */
.hero
{ position: relative; }

.star, .wave-bg, .mid-dot
{ position: absolute }

/* top */
.mid-dot
{ top: 0 }

/* left */
.mid-dot
{ left: 0 }

/* opacity */
.reveal
{ opacity: 0 }

.carousel .carousel-indicators button.active
{ opacity: 0.5 }

.star
{ opacity: 0.6 }

.carousel .carousel-indicators button
{ opacity: 0.75 }

.reveal.active
{ opacity: 1 }

/* overflow */
.hero
{ overflow: hidden }

.carousel-item img
{ object-fit: cover }

/* border-radius */
.carousel-caption, .countdown-box div
{ border-radius: 10px }

/* transform */
.reveal
{ transform: translateY(30px) }

.reveal.active
{ transform: translateY(0) }

/* animation */
.star
{
    animation: float 15s infinite ease-in-out;
    fill:      var(--brand-sand);
}

@keyframes float
{
    0%, 100%
    {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    25%
    {
        transform: translateY(-20px) translateX(10px) rotate(5deg);
    }
    50%
    {
        transform: translateY(-40px) translateX(-10px) rotate(-5deg);
    }
    75%
    {
        transform: translateY(-20px) translateX(10px) rotate(5deg);
    }
}

/* transition */
.reveal
{ transition: all 1s ease; }

.navbar-text
{ transition: font-size 0.5s ease; }

.navbar-brand-logo
{ transition: height 0.3s ease; }

.navbar-nav > .nav-item > .nav-link
{ transition: all 0.5s ease; }

/* box-shadow */
.countdown-box div
{ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) }

/* width -> min-width and max-width */
/* width */
.wave-bg, .mid-dot, .carousel-item img
{ width: 100% }

.mid-dot > .star
{ width: 30px }

/* min-width */
.countdown-box div
{ min-width: 120px }

/* height -> min-height and max-height */
/* height */
.mid-dot > .star
{ height: 30px }

.navbar-brand-logo
{ height: 50px; }

.carousel-item
{ height: 500px }

.wave-bg, .mid-dot, .carousel-item img
{ height: 100% }

/* min-height */
.main-content > .hero
{ min-height: 100vh; }

/* flex-direction */
.logo-container
{ flex-direction: column }

/* z-index */
.wave-bg
{ z-index: -1 }

.mid-dot
{ z-index: 1 }

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (min-width: 240px)
{
    /* height */
    .navbar-brand-logo
    { height: 28px; }

    /* ===== TEXT -> FONT-SIZE ===== */
    .navbar
    {
        --bs-navbar-brand-font-size: 0.5rem;
        --bs-nav-link-font-size:     0.5rem
    }

    /* ===== TEXT -> FONT-WEIGHT ===== */
}

@media (min-width: 320px)
{
    /* height */
    .navbar-brand-logo
    { height: 42px; }

    /* ===== TEXT -> FONT-SIZE ===== */
    .navbar
    { --bs-navbar-brand-font-size: 0.85rem;}

    /* ===== TEXT -> FONT-WEIGHT ===== */
}

@media (min-width: 360px)
{
    /* height */
    .navbar-brand-logo
    { height: 45px; }

    /* ===== TEXT -> FONT-SIZE ===== */
    .navbar
    { --bs-navbar-brand-font-size: 0.94rem;}

    /* ===== TEXT -> FONT-WEIGHT ===== */
}

@media (min-width: 768px)
{
    /* height */
    .navbar-brand-logo
    { height: 50px; }

    /* .wave-bg
    { height: 20%; } */
    .carousel-item
    { height: 400px; }

    .countdown-box div
    { min-width: 80px }

    .countdown-box span
    {
        font-size: 2rem;
    }

    .countdown-box span
    {
        font-size: 2rem;
    }

    .carousel-item
    {
        height: 400px;
    }

    /* ===== TEXT -> FONT-SIZE ===== */
    .navbar
    {
        --bs-navbar-brand-font-size: 1rem;
        --bs-nav-link-font-size:     --bs-body-font-size
    }
}

@media (max-width: 768px)
{
    .countdown-box div
    { min-width: 80px }

    .countdown-box span
    {
        font-size: 2rem;
    }

    .carousel-item
    {
        height: 400px;
    }
}

/* Large screens and TVs */
@media (min-width: 1200px)
{
    .carousel-inner > .carousel-item
    { height: 500px; }

    .navbar-brand-logo
    { height: 60px; }

    /* ===== TEXT -> FONT-SIZE ===== */
    .navbar
    { --bs-navbar-brand-font-size: 1.5rem; }
}

@media (min-width: 1400px)
{
    .carousel-inner > .carousel-item
    { height: 550px; }

    /* ===== TEXT -> FONT-SIZE ===== */
    .navbar
    { --bs-navbar-brand-font-size: 1.6rem; }

    .navbar-brand-logo
    {
        height: 70px;
    }
}

@media (min-width: 1600px)
{
    /* ===== TEXT -> FONT-SIZE ===== */
    .navbar
    { --bs-navbar-brand-font-size: 1.8rem; }

    .navbar-brand-logo
    {
        height: 80px;
    }
}

@media (min-width: 1900px)
{
    /* ===== TEXT -> FONT-SIZE ===== */
    .navbar
    { --bs-navbar-brand-font-size: 2rem; }

    .navbar-brand-logo
    {
        height: 90px;
    }
}