:root {
    --accent: rgb(188, 51, 174);
    --accent-tr: rgb(188, 51, 174, 0.8);
    --accent-tr2: rgba(160, 90, 160, 0.85);
    --background: rgb(226, 217, 184);
    --pink-old: rgb(165, 82, 106);
    --pink: rgb(188, 51, 174);
    --yellow: rgb(252, 255, 94);
    --pink-tr: rgb(165, 82, 106, 0.8);
    --grey: rgb(230, 228, 228);
}

/*import fonts*/
@font-face {
    font-family: 'Zapfino';
    font-style: italic;
    font-weight: 400;
    src: local('Zapfino'), url('https://fonts.cdnfonts.com/s/14507/Zapfino.woff') format('woff');
}

@font-face {
    font-family: 'Jost*';
    src: url('../fonts/Jost-500-Medium.ttf') format('truetype');
}

html {
    background-color: white;
    margin: 0;
}

body {
    color: white;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    font-family: 'Jost*';
}

h1 {
    font-family: 'Zapfino';
}

h1 {
    color: black;
    font-size: 2.5em;
    animation: textshadow 120ms ease-in-out infinite;
    text-align: center;
}

h1:hover {
    text-shadow: 1px 1px white;
    cursor: pointer;
}

h3#chapterName {
    color: black;
    align-self: center;
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 0.6em;
}

p,
ul,
li,
button,
a {
    font-family: 'Jost*';
    line-height: 1.5em;
}

p,
a,
button {
    background-color: black;

}

a {
    color: var(--yellow);
    text-shadow: 1px 1px white;
    cursor: pointer;
}

a:hover,
a:active {
    text-decoration: none;
    animation: textshadow 120ms ease-in-out infinite;
}

em {
    color: black;
    background-color: var(--yellow);
    animation: textshadow 120ms ease-in-out infinite;
}

ul {
    list-style-type: '--- ';
}

/*=== header ===*/
header {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: var(--yellow);
}

nav ul {
    list-style: none;
    margin: 0 0 -3em 0;
    padding: 0;
    position: relative;
    top: -3em;
    display: flex;
    flex-flow: row nowrap;
}

nav ul li a {
    background-color: inherit;
    color: black;
    margin: 0 0.2em;
    text-decoration: underline;
}

.italic {
    font-style: italic;
}

/*=== main ===*/
main {
    display: flex;
    flex-flow: column nowrap;
    /*align-items: center;
    justify-content: center;*/
    flex: 1;
    width: 100%;
    background-color: var(--grey);
}

/*=== footer ===*/
footer {
    display: grid;
    grid-template-areas: "nothing copyright credits";
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
    background-color: black;
    min-height: 10px;
    text-align: center;
    font-size: 1.1em;
    margin: 0;
}

#coyright {
    grid-area: copyright;
    text-align: center;
}

#credits {
    grid-area: credits;
}

#credits a {
    color: white;
    text-shadow: none;
}

/*=== button ===*/
button {
    align-items: center;
    appearance: none;
    border-style: none;
    box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px, rgba(0, 0, 0, .14) 0 6px 10px 0, rgba(0, 0, 0, .12) 0 1px 18px 0;
    box-sizing: border-box;
    background-color: var(--yellow);
    cursor: pointer;
    display: inline-flex;
    font-size: 18px;
    font-weight: 500;
    height: 48px;
    justify-content: center;
    max-width: 100%;
    overflow: visible;
    padding: 2px 24px;
    position: relative;
    text-align: center;
    touch-action: manipulation;
    width: auto;
    margin-top: 1.2em;
    margin-bottom: 1.2em;
    transition: all 0.3s ease;
}

button:hover,
button:active {
    box-shadow: 1px 1px 10px white, 0 0 25px var(--yellow);
    outline: none;
    background-color: var(--yellow);
}

#up {
    margin: 3em 0;
}

/*flex container*/
.container {
    display: flex;
    flex-flow: row nowrap;
    max-width: 800px;
    align-self: center;
}

.container>* {
    margin: 1.2em;
}

.container-column {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
}

.container.background,
p.background,
.transcript {
    text-align: justify;
    /*background-color: var(--pink-tr);*/
    color: white;
    align-self: center;
    text-shadow: 1px 1px var(--pink);
    background-color: black;
}

p.quote {
    text-shadow: 1px 1px var(--yellow);
}

@keyframes textshadow {
    0% {
        text-shadow: -1px 1px white;
    }

    50% {
        text-shadow: 1px 1px white;
    }

    100% {
        text-shadow: -1px 1px white;
    }
}

@keyframes textshadow-pink {
    0% {
        text-shadow: -1px 1px var(--pink);
    }

    50% {
        text-shadow: 1px 1px var(--pink);
    }

    100% {
        text-shadow: -1px 1px var(--pink);
    }
}

button {
    align-self: center;
}

#pigeon {
    height: 40vh;
    /*filter: contrast(4);*/
    animation: pic-glitch .2s linear infinite, rotate .3s ease-in infinite;
}

@keyframes pic-glitch {
    0% {
        filter: contrast(1);
    }

    10% {
        filter: contrast(2);
    }

    50% {
        filter: contrast(3);
    }

    70% {
        filter: contrast(10);
    }

    80% {
        filter: contrast(4);
    }

    100% {
        filter: contrast(1);
    }
}

@keyframes rotate {
    0% {
        transform: rotate3d(0, 0, 0, 0);
    }

    30% {
        transform: rotate3d(0, 0.05, 0.05, -0.05rad);
    }
}

/*Chapters*/
.chapter-container {
    list-style: none;
    position: relative;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
}

.media-container {
    position: relative;
    text-align: center;
    width: 300px;
    height: 300px;
    padding: 5em;
}

.media-container img {
    width: 300px;
    animation: pic-glitch .2s linear infinite, rotate .3s ease-in infinite;
    z-index: 4;
    float: center;
}

.media-container:hover img {
    filter: contrast(3);
    animation: none;
}

.caption {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    background-color: black;
    padding: 1em;
    margin: 5em;
    opacity: 0.7;
    width: 200px;
    position: absolute;
    display: none;
    left: -4em;
    top: -2em;
    float: bottom;
    z-index: 6;
    border: 5px solid var(--yellow);
    cursor: pointer !important;
}

.media-container:hover .caption {
    display: flex;
}

.open {
    font-size: 1.5em;
}

/*=== Chapter pages ===*/
.chapter {
    display: flex;
    flex-flow: column nowrap;
}

.transcript {
    background-color: black;
    width: 100%;
    margin: 1em;
    margin-bottom: 0;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

.pop {
    align-self: center;
    justify-self: center;
    text-align: center;
    cursor: pointer;
}

.pop:hover,
.pop:active {
    animation: textshadow-pink 120ms ease-in-out infinite;
}

#transcript-text {
    padding: 0 0.5em;
    max-width: 800px;
}

.poppy {
    display: none;
}

.poppy.shown {
    display: inline-block;
}

.chapter-buttons {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

.chapter-buttons>* {
    margin: 1em 0.2em;
    width: 210px;
}

/*=== Audio ===*/
#waveform {
    align-self: center;
    width: 100%;
    max-width: 800px;
    margin: 1em;
    z-index: 0;
}

#audio-controls {
    cursor: pointer;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

#audio-controls>* {
    margin: 0 0.2em 1.5em 0.2em;
}

#timeline {
    align-self: center;
    width: 100%;
    max-width: 800px;
    margin: 1em;
    z-index: 0;
    text-align: right;
}

#timeline p {
    background-color: rgba(0, 0, 0, 0);
    color: var(--yellow);
}

#timeline p:first-child {
    margin-top: -5em;
}

#high-quality {
    margin-top: -1em;
    text-decoration: underline;
    cursor: pointer;
}

#high-quality:hover, #high-quality:active {
    text-decoration: none;
}

/*=== Map ===*/
#map-container {
    position: absolute;
    align-self: center;
    max-width: 70vw;
    flex-flow: row nowrap;
    padding: 0;
    margin: 0.8em;
    z-index: 2;
    background-color: var(--grey);
    background-color: white;
    display: none;
    max-width: 100%;
}

#map-container.shown {
    display: flex;
}

#map-container img {
    width: 100%;
    box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px, rgba(0, 0, 0, .14) 0 6px 10px 0, rgba(0, 0, 0, .12) 0 1px 18px 0;
}

#overlay {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1;
    position: absolute;
    display: none;
}

#overlay.shown {
    display: block;
}

/*
button#close {
    align-self: flex-start;
    position: absolute;
    z-index: 5;
    margin: 0;
    font-size: 0.8em;
    padding: 0 0.4em;
    height: auto;
    display: none;
}
*/