* {
    color: #0f0;
    font-family: "Courier Prime", monospace;
}

body {
    background-color: #000;
    margin: 0;
}

/* structure */
header, footer {
    text-align: center;
}

header {
    margin-bottom: 35px;
    border-bottom: #0f0 3px dashed;
}

footer {
    position: sticky;
    bottom: 0;
    border-top: #0f0 3px dashed;
    height: 36px;

    background-color: #000;
}
main {
    width: 75%;
    margin: auto;
    
    display: flex;
    flex-direction: column;
}


/* sections */
section {
    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 75%;
    border-left: #0f0 solid 10px;

    padding-left: 15px;
    margin-bottom: 35px;
}

.sectionReverse {
    align-self: flex-end;
    text-align: right;

    border-right: #0f0 solid 10px;
    border-left: none;

    padding-left: 0;
    padding-right: 15px;
}

/* text */
h1 {
    font-weight: normal;
    font-style: italic;
}

section h3 {
    margin-bottom: 0px;
    font-style: italic;
}

/* inline */
strong {
    font-weight: normal;
    color: #f0f;
}

/* decorational lines */
body::after, body::before {
    z-index: 5;
    content: "";
    border-left: #0f0 solid 3px;
    height: 100%;

    position: fixed;
    top: 0;
}
body::after {right: 10%;} body::before {left: 10%;}

/* animation */

@keyframes flash {
    0% {
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    45% {
        opacity: 0;
    }
    55% {
        opacity: 1;
    }
    85% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes appear {
    from {
        background-color: #0f0;
        opacity: 1;
    }
    to {
        background-color: #000;
        opacity: 1;
    }
}

.coverAnim {
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 3;
    background-color: #000;
    opacity: 0;

    animation: flash step-start 0.35s;
}

section {
    opacity: 0;

    animation: appear linear 0.5s;
    animation-fill-mode: forwards;
}

/* animation Delays */
.first { animation-delay: 0.35s; }
.second { animation-delay: 1.35s; }
.third { animation-delay: 2.35s; }
.fourth { animation-delay: 3.35s; }
.fifth { animation-delay: 4.35s; }
.sixth { animation-delay: 5.35s; }
.seventh { animation-delay: 6.35s; }
.eight { animation-delay: 7.35s; }

/* media adjust */
@media (max-width: 900px) {
    section {
        border-left: none;
        align-self: center;
        width: 95%;
        border-bottom: #0f0 solid 3px;
    }
    .sectionReverse {
        border-right: none;
    }
}