body {
    background-image: linear-gradient(to bottom, rgba(var(--color-bgmid)),rgba(var(--color-bgdark)));
}

section:not(#header) {
    padding:100px 0
}

.title-container h3 {
    color:rgba(var(--series-color));
    font-weight: normal;
}

.title-container h2 {    
    font-size: 2rem;
}

.title-container h2,
.title-container h3 {
    margin:0
}




#header {
    text-align: center;
    color:white;
}






#summary {
    position: relative;
    margin-top:calc(-5vh - 712px);
}

#summary .container {
    position: relative;
}

#summary img {
    width: 90%;
    max-width: 500px;
}

#summary .button-container {
    border-radius: 50px;
    color:rgba(var(--color-themetext))
}

#summary-quote {
    font-weight: normal;
    color:rgba(var(--color-textdark));
}

#summary .stat-container {
    padding:5px 20px;
    border:1px solid rgba(var(--series-color));
    color:rgba(var(--color-textlight));
    border-radius: 50px;
    background-color: rgba(var(--series-color));
}

#summary .stat-container.alt {
    background-color: rgba(var(--color-bgdark),0.5);
}

#summary .stat-container[data-state="completed"] {
    border-color: rgba(var(--color-sectiongreen));
    background-color: rgba(var(--color-sectiongreen));
}

#summary .stat-container[data-state="ongoing"] {
    border-color: rgba(var(--color-highlight));
    background-color: rgba(var(--color-highlight));
}




#intro {
    margin-top:-150px
}

#intro .container {
    max-width: 800px;
}

#intro-content {
    color:rgba(var(--color-textlight));
    text-align: center;
}








#title {
    position: sticky;
    bottom:0px;
    padding:20px 0;
    background-color: rgba(var(--color-bgdark),0.8);
    backdrop-filter: blur(10px);
    z-index: 1;
    border-top: 1px solid rgba(var(--color-bglight));
    max-height: 100px;
}

#title .title-container {
    width: 95%;
    max-width: 800px;
    margin: auto;
}

#title .title-container h2 {
    margin:0;
}

#title .title-container h3 {
    margin:0;
    color:rgba(var(--color-theme));
    font-size: 1rem;
}

.top #title {
    border-top: 0px solid rgba(var(--color-bglight));
    max-height: 0;
    padding:0px 0;
}









#highlights {
    background-color: rgba(var(--color-bgdark));
    padding:100px 0;
}




#gallery {
    background-image:
        linear-gradient(to bottom, rgba(var(--series-color),0.1)),
        linear-gradient(to bottom, rgba(var(--color-bgdark)));
}






#note .container {
    max-width: 800px;
    min-height: 800px;
}

#note {    
    background-image: 
        linear-gradient(to bottom, rgba(var(--series-color),0.1) 10%, transparent 50% ),
        linear-gradient(to bottom, rgba(var(--color-bgdark)) 10%, transparent 50% ),
        var(--series-texture);
    background-position: center;
    background-size: cover;
    margin-top:-200px
}

#note .container > div {
    line-height: 1.5rem;
}

#note * {
    text-align: center;
    color:rgba(var(--color-textlight));
    filter:drop-shadow(0 0 10px rgba(var(--color-bgdark)))
}