@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Wet+Paint&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Dirt&display=swap');

/*
    font-family: 'Open Sans', sans-serif;
    font-family: 'Rubik Wet Paint', sans-serif;
    font-family: 'Rubik Dirt', sans-serif;
*/

/* general */

:root {
    --vh: 1vh;
}

@supports (height: 100dvh) {
    :root {
        --vh: 1dvh;
    }
}

html {
    background-color: #000;
    height: 100%;
}

body {
    background-color: #000;
    color: #fff;
    font-size: 16px;
    line-height: 1.4;
    font-family: 'Segoe UI', Frutiger, 'Frutiger Linotype', 'Dejavu Sans', 'Helvetica Neue', Arial, sans-serif;
    font-optical-sizing: auto;
    height: 100%;
    position: relative;
}

img {
    border: none;
    display: block;
    height: auto;
    max-width: 100%;
}

.hidden {
    display: none !important;
}

.app {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}

.wrap {
    width: 100%;
    max-width: 526px;
    margin: auto;
    position: relative;
}

.btn-wrap {
    display: flex;
    text-align: center;
    gap: 15px;
}

.btn {
    background: #000;
    border: 1px solid #fff;
    border-radius: 12px;
    box-shadow:
        inset 0 0 4px 1px #FF20CE,
        inset 0 0 14px 0 #FF20CE,
        0 0 4px 1px #FF20CE,
        0 0 14px 0 #FF20CE;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 160px;
    min-height: 60px;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
    font: italic 700 28px/1.2 'Open Sans', sans-serif;
    font-variation-settings: "wdth" 75;
    text-align: center;
    text-transform: uppercase;
    padding: 5px 15px;
    position: relative;
    z-index: 5;
}

@media (min-width: 1200px) {
    .btn .btntxt {
        transition: transform 0.15s ease-out;
    }

    .btn:hover .btntxt {
        transform: scale(1.1);
    }
}

.btn-prev,
.btn-next {
    background: url(../images/nav.svg) center no-repeat;
    background-size: contain;
    cursor: pointer;
    display: block;
    overflow: hidden;
    text-indent: -1000px;
    bottom: 0;
    position: absolute;
    height: 100%;
    width: 21.5%;
}

.btn-prev {
    left: 1.5%;
    transform: rotateY(180deg);
}

.btn-next {
    right: 1.5%;
}

.btn-prev.inactive,
.btn-next.inactive {
    display: none;
}

.btn-sound {
    -webkit-animation: appearing 0.5s ease-in-out;
    animation: appearing 0.5s ease-in-out;
    display: block;
    cursor: pointer;
    width: 44px;
    height: 44px;
    position: absolute;
    top: 6px;
    right: 7px;
    background: url(../images/sound.png) center no-repeat;
    background-size: contain;
    z-index: 100;
    overflow: hidden;
    text-indent: -1000px;
}

.btn-sound.muted {
    background-image: url(../images/muted.png);
}

.btn-sound::before {
    content: url(../images/muted.png);
    height: 0;
    width: 0;
    left: -1000px;
    position: absolute;
    overflow: hidden;
    z-index: -10;
}

/* loader */

.loader {
    background: url('../images/bg-intro-blur.jpg') center no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    margin: 0 auto;
    max-width: 526px;
    width: 100%;
    z-index: 99999;
}

.loader-progress {
    border: 2px solid #fff;
    padding: 2px;
    width: 50%;
    max-width: 200px;
    position: relative;
}

.loader-line {
    background-color: rgba(255, 255, 255, 0.5);
    width: 0;
    height: 8px;
}

.loader-value {
    color: #fff;
    font: 20px/1.05 Arial, sans-serif;
    font-variation-settings: "wdth" 75;
    text-align: center;
    padding: 20px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
}

.loader-value::after {
    content: '%';
    display: inline-block;
}

/* footer */

.footer {
    box-sizing: border-box;
    padding: 0 15px;
    margin: 0 auto;
    max-width: 525px;
    width: 100vw;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 35px);
    height: 25px;
    z-index: 1001;
    text-align: right;
}

.footer a {
    display: inline-block;
    color: #00546e;
    font: 13px/1.1 Arial, Helvetica, sans-serif;
    text-decoration: none;
}

@media (max-height: 600px) {
    .footer a {
        font-size: 11px;
    }
}

@media (max-height: 450px) {
    .footer {
        padding: 0 10px;
        top: calc(100% - 20px);
        height: 20px;
    }

    .footer a {
        font-size: 9px;
    }
}

/* steps */

.step {
    background: url('../images/bg.jpg') center no-repeat;
    background-size: cover;
    height: calc(var(--vh) * 100);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 5;
}

.step.active {
    opacity: 1;
    pointer-events: all;
    position: relative;
    z-index: 100;
}

.step.passed {
    opacity: 0;
    pointer-events: none;
}

.step-body {
    height: 100%;
    width: 100%;
}

.step-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 5px;
    height: 13%;
    z-index: 2;
}

.step-footer .btn {
    width: 50%;
}

/* step-intro */

.step-intro {
    background-image: url('../images/bg-intro.jpg');
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 99;
}

.step .logo {
    margin: 35px auto 0;
    padding: 0 11%;
    z-index: 2;
}

.step-intro .btn-wrap {
    text-align: center;
    padding-bottom: 53px;

}

/* step-rules */

.step-rules {
    background-image: url('../images/bg-intro-blank.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.step-rules ol {
    color: #fff;
    font-size: 14px;
    line-height: 1.2;
    list-style: decimal;
    text-align: center;
    text-transform: uppercase;
    padding: 30px 11% 100px;
    z-index: 2;
}

.step-rules ol li {
    margin-bottom: 15px;
    list-style-position: inside;
}

.step-rules .btn-wrap {
    text-align: center;
    padding-bottom: 53px;
}

/* step-chapter */

@-webkit-keyframes appearing {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes appearing {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.frame {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    height: 100%;
    position: relative;
    pointer-events: none;
}

.frame.passed,
.frame.active {
    opacity: 1;
    pointer-events: all;
}

.frame .pic {
    -o-object-fit: cover;
    object-fit: cover;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 1;
}

.frame .line {
    -webkit-animation: appearing 0.5s ease-in-out;
    animation: appearing 0.5s ease-in-out;
    background: #fff;
    border: 2px solid #000;
    border-radius: 15px;
    color: #000;
    font: italic 700 18px/1.05 'Open Sans', sans-serif;
    font-variation-settings: "wdth" 75;
    text-transform: uppercase;
    padding: 10px 11px;
    top: 0;
    position: absolute;
    min-width: -webkit-min-content;
    min-width: -moz-min-content;
    min-width: min-content;
    display: none;
    z-index: 2;
}

.frame .line.passed,
.frame .line.active {
    display: block;
}

.frame .line-arrow-bottom-left::before {
    background: url(../images/lines-arrow-1.png) center top no-repeat;
    background-size: contain;
    content: '';
    display: block;
    top: 100%;
    left: -19px;
    position: absolute;
    height: 28px;
    width: 52px;
}

.frame .line-arrow-bottom-right::before {
    background: url(../images/lines-arrow-2.png) center top no-repeat;
    background-size: contain;
    content: '';
    display: block;
    top: 100%;
    right: -4px;
    position: absolute;
    height: 25px;
    width: 46px;
}

.frame .line-arrow-left::before {
    background: url(../images/lines-arrow-3.png) center top no-repeat;
    background-size: contain;
    content: '';
    display: block;
    left: -26px;
    bottom: 18%;
    position: absolute;
    height: 18px;
    width: 28px;
}

.frame .line-arrow-right::before {
    background: url(../images/lines-arrow-4.png) center top no-repeat;
    background-size: contain;
    content: '';
    display: block;
    right: -26px;
    bottom: 18%;
    position: absolute;
    height: 18px;
    width: 28px;
}

@media (max-width: 526px) {
    .frame .line {
        font-size: 14px;
    }
}

.step-chapter::before {
    background: url(../images/bg-stained.png) no-repeat;
    background-size: 100% 100%;
    content: '';
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    pointer-events: none;
    z-index: 2;
}

/* make a choice  */

.step-chapter .frame .btn-wrap {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    left: 0;
    right: 0;
    position: absolute;
    z-index: 2;
}

.step-chapter .frame .button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    font: 26px/1.05 'Rubik Dirt', sans-serif;
    text-transform: uppercase;
    padding: 0;
    outline: 0;
    cursor: pointer;
    min-height: 3em;
    max-width: 10em;
}

@media (min-width: 1200px) {
    .step-chapter .frame .button {
        font-size: 36px;
        transition: transform 0.15s ease-out;
    }

    .step-chapter .frame .button:hover {
        transform: scale(1.1);
    }
}

/** chapter 1 **/

/* chapter 1
   screen 1 frame 1 */

.step-chapter-1-1 .frame-1 {
    height: 32%;
    margin-bottom: 3%;
}

.step-chapter-1-1 .frame-1 .line-1 {
    top: 10%;
    left: 8%;
}

.step-chapter-1-1 .frame-1 .line-2 {
    top: 31%;
    left: 8%;
}

/* chapter 1
   screen 1 frame 2 */

.step-chapter-1-1 .frame-2 {
    height: 32%;
    margin-bottom: 3%;
}

.step-chapter-1-1 .frame-2 .line-1 {
    top: auto;
    right: 4%;
    bottom: 8%;
    width: 8em;
}

/* chapter 1
   screen 1 frame 3 */

.step-chapter-1-1 .frame-3 {
    height: 32%;
}

.step-chapter-1-1 .frame-3 .line-1 {
    top: 8%;
    left: 7%;
    width: 6.5em;
}

/* chapter 1
   screen 2 frame 1 */

.step-chapter-1-2 .frame-1 {
    height: 29%;
    margin-bottom: 3%;
}

.step-chapter-1-2 .frame-1 .line-1 {
    top: auto;
    left: 6%;
    bottom: 12%;
    width: 7.5em;
}

/* chapter 1
   screen 2 frame 2 */

.step-chapter-1-2 .frame-2 {
    height: 27%;
    margin-bottom: 3%;
}

/* chapter 1
   screen 2 frame 3 */

.step-chapter-1-2 .frame-3 {
    height: 29%;
    top: 29.5%;
    left: 8%;
    position: absolute;
    width: 40.5%;
    z-index: 1;
}

.step-chapter-1-2 .frame-3 .line-1 {
    top: -10%;
    left: 108%;
    width: 7em;
}

/* chapter 1
   screen 2 frame 4 */

.step-chapter-1-2 .frame-4 {
    height: 40%;
}

.step-chapter-1-2 .frame-4 .line-1 {
    top: 12%;
    left: 8%;
}

/* chapter 1
   screen 3 frame 1 */

.step-chapter-1-3 .frame-1 .line-1 {
    top: 6%;
    left: auto;
    right: 11%;
}

/* chapter 1
   screen 3 frame 2 */

.step-chapter-1-3 .frame-2 {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
}

.step-chapter-1-3 .frame-2 .pic {
    z-index: 2;
}

.step-chapter-1-3 .frame-2 .line-1 {
    top: 12.5%;
    left: auto;
    right: 11%;
    width: 6.5em;
}

.step-chapter-1-3 .frame-2 .btn-wrap {
    top: 35%;
    bottom: 10%;
}

.step-chapter-1-3 .frame-2 .button:first-child {
    margin-right: 20%;
}

.step-chapter-1-3 .frame-2 .button:last-child {
    margin-top: 15%;
    margin-left: 15%;
}

/** chapter 2a **/

/* chapter 2a
   screen 1 frame 1 */

.step-chapter-2a-1 .frame-1 {
    height: 61.5%;
}

.step-chapter-2a-1 .frame-1 .line-1 {
    top: auto;
    left: 7%;
    bottom: 10.5%;
    width: 8em;
}

/* chapter 2a
   screen 1 frames 2-4 */

.step-chapter-2a-1 .frame-2,
.step-chapter-2a-1 .frame-3,
.step-chapter-2a-1 .frame-4 {
    top: 0;
    left: 0;
    right: 0;
    position: absolute;
    height: 61.5%;
}

/* chapter 2a
   screen 1 frame 5 */

.step-chapter-2a-1 .frame-5 {
    height: 47%;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    z-index: 1;
}

.step-chapter-2a-1 .frame-5 .line-1 {
    top: 34%;
    left: 8%;
    width: 7em;
}

/* chapter 2a
   screen 1 frame 6 */

.step-chapter-2a-1 .frame-6 {
    height: 46%;
    right: 3%;
    bottom: 9.5%;
    position: absolute;
    width: 34%;
    z-index: 1;
}

.step-chapter-2a-1 .frame-6 .line-1 {
    top: auto;
    left: -28%;
    bottom: -6%;
    width: 6em;
}

/* chapter 2a
   screen 2 frame 1 */

.step-chapter-2a-2 .frame-1 {
    height: 32.5%;
    margin-bottom: 3%;
}

.step-chapter-2a-2 .frame-1 .line-1 {
    top: auto;
    left: 6%;
    bottom: 22%;
    width: 7em;
}

/* chapter 2a
   screen 2 frame 2 */

.step-chapter-2a-2 .frame-2 {
    height: 32%;
    margin-bottom: 3%;
}

.step-chapter-2a-2 .frame-2 .line-1 {
    top: auto;
    right: 8%;
    bottom: 21%;
    width: 6em;
}

/* chapter 2a
   screen 2 frame 3 */

.step-chapter-2a-2 .frame-3 {
    height: 32%;
}

.step-chapter-2a-2 .frame-3 .line-1 {
    top: 20%;
    left: 9%;
    width: 5em;
}

/* chapter 2a
   screen 3 frame 1 */

.step-chapter-2a-3 .frame-1 {
    height: 32.5%;
    margin-bottom: 2.5%;
}

.step-chapter-2a-3 .frame-1 .line-1 {
    top: 16%;
    left: 6%;
    width: 6em;
}

.step-chapter-2a-3 .frame-1 .line-2 {
    top: 43%;
    left: 6%;
    width: 4em;
}

/* chapter 2a
   screen 3 frame 2 */

.step-chapter-2a-3 .frame-2 {
    height: 66%;
}

.step-chapter-2a-3 .frame-2 .line-1 {
    top: 5.5%;
    left: 6%;
    width: 5.5em;
}

/* chapter 2a
   screen 3 frame 3 */

.step-chapter-2a-3 .frame-3 {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
}

.step-chapter-2a-3 .frame-3 .pic {
    z-index: 2;
}

.step-chapter-2a-3 .frame-3 .line-1 {
    top: 36.5%;
    left: auto;
    right: 5.5%;
    width: 6em;
}

.step-chapter-2a-3 .frame-3 .btn-wrap {
    top: 59%;
    bottom: 5%;
}

.step-chapter-2a-3 .frame-3 .button {
    font-size: 22px;
}

@media (min-width: 1200px) {
    .step-chapter-2a-3 .frame-3 .button {
        font-size: 30px;
    }
}

.step-chapter-2a-3 .frame-3 .button:first-child {
    margin-right: 38%;
    width: 8em;
}

.step-chapter-2a-3 .frame-3 .button:last-child {
    margin-left: 35%;
    width: 7em;
}

/* chapter 3a
   screen 1 frame 1 */

.step-chapter-3a-1 .frame-1 .line-1 {
    top: 5%;
    left: 6%;
    width: 5.5em;
}

.step-chapter-3a-1 .frame-1 .line-2 {
    top: 14%;
    left: 6%;
    width: 7.5em;
}

.step-chapter-3a-1 .frame-1 .line-3 {
    top: 25%;
    left: 6%;
    width: 8em;
}

/* chapter 3a
   screen 2 frame 1 */

.step-chapter-3a-2 .frame-1 {
    height: 61.5%;
}

.step-chapter-3a-2 .frame-1 .line-1 {
    top: 10%;
    left: 10%;
    width: 7.5em;
}

.step-chapter-3a-2 .frame-1 .line-2 {
    top: 24.5%;
    left: 10%;
    width: 5em;
}

/* chapter 3a
   screen 2 frame 2 */

.step-chapter-3a-2 .frame-2 {
    height: 47%;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    z-index: 1;
}

.step-chapter-3a-2 .frame-2 .line-1 {
    top: 28%;
    left: 9%;
    width: 5em;
}

/* chapter 3a
   screen 3 frame 2 */

.step-chapter-3a-3 .frame-2 {
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
}

.step-chapter-3a-3 .frame-2 .line-1 {
    top: 7.5%;
    left: 10%;
}

.step-chapter-3a-3 .frame-2 .line-2 {
    top: 17.5%;
    left: 17%;
    width: 6em;
}

/* chapter 3a
   screen 4 frame 1 */

.step-chapter-3a-4 .frame-1 {
    height: 56%;
    margin-bottom: 2%;
}

.step-chapter-3a-4 .frame-1 .line-1 {
    top: auto;
    left: auto;
    right: 10%;
    bottom: 8%;
    width: 5em;
}

/* chapter 3a
   screen 4 frame 2 */

.step-chapter-3a-4 .frame-2 {
    height: 28%;
    top: 5%;
    left: 9%;
    position: absolute;
    width: 41%;
    z-index: 1;
}

.step-chapter-3a-4 .frame-2 .line-1 {
    top: auto;
    left: 10%;
    bottom: -8%;
    width: 6em;
}

/* chapter 3a
   screen 4 frame 3 */

.step-chapter-3a-4 .frame-3 {
    height: 42%;
}

/* chapter 3a
   screen 5 frame 1 */

.step-chapter-3a-5 .frame-1 {
    height: 18%;
    margin-bottom: 2%;
}

/* chapter 3a
   screen 5 frame 2 */

.step-chapter-3a-5 .frame-2 {
    height: 47%;
    margin-bottom: 3%;
}

.step-chapter-3a-5 .frame-2 .line-1 {
    top: 14.5%;
    left: auto;
    right: 15%;
    width: 5.5em;
}

.step-chapter-3a-5 .frame-2 .line-2 {
    top: auto;
    left: 8.5%;
    bottom: 46%;
    width: 7em;
}

.step-chapter-3a-5 .frame-2 .line-3 {
    top: 32%;
    left: auto;
    right: 13%;
    width: 6em;
}

.step-chapter-3a-5 .frame-2 .line-4 {
    top: auto;
    left: 8.5%;
    bottom: 18%;
    width: 7em;
}

/* chapter 3a
   screen 5 frame 3 */

.step-chapter-3a-5 .frame-3 {
    height: 32%;
}

.step-chapter-3a-5 .frame-3 .line-1 {
    top: 15.5%;
    left: auto;
    right: 4%;
    width: 5.5em;
}

.step-chapter-3a-5 .frame-3 .line-2 {
    top: auto;
    left: 5%;
    bottom: 42%;
    width: 5em;
}

/* chapter 2b
   screen 1 frame 1 */

.step-chapter-2b-1 .frame-1 .line-1 {
    top: 8.5%;
    left: auto;
    right: 11%;
    width: 6em;
}

.step-chapter-2b-1 .frame-1 .line-2 {
    top: 19.5%;
    left: auto;
    right: 9.5%;
    width: 8em;
}

.step-chapter-2b-1 .frame-1 .line-3 {
    top: 57.5%;
    left: auto;
    right: 6.5%;
    width: 8em;
}

/* chapter 3b
   screen 1 frame 1 */

.step-chapter-3b-1 .frame-1 .line-1 {
    top: 5%;
    left: 6.5%;
}

.step-chapter-3b-1 .frame-1 .line-2 {
    top: 12%;
    left: 6.5%;
}

.step-chapter-3b-1 .frame-1 .line-3 {
    top: 19%;
    left: 6.5%;
    width: 5em;
}

/* step-canvas */

.step-game {
    overflow: hidden;
}

.game-canvas {
    display: block;
    margin: 0 auto;
    height: calc(var(--vh) * 100);
    width: auto;
}

/* step-final */

.step-fin .btn-wrap {
    top: 60%;
    left: 0;
    right: 0;
    position: absolute;
}

/* game indicators */

.indicators {
    -webkit-animation: appearing 0.5s ease-in-out;
    animation: appearing 0.5s ease-in-out;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    pointer-events: none;
}

.icon-mouse {
    width: 32px;
    height: 32px;
    position: absolute;
    top: 48px;
    left: 7px;
    background: url(../images/mouse.png) center no-repeat;
    background-size: contain;
    z-index: 100;
}

/* floating bar */

.floating-bar {
    top: calc(var(--vh) * 18);
    right: 11px;
    position: absolute;
    height: calc(var(--vh) * 21);
    max-height: 43%;
    width: calc(var(--vh) * 4);
    z-index: 10001;
}

.floating-bar::before,
.floating-bar::after {
    background: url(../images/floating-bar-border.svg) center top no-repeat;
    content: '';
    display: block;
    top: -22%;
    left: 0;
    right: 0;
    bottom: -22%;
    position: absolute;
}

.floating-bar::before {
    background-color: #000;
    z-index: -2;
}

.floating-bar::after {
    transform: scale(-1);
    z-index: -1;
}

.floating-bar-goal,
.floating-bar-arrow {
    bottom: 0;
    position: absolute;
    width: 100%;
    transform: translateY(50%);
    z-index: 1;
}

.floating-bar-arrow {
    transition: bottom 0.5s linear;
}

.floating-bar-goal {
    bottom: 50%;
}

.indicators.inactive .floating-bar-goal {
    bottom: 22%;
}

.indicators.progress-50 .floating-bar-goal {
    bottom: 30%;
}

.indicators.progress-70 .floating-bar-goal {
    bottom: 80%;
}

/* progress bar */

.progress-bar-container {
    background-color: #000;
    border-radius: 8px;
    top: 4px;
    left: 8px;
    position: absolute;
    padding: 10px;
    height: 26px;
    width: 200px;
    z-index: 10001;
}

.progress-bar-container::before {
    border: 1px solid #fff;
    border-radius: 5px;
    box-shadow:
        inset 0 0 2px 1px #00D1FF,
        inset 0 0 4px 1px #00D1FF,
        0 0 2px 1px #00D1FF,
        0 0 4px 1px #00D1FF;
    content: '';
    display: block;
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: -2;
}

.progress-bar {
    background-color: #fff;
    border-radius: 10px;
    transition: width 1s linear;
    height: 100%;
    width: 0;
}

/* image preload */

.loader::after {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    z-index: -10000;
    content: url(../images/chapter-1/ch1-sc1-fr1.jpg)
        url(../images/chapter-1/ch1-sc1-fr2.jpg)
        url(../images/chapter-1/ch1-sc1-fr3.jpg)
        url(../images/chapter-1/ch1-sc2-fr1.jpg)
        url(../images/chapter-1/ch1-sc2-fr2.jpg)
        url(../images/chapter-1/ch1-sc2-fr3.jpg)
        url(../images/chapter-1/ch1-sc2-fr4.jpg)
        url(../images/chapter-1/ch1-sc3-fr1.jpg)
        url(../images/chapter-1/ch1-sc3-fr2.png)
        url(../images/chapter-2a/ch2a-sc1-fr1.png)
        url(../images/chapter-2a/ch2a-sc1-fr2.png)
        url(../images/chapter-2a/ch2a-sc1-fr3.png)
        url(../images/chapter-2a/ch2a-sc1-fr4.png)
        url(../images/chapter-2a/ch2a-sc1-fr5.png)
        url(../images/chapter-2a/ch2a-sc1-fr6.png)
        url(../images/chapter-2a/ch2a-sc2-fr1.jpg)
        url(../images/chapter-2a/ch2a-sc2-fr2.jpg)
        url(../images/chapter-2a/ch2a-sc2-fr3.jpg)
        url(../images/chapter-2a/ch2a-sc3-fr1.jpg)
        url(../images/chapter-2a/ch2a-sc3-fr2.jpg)
        url(../images/chapter-2a/ch2a-sc3-fr3.png)
        url(../images/chapter-2b/ch2b-sc1-fr1.jpg)
        url(../images/chapter-3a/ch3a-sc1-fr1.jpg)
        url(../images/chapter-3a/ch3a-sc2-fr1.png)
        url(../images/chapter-3a/ch3a-sc2-fr2.png)
        url(../images/chapter-3a/ch3a-sc3-fr1.jpg)
        url(../images/chapter-3a/ch3a-sc4-fr1.jpg)
        url(../images/chapter-3a/ch3a-sc4-fr2.jpg)
        url(../images/chapter-3a/ch3a-sc4-fr3.jpg)
        url(../images/chapter-3a/ch3a-sc5-fr1.jpg)
        url(../images/chapter-3a/ch3a-sc5-fr2.jpg)
        url(../images/chapter-3a/ch3a-sc5-fr3.jpg)
        url(../images/chapter-3b/ch3b-sc1-fr1.jpg)
        url(../images/game/gm-fr0.webp)
        url(../images/game/gm-fr1.webp)
        url(../images/game/gm-fr2.webp)
        url(../images/game/gm-fr3.webp)
        url(../images/game/gm-fr4.webp)
        url(../images/game/gm-fr5.webp)
        url(../images/game/gm-fr6.webp)
        url(../images/game/gm-fr7.webp)
        url(../images/game/gm-fr8.webp)
        url(../images/game/gm-fr9.webp)
        url(../images/game/gm-fr10.webp)
        url(../images/game/gm-fr11.webp)
        url(../images/game/gm-fr12.webp)
        url(../images/game/gm-fr13.webp)
        url(../images/game/gm-fr14.webp)
        url(../images/game/gm-fr15.webp)
        url(../images/game/gm-fr16.webp);
}