body {
    margin: 0;
    background: linear-gradient(to bottom, transparent, #7C0A02AA 90%, #7C0A02 97%);
    overflow-x: hidden;
}

.start {
    display: flex;
    background-color: #14252b;
    width: 100vw;
    height: 100%;
    align-items: center;
}

.start-button {
    background: none;
    border: none;
    margin: 0 auto;
    color: #AAAAAA;
    font-size: xx-large;
}

.hidden {
    visibility: hidden;
}


.title-container {
    height: 100%;
    position: relative;
}

.title {
    width: 100vw;
    text-align: center;
    position: absolute;
    bottom: 1rem;
    font-size: xx-large;
}

.chapter {
    width: 60%;
    min-width: 17rem;
    margin: auto;
    color: #555555;
}

.end {
    padding-bottom: 10rem;
}

.content {
    width: 60%;
    min-width: 20rem;
    margin: 0 auto;
    background-color: #FFFFFF;
}

.content-end {
    width: 60%;
    min-width: 20rem;
    height: 200vh;
    min-height: 100rem;
    margin: 0 auto;
    background: linear-gradient(to bottom, #FFFFFF, transparent 30%)    
}

.dialog {
    margin: 0;
}

.feet {
    margin-top: 6rem;
    text-align: center;
    font-size: x-large;
}

audio {
    visibility: hidden;
    position: absolute;
}

.full-width {
    width: 100vw;
    left: calc(-50vw + 50%);  
}

.prologue {
    margin-bottom: 10rem;
    height: 300vh;
    min-height: 100rem;
}

.intermission {
    margin-top: 10rem;
    margin-bottom: 10rem;
    height: 300vh;
    min-height: 100rem;
}

.sea {
    margin-bottom: 3rem;
    position: relative;
}

.sea_back {
    width: 100vw;
    height: 50%;
    background: linear-gradient(to bottom, #14252b 0%, #14252b 50%, #FFFFFF00 100%);
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
}

.wave1 {
    width: 100vw;
    height: 100%;
    background: linear-gradient(to bottom, #5b91a7 0%, #5b91a7 90%, #5b91a7ee 99%, #FFFFFF00 100%);
    background-repeat: no-repeat;
    background-size: 100% 93%;
    animation: wave_move 10s ease infinite;
    top: 0;
    position: absolute;
    mix-blend-mode: luminosity;
}
.wave2 {
    width: 100vw;
    height: 100%;
    background: linear-gradient(to bottom, #335968dd 0%, #335968dd 85%, #33596877 95%, #FFFFFF00 100%);
    background-repeat: no-repeat;
    animation: wave_move 10s ease infinite;
    background-size: 100% 90%;
    top: 0;
    position: absolute;
}
.wave3 {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to bottom, #1c333bdd 0%, #1c333bdd 85%, #1c333b77 90%, #FFFFFF00 95%);
    background-repeat: no-repeat;
    animation: wave_move 10s ease infinite;
    background-size: 100% 85%;
    top: 0;
    position: absolute;
}

.sand {
    background: linear-gradient(to bottom, #FFFFFF00 0%, #C2B280 20%, #C2B280 80%, #FFFFFF00 100%);
    position: relative;
}

.sand_wave1 {
    width: 100vw;
    height: 100%;
    background: linear-gradient(45deg, #328db100 0%, #caa73c88 50%, #328db100 100%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    mask: linear-gradient(to bottom, transparent, #eeeeee 40%, #eeeeee 60%, transparent 100%);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    animation: sand_shift 30s ease infinite;
    top: 0;
    position: absolute;
}
.sand_wave2 {
    width: 100vw;
    height: 100%;
    background: linear-gradient(-45deg, #18617e00 0%, #72684b88 50%, #18617e00 100%);
    background-size: 200% 100%;
    mask-size: 100% 100%;
    background-repeat: no-repeat;
    mask: linear-gradient(to bottom, transparent, #dddddd 30%, #dddddd 70%, transparent 100%);
    mask-repeat: no-repeat;
    animation: sand_shift 50s ease infinite;
    bottom: 0;
    position: absolute;
}

.forest {
    background: linear-gradient(to bottom, #FFFFFF00 0%, #304529 20%, #304529 80%, #FFFFFF00 100%);
    position: relative;
}

.taalainmaa {
    background: linear-gradient(to bottom, #FFFFFF00 0%, 	#080917 20%, #080917 80%, #FFFFFF00 100%);
    position: relative;
}

@keyframes moonlight {
    0%, 100% {
        background-position: 0% 0%;
    }
    50% {
       background-position: 10% 10%;
    }
}

@keyframes sand_shift {
    0%, 100% {
        background-position: 0% 0%;
    }
    50% {
       background-position: 50% 0%;
    }
}

@keyframes wave_move {
    0%, 100% {
        background-position: 0% 0%;
    }
    50% {
       background-position: 0% 100%;
    }
}