/* Hero Section */
.hero{
    position: relative;
    height: 50svh;
    width: 100%;
}

.hero h1{
    position: absolute;
    bottom: 1em;
    left: 0.5em;
    color: var(--white);
    text-shadow: 1px 1px var(--black);
}

.hero picture img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* Documents */
.terms h2,
.terms h3,
.terms h4{
    text-transform: capitalize;
    text-wrap: balance;
}

.terms article{
    margin: 3em 0;
}

.terms article h3{
    margin: 1em 0 0 0;
}

.terms article h4{
    margin: 1em 0 0 0;
}

/* Header section */
.header{
    width: min(1100px, 90%);
    text-align: center;
    text-wrap: balance;
}

.header>p{
    font-size: 1.3em;
    font-weight: 300;
    font-style: italic;
}

/* History Graph */
#history{
    position: relative;
}

#history::after{
    position: absolute;
    top: 3.6em;
    bottom: 0;
    left: calc(5vw - 1.5px);
    content: '';
    width: 3px;
    background-color: var(--blue);
}

#history>h2{
    text-align: center;
}

#history>article{
    position: relative;
    background-color: var(--grey);
    border-radius: 1.5em;
    padding: 1em;
    margin: 1em 0.5em 1em 10vw;
    text-align: left;
}

#history>article img{
    width: 100%;
    aspect-ratio: 2/1;
    object-fit: cover;
    border-radius: 0 0 0.5em 0.5em;
}

#history>article>h3{
    font-size: 2em;
    margin: 0.5em 1em 0 1em;
}

.line{
    position: absolute;
    top: calc(50% - 1.5px);
    left: -5vw;
    height: 3px;
    width: 0;
    content: '';
    background-color: var(--blue);
    transition: 1000ms;
}

.line.show{
    width: 5vw;
}

.line::after{
    position: absolute;
    top: calc(50% - 10px);
    left: -9.5px;
    height: 20px;
    width: 20px;
    content: '';
    background-color: var(--blue);
}

@media (min-width: 761px){
    /* Hero Section */
    .hero{
        height: 70svh;
    }

    .hero h1{
        left: 1em;
    }

    /* History Graph */
    #history::after{
        top: 5em;
        left: calc(50% - 1.5px);
    }

    #history>h2{
        text-align: center;
        margin-bottom: 2em;
    }

    #history>article{
        border-radius: 1em;
        padding: 0.5em 1.5em;
        margin: 2em 55% 2em 0.5em;
        text-align: right;
    }

    #history>article:nth-child(odd){
        margin: 2em 0.5em 2em 55%;
        text-align: left;
    }

    #history>article:nth-child(2){
        margin-top: -2em;
    }

    #history>article img{
        position: absolute;
        top: 5%;
        height: 90%;
        border-radius: 1em;
    }

    #history>article:nth-child(even) img{
        right: -120%;
    }

    #history>article:nth-child(odd) img{
        left: -120%;
    }

    .line{
        left: unset;
        right: -11.5%;
    }

    article:nth-child(odd)>.line{
        left: -11.5%;
        right: unset;
    }

    .line.show{
        width: 11.5%;
    }

    .line::after{
        top: -10px;
        left: unset;
        right: -10px;
    }

    #history>article:nth-child(odd)>.line::after{
        left: -10px;
        right: unset;
    }
}

@media (min-width: 1166px){
    /* Hero Section */
    .hero{
        height: 80svh;
    }

    .hero h1{
        left: 2em;
    }

    /* Documents */
    .terms{
        max-width: 1250px;
        padding-inline: 1em;
    }

    /* History Graph */
    #history{
        max-width: 2000px;
    }

    #history>article{
        padding: 2em;
        margin: 5em 55% 5em 5%;
    }

    #history>article:nth-child(odd){
        margin: 5em 5% 5em 55%;
    }

    #history>article img{
        top: -5%;
        height: 110%;
        width: 90%;
    }

    .line{
        right: -12.5%;
    }

    #history>article:nth-child(odd)>.line{
        left: -12.5%;
    }

    .line.show{
        width: 12.5%;
    }
}