:root {
    --story-background: transparent;
    --story-color: white;
    --story-font-weight: 300;
    --story-text-size: 16px;
    --story-h1-size: 45px;
    --story-h3-size: 32px;
    --story-char-weight-1: 500;
    --story-char-weight-2: 400;
    --story-font: 'Source Sans 3';
}

#StoryPage {
    position: relative;
}

#StoryPage [data-animate-block] {
    opacity : 0;
}

#StoryPage [data-animate-block-left] {
    opacity : 0;
}

#StoryPage [data-animate-block-right] {
    opacity : 0;
}

#story-content, #chapter-index {
    transition: all 0.3s ease;
}

#story-content a, #chapter-index a {
    text-decoration: underline;
}

#story-content a:focus,
#story-content a:hover, 
#chapter-index a:focus, 
#chapter-index a:hover {
    color : var(--color-1);
    text-decoration: none;
} 

#story-content, #chapter-index {
    color: var(--story-color);
    font-weight: var(--story-font-weight);

}

#story-content > section {
    margin-bottom: 5rem;

}

#story-content strong {
    font-weight: calc(var(--story-font-weight) + 100);
}

#story-content *, #chapter-index * {
    color: inherit;
    font-weight: inherit;
    font-family: 'Source Sans 3', 'Inter', sans-serif;
    line-height: 1.5;
}

.portrait-center {
    max-width: 300px; 
    margin : var(--vspace-0_5) auto var(--vspace-1) auto;
    display: block;
}

.portrait-right {
    max-width: 300px;
    float : right;
    margin : var(--vspace-0_5) 0 var(--vspace-1) var(--vspace-0_875);

}

.portrait-left {
    max-width: 300px;
    float : left;
    margin : var(--vspace-0_5) var(--vspace-0_875) var(--vspace-1) 0;
}

/* #StoryPage h1 {
    font-size: var(--story-h1-size);
} 


#StoryPage h2 {
    font-size: var(--story-h2-size);
}  */

.margin-top-lg-70 {
    margin-top: 7rem;

}

.margin-sides-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.margin-vertical-none {
    margin-top: auto !important;
    margin-bottom: auto !important;
}
@media screen and (max-width: 1200px) {
    .margin-top-md-0 {
        margin-top: 0;
    }
}

@media screen and (max-width: 800px) {
    .margin-top-tab-0 {
        margin-top: 0;
    }
}




@media screen and (max-width: 600px) {
    .margin-top-mob-0 {
        margin-top: 0;
    }

}


.story-dialogue {
    font-weight: var(--story-char-weight-2);
}

.appendLink {
    font-size: 2rem;
}


ul.disc.custom-timeline-GMD li::before {
    background     : #4E6E81;
}

.Michael {
    color: #FF3333 !important;
    font-weight: var(--story-char-weight-2) !important;
}

.Kelsi {
    color: #0033FF !important;
    font-weight: var(--story-char-weight-2) !important;
}

.Cherie {
    color: #C600A9 !important;
    font-weight: var(--story-char-weight-2) !important;
}
.Kenzie {
    color: #FFB3B3 !important;
    font-weight: var(--story-char-weight-2) !important;
}
.Lena {
    color: #66FFFA !important;
    font-weight: var(--story-char-weight-2) !important;
}

.Gina {
    color: #FF764D !important;
    font-weight: var(--story-char-weight-2) !important;
}
.Rick {
    color: #0033FF !important;
    font-weight: var(--story-char-weight-2) !important;
}
.Milena {
    color: #59FF00 !important;
    font-weight: var(--story-char-weight-2) !important;
}
.Ned {
    color: #FFFF33 !important;
    font-weight: var(--story-char-weight-2) !important;
}
.Jen {
    color: #FF5733 !important;
    font-weight: var(--story-char-weight-2) !important;
}
.Sherrie {
    color: #E63374 !important;
    font-weight: var(--story-char-weight-2) !important;
}

.Jenny {
    color: #FF9090 !important;
    font-weight: var(--story-char-weight-2) !important;
}

.Colette {
    color: #0033FF !important;
    font-weight: var(--story-char-weight-2) !important;
}

.Adrian {
	color: transparent;
	-webkit-text-stroke: 1px yellow;
    text-shadow: 0 0 0 #fff;
}

.Robin {
    color: #f79c2a !important;
    font-weight: var(--story-char-weight-2) !important;
}

.Calvert {
    color: #b700ff !important;
    font-weight: var(--story-char-weight-2) !important;
}
.ticker-taker1 {
    color: #41ae3d !important;
    font-weight: var(--story-char-weight-2) !important;
}


.Kelsi-Scream {
    color: #0033FF !important;
    font-weight: var(--story-char-weight-2) !important;
    font-size: 7rem;
    font-family: 'StickbarMetal', sans-serif !important;
}


.Boyhood-Fitness {
    color: #ff6347 !important;
    font-weight: var(--story-char-weight-2) !important;
}


.ELF-Elf {
    background-color: #BEF487;
    background-image: linear-gradient(to right, #D4FC79 0%, #BEF487 100%);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    background-clip: text;
    font-weight: 500;
}

.ELF-You {
    color: #F85032 !important;
    font-weight: 500;
}

.GMD-Jake {
    color: #FF0303 !important;
    /* Red #FF0000 */
    /* Tomato Red #FF6347!  */
    /* Old Blue #32A4E3 */
    /* Vibrant yellow #FFD700 */
    font-weight: var(--story-char-weight-2);
}

.GMD-Bailey {
    color: #FFCF96 !important;
    font-weight: var(--story-char-weight-2);
}

.MW-Girl {
    color: #44FFF4 !important;
    font-weight: var(--story-char-weight-2);
}

.MW-Wolf {
    color: #c96a32 !important;
    font-weight: var(--story-char-weight-2);
}

.DIS-Birdie {
    color: #0ED17C !important;
    font-weight: 300;
}

.DIS-Joshua {
    color: #f01414 !important;
    font-weight: 300;
}

.GN-Tom {
    color: #f77fc6 !important;
    font-weight: 300;
}

.GN-Mom {
    color: #27c3f3 !important;
    font-weight: 300;
}

.GN-Dad {
    color: #f7f169 !important;
    font-weight: 300;
}

.E-Arabella {
    color: #e43b2f !important;
    font-weight: var(--story-char-weight-2);
}

.E-Emma {
    color: #33cccc !important;
    font-weight: var(--story-char-weight-2);
}

.E-Gregory {
    color: #339966 !important;
    font-weight: var(--story-char-weight-2);
}

.E-Vivienne {
    color: #ffcc99 !important;
    font-weight: var(--story-char-weight-2);
}

.E-Henry {
    color: #3366ff !important;
    font-weight: var(--story-char-weight-2);
}

.N-Pristine {
    color: #336699 !important;
    font-weight: var(--story-char-weight-1) !important;
}


.PAF-Jaime {
    color: #ffa751 !important;
    font-weight: var(--story-char-weight-2) !important;
}

.PAF-Vanessa {
    color: #FF0844 !important;
    font-weight: var(--story-char-weight-2)!important;
}

.PAF-Dean {
    color: #86AB89 !important;
    font-weight: var(--story-char-weight-2)!important;
}

.PAF-Drew {
    color: #a811da !important;
    font-weight: var(--story-char-weight-2) !important;
}

.PAF-Damian {
    color: #FFE259 !important;
    font-weight: var(--story-char-weight-2) !important;
}

.PAF-Sam {
    color: #BBD2C5 !important;
    font-weight: var(--story-char-weight-2) !important;
}

.PAF-Jax {
    color: #fc2c2c !important;
    font-weight: var(--story-char-weight-2) !important;
}

.PAF-Tyrone {
    color: #508D4E !important;
    font-weight: var(--story-char-weight-2) !important;
}

.PAF-Shamika {
    color: #982B1C !important;
    font-weight: var(--story-char-weight-2) !important;
}

.PAF-Rico {
    color: #914F1E !important;
    font-weight: var(--story-char-weight-2) !important;
}

.PAF-Malik {
    color: #BEC6A0 !important;
    font-weight: var(--story-char-weight-2) !important;
}

.PAF-Vince {
    color: #e23b9d !important;
    font-weight: var(--story-char-weight-2) !important;
}

.PAF-Alison {
    color: #DC8449 !important;
    font-weight: var(--story-char-weight-2) !important;
}

.PAF-Bob {
    font-family: 'SpaceGrotesk', sans-serif;
    font-weight: var(--story-char-weight-2) !important;
}


.story-elf-1 p {
    font-weight: 400;
}

.custom-story-button {
    font-size: 20px;
    line-height: calc(var(--btn-height) - 4px);
    height: var(--btn-height);
    margin-left: auto;
    margin-right: auto;
    display: block;
    text-align: center;
    text-decoration: none !important;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 60px;
}

.story-vid {
    margin-bottom: var(--vspace-1);
}

/* .typewriter {
    border-right: 5px solid;
    white-space: nowrap;
    overflow: hidden;
    animation: 
        typing 2s steps(18),
        cursor 0.4s step-end infinite alternate;

} */

/* @keyframes cursor {
    50% {
        border-color: transparent;
    }
}

@keyframes typing {
    from {width: 0;}
} */

.grotesk * {
    font-family: 'Space Grotesk' !important;
}

#chapter-index {
    padding-top: 7rem;
    padding-bottom: 7rem;
    border-bottom: white;
}

.index-title {
    font-family: 'Source Sans 3', 'Inter', sans-serif; 
    color: var(--story-color);
    font-weight: var(--story-font-weight);
}


.blurred-text {
    filter: blur(5px);


}

.Boyhood-Header {
    font-family: 'League Spartan', sans-serif !important;
    
}

.centralized {
    margin-left: auto;
    margin-right: auto;
}