body {
    font-family: Ubuntu, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background-color: #311231;
    max-width: 100%;
    box-sizing: border-box;
}

header {
    color: #ede5a9;
    text-align: center;
}
nav {
    text-align: center;
}
nav ul {
    background-color: #839199;
    list-style-type: none;
    padding: .5em;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
nav li {
    margin: 1em .1em;
}
nav li::before {
    content: "❦ ";
}
main {
    background-color: #1d333a;
    padding: .5em;
    color: #daced3;
}
footer {
    margin-top: .5em;
    color: #fffaef;
    background-color: #1A051A;
    text-align: center;
}
footer a {
    color: papayawhip;
}

header h1, nav ul, nav h4, main, footer {
    border-radius: .5em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Mojangles, Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
header h1 {
    font-size: 3em;
}
h1 img {
    height: 1em;
}
h2 img, h3 img {
    height: 1.5em;
}
header h1, nav h4 {
    background-color: #1A051A;
    padding: .25em;
    display: inline-block;
}
nav h4 {
    color: #fff032;
    margin-bottom: .33em;
}
p {
    margin: 1em;
}
a {
    color: #af8cd3;
}
.book a, nav a, .card a {
    color: #2e1f66;
}
a:hover {
    text-decoration: none;
}
figure {
    margin: 0;
    margin-bottom: 1em;
}
figcaption {
    max-width: 420px;
}
img {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}
.character-image {
    height: 20em;
}

.too-wide {
    max-width: 100%;
    overflow-x: scroll;
}
th {
    font-family: Mojangles, Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-align: left;
    padding-right: .5em;
}
td {
    text-align: right;
}

iframe {
    width: 100%;
    height: 50em;
    background-color: black;
}
.youtube-video {
    height: 9em;
    width: 16em;
}

.book {
    background-color: #fffaef;
    border: outset .5em #853f2a;
    border-radius: .5em;
    background-image: url(image/decoration/binding.svg);
    background-size: 1em;
    background-repeat: repeat-y;
    padding-left: 1.5em;
    color: #000;
}

.card {
    background-color: lightgray;
    border: dashed 3px black;
    display: inline-block;
    padding: 0 .5em;
    color: #000;
    margin-bottom: 1em;
}
.card th, .card td {
    padding-bottom: .5em;
}
.card ul {
    list-style-type: none;
    padding-left: 0;
}
.card li li {
    padding-right: .5em;
}
.card img {
    width: 10em;
}

.button {
    border: 5px outset #2e1f66;
    border-radius: 1em;
    padding: .5em;
    background-color: #2e1f66;
    color: #fff032;
}
.button:hover {
    border: inset #2e1f66;
}

code {
    font-family: 'Ubuntu Mono', 'Courier New', Courier, monospace;
    padding: .1em;
}

.right {
    float: right;
}
.left {
    float: left;
}
.center {
    text-align: center;
    justify-content: center;
}
.center figcaption {
    margin: auto;
}

.here,.here a {
    font-weight: bold;
}
li.here::before {
    content: "❧ ";
}
.flex {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.wide {
    justify-content: space-between;
}

.dark-background {
    background-color: gray;
    background-blend-mode: multiply;
}
.em1 {
    height: 1em;
}
.hover-title {
    text-decoration: dotted underline;
}

@media only screen and (min-width: 768px) {
    .book {
        border-radius: 2em;
        border-width: 2em;
    }
    .card {
        max-width: 45%;
    }
    .em1 {
        height: 1em;
    }
    .wide {
        max-width: 100%;
    }
    .youtube-video {
        height: 18em;
        width: 32em;
    }
}

@media only screen and (min-width: 1600px) {
    /* body {
        display: flex;
        justify-content: center;
    } */
    .wrapper {
        display: flex;
        max-width: 100%;
        flex-direction: row-reverse;
    }

    .heading {
        flex-basis: 20%;
        background-image: url(image/decoration/warped-forest.jpg);
        background-repeat: repeat-y;
        background-size: 100%;
        margin-left: 3em;
    }
    nav ul {
        display: block;
    }
    main {
        flex-basis: 80%;
        border: transparent solid 1.5em;
        border-image: url(image/decoration/squares.svg) 25% round;
    }
    footer {
        grid-area: footer;
    }
}