:root {
    --color-cream: #faf9f6;
    --color-red: #d10515;
    --color-gray: #737373;
    --color-dark-gray: #3F3F3F;
}

/*Selection Color*/
::selection {
    background-color: var(--color-red);
    color: #fff;
}

/*Animate Pulse Link*/
.up-down-link {
    animation: jump 1.5s infinite;
}

@keyframes jump {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

.vertical-section {
    height: 83vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Smooth scrolling for the page */
html {
    scroll-behavior: smooth;
}

/* Slider Styles */
.our-story-wrapper {
    position: relative;
    height: 100vh;
    overflow: hidden;
    margin-bottom: 0;
}

.our-story-slider {
    display: flex;
    width: max-content;
}

.our-story-slide {
    flex: 0 0 100vw;
    height: calc(100% - 3.75rem);
    display: flex;
    flex-direction: column;
    position: relative;
}

.year-nav button:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
}

.year-nav button {
    position: relative;
    padding-bottom: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

    .year-nav button:hover {
        color: var(--color-red);
    }

    .year-nav button.active {
        color: red;
        font-weight: bold;
    }

        .year-nav button.active:after {
            background-color: var(--color-red);
        }

/* Ensure footer is accessible after the pinned timeline section */
.footer-bottom {
    position: relative;
    z-index: 1;
    margin-top: 2rem;
}

/* Ensure main content can scroll past the timeline */
main {
    overflow: visible;
}

/* Add space after the timeline wrapper */
.our-story-wrapper {
   
    margin-bottom: 2rem;
}

/* Make year nav scrollable on mobile */
@media (max-width: 768px) {
    .year-nav {
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

        .year-nav::-webkit-scrollbar {
            display: none;
        }

    .year-nav {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}