/* Emoji Footprint Animation */
.emoji-footprint {
    position: absolute;
    font-size: 1.6rem;
    pointer-events: none;
    animation: emojiFade 1s ease-out forwards;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    z-index: 9999;
    text-shadow:
            0 0 4px #ff00bf,
            0 0 8px #ff80df,
            0 0 12px #ffccff;
}

@keyframes emojiFade {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.7;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

/* Light Mode (Default) */
:root {
    --bs-primary: #ff47a3;     /* Hot Pink */
    --bs-secondary: #7367f0;   /* Lavender */
    --bs-success: #53e69d;     /* Minty Green */
    --bs-info: #51caff;        /* Sky Blue */
    --bs-warning: #ffd53e;     /* Sunshine Yellow */
    --bs-danger: #ff5666;      /* Coral Red */
    --bs-light: #fff7fa;       /* Almost-white Pink */
    --bs-dark: #3b233d;        /* Deep Purple */

    /* Quirk it up further */
    --bs-body-bg: #fff7fa;
    --bs-body-color: #3b233d;
    --bs-link-color: #ff47a3;
    --bs-link-hover-color: #7367f0;
    --bs-border-color: #ffb8e1;
}

/* Dark Mode (Bootstrap's preferred way) */
@media (prefers-color-scheme: dark) {
    :root {
        --bs-primary: #ff9cd7;     /* Pastel Pink */
        --bs-secondary: #b39afd;   /* Light Lavender */
        --bs-success: #8fffd9;     /* Lighter Mint */
        --bs-info: #90e7ff;        /* Pastel Sky Blue */
        --bs-warning: #fff4b1;     /* Pale Yellow */
        --bs-danger: #ffb1b8;      /* Soft Coral */
        --bs-light: #2a102d;       /* Deep Purple-Black */
        --bs-dark: #fff7fa;        /* Reverse for dark backgrounds */

        --bs-body-bg: #2a102d;
        --bs-body-color: #fff7fa;
        --bs-link-color: #ff9cd7;
        --bs-link-hover-color: #b39afd;
        --bs-border-color: #6e3a6e;
    }
}

/* Top Navigation Bar Styles */
main {
    margin-top: 20px;
}

.navbar-brand {
    font-weight: bold;
}

.navbar-text {
    font-size: 0.9rem;
}

@media (max-width: 992px) {
    .navbar-text {
        display: none;
    }
}