body {
    font-family: Avenir, sans-serif;
    background-color: #000;
    color: #fff;
} 
h1 {
    color: #fff;
    text-align: center;
    margin: 1em auto;
    letter-spacing: .1em;
    word-spacing: .4em;
    max-width: 7em;
    border-bottom: 1px solid #ccc;
}
a:not(.link) {
    color: #000;
    visibility: hidden;
}
.link {
    color: antiquewhite;
    text-decoration: underline;
}
.link:hover {
    cursor: pointer;
}

h2 {
    margin: 2em 0 1em 0;
}
.m {
    margin: 6em auto;
    font-family: monospace;
    max-width: 28em;
    background-color: #000;
    text-align: justify;
    color: #000;
    letter-spacing: .3em;
    line-height: 1.2em;
}
ol {
    padding-left: 1em;
}
li {
    margin: 1em 0;
}
i {
    color: #fff;
    background-color: white;
    font-style: normal;
}
.A1,
.A2,
.A3,
.A4,
.A5,
.A6,
.A7,
.A8 {
    opacity: 0;
    animation-iteration-count: 1;
    -webkit-animation: fadein 5s forwards;
    -moz-animation: fadein 5s forwards;
    -ms-animation: fadein 5s forwards;
    -o-animation: fadein 5s forwards;
    animation: fadein 5s forwards;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
.A2 {
    animation-delay: 5s;
}
.A3 {
    animation-delay: 10s;
}
.A4 {
    animation-delay: 14s;
}
.A5 {
    animation-delay: 18s;
}
.A6 {
    animation-delay: 22s;
}
.A7 {
    animation-delay: 26s;
}
.l {
    color: #fff;
    float: right;
}
@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-moz-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-ms-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-o-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (min-width: 500px) {
    .m {
        letter-spacing: .45em;
    }
}

@media (min-width: 800px) {
    h1 {
        color: #fff;
        text-align: center;
        letter-spacing: .1em;
        word-spacing: .4em;
        max-width: none;
        border: none;
    }
}
@media (min-width: 800px) {
    .d {
        position: fixed;
        border-left: 1px solid #444;
        margin: 4em 2em 2em .5em;
        top: 20px;
        bottom: 0;
        right: 0;
        line-height: 1.4em;
        width: 20%;
        padding-left: 40px;
    }
    .b {
        position: fixed;
        border-right: 1px solid #444;
        margin: 4em .5em 2em 2em;
        top: 20px;
        bottom: 0;
        left: 0;
        line-height: 1.4em;
        width: 20%;
        padding-right: 40px;
    }
}