* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #1e1b18;
    color: #bbaa99;
    font-family: Palatino, "URW Palladio L", Bookman, "URW Bookman L", Georgia, serif;
    font-size: 17px;
    line-height: 2.1;
    letter-spacing: .15em;
    overflow-x: hidden;
}


/* BACKGROUND MAP */

#background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: -2;

    animation:
        fadeMap 15s forwards,
        breatheMap 17s ease-in-out infinite alternate;
}

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1e1b18;
    opacity: 0;
    z-index: -1;

    animation: darken 15s forwards;
}


/* MAIN */

main {
    width: 90%;
    max-width: 950px;
    margin: auto;
}


/* CHARACTER NAME / PAGE TITLE */

.opening {
    min-height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
}

#name {
    font-size: 2rem;
    letter-spacing: .16em;
    font-weight: normal;

    text-shadow:
        2px 2px 4px #1e1b18,
        -1px -1px 2px #1e1b18;

    opacity: 0;

    animation:
        appear 3s forwards,
        breatheName 9s ease-in-out 7s infinite alternate;

    animation-delay: 2s, 7s;
}


/* DRAWING */

.drawing {
    min-height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
}

#drawing {
    max-width: 100%;
    height: auto;
    margin-top: 35px;
    opacity: 0;
}


/* DRAWING TITLE */

#drawingTitle {
    margin-top: 18px;
    font-size: 1.05rem;
    font-style: italic;
    opacity: 0;
}


/* STORY / INFORMATION TEXT */

#story {
    white-space: pre-wrap;
    text-align: justify;
    max-width: 760px;
    margin: 80px auto;
    margin-bottom: 500px;
    font-size: 1.2rem;
}


/* STORY APPEARS AFTER ENTERING FRAME */

#story {
    opacity: 0;
}


/* THESE THREE ELEMENTS ARE ACTIVATED BY JAVASCRIPT */

#drawing.visible {
    animation:
        appear 4s forwards,
        breatheDrawing 11s ease-in-out 5s infinite alternate;
}

#drawingTitle.visible {
    animation:
        appear 5s forwards,
        breatheTitle 9s ease-in-out 6s infinite alternate;
}

#story.visible {
    animation:
        appear 6s forwards,
        breatheStory 13s ease-in-out 7s infinite alternate;
}


/* INFORMATION PAGE */

#story.info {
    opacity: 1;
    animation: none;
}


/* LINKS */

a {
    color: #ffffdd;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


/* BUTTONS */

.buttonArea {
    text-align: center;
    margin: 70px 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 15px;
}

.siteButton {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 220px;
    height: 45px;

    padding: 0;

    border: 1px solid #bbaa99;

    color: #bbaa99;

    text-decoration: none;

    font-family:
        Palatino,
        "URW Palladio L",
        Bookman,
        "URW Bookman L",
        Georgia,
        serif;

    font-size: 1rem;
    line-height: 1;
    letter-spacing: .15em;
}

.siteButton:hover {
    background: #bbaa99;
    color: #1e1b18;
}


/* FOOTER */

footer {
    text-align: center;
    padding-bottom: 50px;
    opacity: .6;
}


/* MAP FADE */

@keyframes fadeMap {

    from {
        opacity: 1;
    }

    to {
        opacity: .30;
    }
}

@keyframes darken {

    from {
        opacity: 0;
    }

    to {
        opacity: .70;
    }
}


/* INITIAL APPEARANCE */

@keyframes appear {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* BREATHING */

@keyframes breatheName {

    0% {
        opacity: 1;
    }

    100% {
        opacity: .50;
    }
}

@keyframes breatheDrawing {

    0% {
        opacity: .85;
    }

    100% {
        opacity: .50;
    }
}

@keyframes breatheTitle {

    0% {
        opacity: .80;
    }

    100% {
        opacity: .45;
    }
}

@keyframes breatheStory {

    0% {
        opacity: .90;
    }

    100% {
        opacity: .60;
    }
}


/* MAP BREATHING */

@keyframes breatheMap {

    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.06);
    }
}