section{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.banner .background img{
    object-position: 0 20%;
}
section#overview{
    background-color: var(--secondary);
}
section#overview *:not(h3){
    color: var(--text-dark-background);
}
section#overview #timeline * {
    color: var(--text-dark-background);
}
section#overview h3{
    color: var(--accent);
    text-shadow: 0 0 1px black;
}
section#overview > * {
    max-width: var(--content-max-width);
}
section#overview h2{
    border-bottom: var(--underline-dark-background);
    color: var(--text-dark-background);
}
section#meditation p{
    max-width: var(--content-max-width);
}
section#meditation h2{
    border-bottom: var(--underline-light-background);
}
section#programs .content{
    display: flex;
    margin: auto;
    width: 100%;
    padding: var(--container-padding);
    max-width: var(--content-max-width);
}
section#programs .content *{
    padding: 0;
}
section#programs .content ul{
    display: flex;
    flex-direction: column;
    gap: calc(4 * var(--gap));
}
section#programs .content li{
    color: var(--text-light-background);
}
section#programs .content li h2{
    font-size: 35px;
}

@media only screen and (max-width: 1024px) {
    section#programs .content li h2{
        font-size: 30px;
    }
}

@media only screen and (max-width: 600px) {
    section#programs .content li h2{
        font-size: 25px;
    }
    section#overview #structure{
        grid-template-columns: 1fr !important;
    }
}
section#overview #structure{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(var(--gap) * 3);
    margin: 0 1em;
}
section#overview #structure div{
    background-color: var(--primary);
}
section#overview #structure div{
    color: var(--text-dark-background);
    padding: 1em;
}
section#overview #structure div h4{
    color: var(--accent);
}
section#overview #timeline{
    display: grid;
    --width: 3vw;
    grid-template-columns: repeat(2, var(--width)) 1fr repeat(2, var(--width)) 1fr repeat(2, var(--width)) 1fr repeat(2, var(--width)) 1fr repeat(2, var(--width)) 1fr repeat(2, var(--width)) 1fr
}
section#overview #timeline > ul{
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
}
section#overview #timeline > ul:first-child > li{
    font-size: var(--font-size-h2);
}
section#overview #timeline > ul:first-child > li:first-child{
    grid-column: 2 / 5;
    text-align: center;
}
section#overview #timeline > ul:first-child > li:nth-child(2){
    grid-column: 8 / 11;
    text-align: center;
}
section#overview #timeline > ul:first-child > li:nth-child(3){
    grid-column: 14 / 17;
    text-align: center;
}
section#overview #timeline > ul:nth-child(2) > li > span.break{
    background-color: unset !important;
    background: repeating-linear-gradient(
        to right,
        var(--accent) 0%,
        var(--accent) 10%,
        transparent 10%,
        transparent 18%
    );
}
section#overview #timeline > ul:nth-child(2) > li:nth-child(odd) span{
    display: block;
    width: 20px;
    height: 20px;
    background-color: var(--accent);
    border-radius: 100%;
}
section#overview #timeline > ul:nth-child(2) > li:nth-child(even) span{
    display: block;
    width: 100%;
    height: 10px;
    background-color: var(--accent);
}
section#overview #timeline > ul:nth-child(2) > *{
    grid-row: 1;
}
section#overview #timeline > ul:nth-child(3) > li{
    text-align: center;
}
section#overview #timeline > ul:nth-child(2) > li:nth-child(1){
    grid-column: 1 / span 2;
}
section#overview #timeline > ul:nth-child(2) > li:nth-child(2){
    grid-column: 2 / 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
}
section#overview #timeline > ul:nth-child(2) > li:nth-child(3){
    grid-column: 4 / span 2;
}
section#overview #timeline > ul:nth-child(2) > li:nth-child(4){
    grid-column: 5 / 8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
}
section#overview #timeline > ul:nth-child(2) > li:nth-child(5){
    grid-column: 7 / span 2;
}
section#overview #timeline > ul:nth-child(2) > li:nth-child(6){
    grid-column: 8 / span 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
}
section#overview #timeline > ul:nth-child(2) > li:nth-child(7){
    grid-column: 10 / span 2;
}
section#overview #timeline > ul:nth-child(2) > li:nth-child(8){
    grid-column: 11 / span 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
}
section#overview #timeline > ul:nth-child(2) > li:nth-child(9){
    grid-column: 13 / span 2;
}
section#overview #timeline > ul:nth-child(2) > li:nth-child(10){
    grid-column: 14 / span 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
}
section#overview #timeline > ul:nth-child(2) > li:nth-child(11){
    grid-column: 16 / span 2;
}
section#overview #timeline > ul:nth-child(2) > li:nth-child(12){
    grid-column: 17 / span 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
}
section#overview #timeline > ul:nth-child(2) > li:nth-child(odd){
    display: flex;
    justify-content: center;
}
section#overview #timeline > ul:last-child > li:first-child{
    grid-column: 1 / span 2
}
section#overview #timeline > ul:last-child > li:nth-child(2){
    grid-column: 4 / span 2
}
section#overview #timeline > ul:last-child > li:nth-child(3){
    grid-column: 6 / span 1
}
section#overview #timeline > ul:last-child > li:nth-child(4){
    grid-column: 7 / span 2
}
section#overview #timeline > ul:last-child > li:nth-child(5){
    grid-column: 10 / span 2
}
section#overview #timeline > ul:last-child > li:nth-child(6){
    grid-column: 12 / span 1
}
section#overview #timeline > ul:last-child > li:nth-child(7){
    grid-column: 13 / span 2
}
section#overview #timeline > ul:last-child > li:nth-child(8){
    grid-column: 16 / span 2
}
section#overview #timeline > ul:last-child > li:nth-child(9){
    grid-column: 18 / span 1
}
section#overview #timeline {
    margin-bottom: 2em;
}
@media only screen and (max-width: 1024px) {
    section#overview #timeline {
        display: grid;
        --height: 6vh;
        grid-template-columns: min-content min-content 1fr;
        grid-template-rows: repeat(2, var(--height)) 1fr repeat(2, var(--height)) 1fr
                            repeat(2, var(--height)) 1fr repeat(2, var(--height)) 1fr
                            repeat(2, var(--height)) 1fr repeat(2, var(--height)) 1fr;
        grid-auto-flow: column;
        justify-self: center;
    }

    section#overview #timeline > ul {
        display: grid;
        grid-template-rows: subgrid;
        grid-column: unset;
        grid-row: 1 / -1;
        grid-auto-flow: column;
    }
    section#overview #timeline > ul:nth-child(2) > li > span.break{
        background-color: unset !important;
        background: repeating-linear-gradient(
            to bottom,
            var(--accent) 0%,
            var(--accent) 10%,
            transparent 10%,
            transparent 18%
        ) !important;
    }
    section#overview #timeline > ul li{
        grid-column: unset !important;
        grid-row: unset !important;
    }
    section#overview #timeline > ul:first-child > li{
        display: flex;
        align-items: center;
        font-size: var(--font-size-h1);
    }
    section#overview #timeline > ul:nth-child(3) > li{
        font-size: var(--font-size-h4);
    }
    section#overview #timeline > ul:first-child > li:nth-child(1){
        grid-row: 2 / span 3 !important;
    }
    section#overview #timeline > ul:first-child > li:nth-child(2){
        grid-row: 8 / span 3 !important;
    }
    section#overview #timeline > ul:first-child > li:nth-child(3){
        grid-row: 14 / span 3 !important;
    }
    section#overview #timeline > ul:nth-child(2) > li:nth-child(even){
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    section#overview #timeline > ul:nth-child(2) > li:nth-child(even) span{
        width: 10px;
        height: 100%;
    }
    section#overview #timeline > ul:nth-child(2) > li:nth-child(1){
        display: flex;
        flex-direction: column;
        align-items: center;
        grid-row: 1 / span 2 !important;
    }
    section#overview #timeline > ul:nth-child(2) > li:nth-child(2){
        grid-row: 2 / span 3 !important;
    }
    section#overview #timeline > ul:nth-child(2) > li:nth-child(3){
        display: flex;
        flex-direction: column;
        align-items: center;
        grid-row: 4 / span 2 !important;
    }
    section#overview #timeline > ul:nth-child(2) > li:nth-child(4){
        grid-row: 5 / span 3 !important;
    }
    section#overview #timeline > ul:nth-child(2) > li:nth-child(5){
        display: flex;
        flex-direction: column;
        align-items: center;
        grid-row: 7 / span 2 !important;
    }
    section#overview #timeline > ul:nth-child(2) > li:nth-child(6){
        grid-row: 8 / span 3 !important;
    }
    section#overview #timeline > ul:nth-child(2) > li:nth-child(7){
        display: flex;
        flex-direction: column;
        align-items: center;
        grid-row: 10 / span 2 !important;
    }
    section#overview #timeline > ul:nth-child(2) > li:nth-child(8){
        grid-row: 11 / span 3 !important;
    }
    section#overview #timeline > ul:nth-child(2) > li:nth-child(9){
        display: flex;
        flex-direction: column;
        align-items: center;
        grid-row: 13 / span 2 !important;
    }
    section#overview #timeline > ul:nth-child(2) > li:nth-child(10){
        grid-row: 14 / span 3 !important;
    }
    section#overview #timeline > ul:nth-child(2) > li:nth-child(11){
        display: flex;
        flex-direction: column;
        align-items: center;
        grid-row: 16 / span 2 !important;
    }
    section#overview #timeline > ul:nth-child(2) > li:nth-child(12){
        grid-row: 17 / span 3 !important;
    }
    section#overview #timeline > ul:nth-child(3) > li{
        align-self: center;
        text-align: start;
    }
    section#overview #timeline > ul:nth-child(3) > li:first-child{
        grid-row: 1 / span 2 !important;
    }
    section#overview #timeline > ul:nth-child(3) > li:nth-child(2){
        grid-row: 4 / span 2 !important;
    }
    section#overview #timeline > ul:nth-child(3) > li:nth-child(4){
        grid-row: 7 / span 2 !important;
    }
    section#overview #timeline > ul:nth-child(3) > li:nth-child(5){
        grid-row: 10 / span 2 !important;
    }
    section#overview #timeline > ul:nth-child(3) > li:nth-child(7){
        grid-row: 13 / span 2 !important;
    }
    section#overview #timeline > ul:nth-child(3) > li:nth-child(8){
        grid-row: 16 / span 2 !important;
    }
}