@font-face {
    font-family: HauntingAttraction;
    src: url(HauntingAttraction.ttf);
}

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

body {
    background-color: #000;
    user-select: none;
}

.rotate {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 80vh;
    width: 80vw;
}

.image {
    height: 70vh;
    width: 70vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 2rem;
    opacity: 1;
}

.text, .play_end, .next {
    color: #fff;
    text-align: center;
    padding: 0 5rem;
    margin-top: 1rem;
}

.play_end, .next {
    color: #fff;
    position: absolute;
    font-size: 1rem;
    right: 2vw;
    cursor: pointer;
    display: none;
}

.play_end {
    margin-top: 2rem;
    font-size: 1.5rem;
    display: block;
}

.next {
    margin-top: 2rem;
    display: none;
}

.intro_game_over {
    font-size: 3rem;
    position: absolute;
    top: 16%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    color: #006994;
}

.back {
    color: #fff;
    position: absolute;
    font-size: 1rem;
    left: 2vw;
    cursor: pointer;
    display: none;
    margin-top: 2rem;
}

.breath {
    font-size: 3rem;
    position: absolute;
    top: 23vh;
    left: 17vw;
    display: none;
}

.breath img {
    height: 3rem;
    width: 3rem;
}

.broj {
    color: #fff;
}

.ending-txt {
    display: none;
}

.end-txt, .end-txt2, .end-txt3, .end-txt4 {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1rem;
    text-align: center;
    opacity: 0;
}

.fade_in {
    opacity: 1;
    transition: opacity 3s linear;
}

.fade_out {
    opacity: 0;
    transition: opacity 3s linear;
}

/* DIVS */

/* BOAT */

.bed {
        position: absolute;
        top: 44.5vh;
        left: 53vw;
        height: 4.8rem;
        width: 7.8rem;
        display: none;
    }

.cooler {
    position: absolute;
    top: 44vh;
    left: 40vw;
    height: 1.5rem;
    width: 5rem;
    display: none;
}

.cabinet {
    position: absolute;
    top: 46.5vh;
    left: 73vw;
    height: 9rem;
    width: 5rem;
    display: none;
}

.rope {
    position: absolute;
    top: 85vh;
    left: 20vw;
    height: 1rem;
    width: 5.5rem;
    display: none;
}

.flag {
    position: absolute;
    top: 23.5vh;
    left: 30.5vw;
    height: 3rem;
    width: 2rem;
    display: none;
}

.lamp {
    position: absolute;
    top: 28.3vh;
    left: 60.3vw;
    height: 1.4rem;
    width: 1.4rem;
    border-radius: 50%;
    display: none;
}

.to-boat-outside {
    position: absolute;
    top: 81vh;
    left: 54vw;
    height: 4rem;
    width: 15rem;
    display: none;
}

.water-bottle {
    position: absolute;
    top: 49vh;
    left: 65.5vw;
    height: 2.5rem;
    width: 2.5rem;
    cursor: grab;
    display: none;
}

.wheel {
    position: absolute;
    top: 19.5vh;
    left: 40vw;
    height: 6.5rem;
    width:19rem;
    display: none;
}

.engine {
    position: absolute;
    top: 75vh;
    left: 40vw;
    height: 6.7rem;
    width:21rem;
    display: none;
}

.sky, .sky2 {
    position: absolute;
    top: 19.5vh;
    left: 15vw;
    height: 9rem;
    width:15rem;
    display: none;
}

.sky2 {
    left: 69.5vw;
}

.to-boat-inside {
    position: absolute;
    top: 35vh;
    left: 42vw;
    height: 16.5rem;
    width:16rem;
    display: none;
}

.fire {
    position: absolute;
    height: 15rem;
    width: 30rem;
    top: 25vh;
    left: 30vw;
    display: none;
}

/* UNDERWATER */

.swim-forward {
    position: absolute;
    height: 15rem;
    width: 12rem;
    top: 20vh;
    left: 30vw;
    display: none;
}

.swim-right {
    position: absolute;
    height: 11rem;
    width: 25rem;
    top: 20vh;
    left: 59vw;
    display: none;
}

.rock {
    position: absolute;
    height: 9rem;
    width: 25rem;
    top: 45vh;
    left: 50vw;
    display: none;
}

.swim-back {
    position: absolute;
    height: 10rem;
    width: 10rem;
    top: 68vh;
    left: 15.3vw;
    display: none;
}

/* PLANE FRONT */

.swim-back2 {
    position: absolute;
    height: 32.5rem;
    width: 15rem;
    top: 19.5vh;
    left: 15.3vw;
    display: none;
}

.swim-right2 {
    position: absolute;
    height: 32.5rem;
    width: 15rem;
    top: 19.5vh;
    left: 69.5vw;
     display: none;
}

.nose {
    position: absolute;
    height: 28rem;
    width: 28rem;
    top: 22vh;
    left: 35vw;
    border-radius: 50%;
    display: none;
}

/* PLANE ENTRANCE */

.swim-back3 {
    position: absolute;
    height: 13rem;
    width: 15rem;
    top: 19.5vh;
    left: 15vw;
    display: none;
}

.swim-inside {
    position: absolute;
    height: 13rem;
    width: 7rem;
    top: 42vh;
    left: 73vw;
 display: none;
}

.swim-up {
    position: absolute;
    height: 8rem;
    width: 40rem;
    top: 19.5vh;
    left: 30vw;
    display: none;
}

/* PLANE INSIDE */

.swim-deeper {
    position: absolute;
    height: 3rem;
    width: 8rem;
    top: 42vh;
    left: 42.5vw;
    border-radius: 50%;
    display: none;
}

.table {
    position: absolute;
    height: 5.5rem;
    width: 5rem;
    top: 55vh;
    left: 58.5vw;
    display: none;
}

.cabin {
    position: absolute;
    height: 3rem;
    width: 27rem;
    top: 80vh;
    left: 28.5vw;
    display: none;
}

/* CABIN */

.mask {
    position: absolute;
    height: 8rem;
    width: 30rem;
    top: 60vh;
    left: 40vw;
    transform: rotate(155deg);
    display: none;
}

.controls {
    position: absolute;
    height: 12rem;
    width: 45rem;
    top: 38vh;
    left: 15vw;
    transform: rotate(165deg);
    display: none;
}

/* TO SURFACE, WOODS */

.left, .left2 {
    position: absolute;
    height: 32.5rem;
    width: 10rem;
    top: 19vh;
    left: 15vw;
    display: none;
}

.right, .right2 {
    position: absolute;
    height: 32.5rem;
    width: 10rem;
    top: 19vh;
    left: 74vw;
    display: none;
}

.up {
    position: absolute;
    height: 10rem;
    width: 60rem;
    top: 19vh;
    left: 15vw;
    display: none;
}

.down, .down2 {
    position: absolute;
    height: 10rem;
    width: 60rem;
    top: 67.5vh;
    left: 15vw;
    display: none;
}

/* SURFACE, WOODS2 */

.to-island, .up2 {
    position: absolute;
    height: 10rem;
    width: 50rem;
    top: 42vh;
    left:25vw;
    display: none;
}

/* BODY */

.pockets {
    position: absolute;
    height: 5rem;
    width: 15rem;
    top: 55vh;
    left:41vw;
    display: none;
}

.head {
    position: absolute;
    height: 4rem;
    width: 5rem;
    top: 34.5vh;
    left:51.5vw;
    border-radius: 50%;
    display: none;
}

/* SOUND */

.click-sound, .story-music, .boat-music, .fire-sound, .fire-died, .starting-sound, .underwater-music, .jumpscare, .drown-sound, .mask-sound, .island-music, .end-music {
    display: none;
}

/* RESPONSIVE */

@media only screen and (min-width: 653px) {
    .play_end {
        margin-top: 1rem;
        font-size: 1rem;
    }
    
    .next {
        margin-top: 1rem;
    }
    .intro_game_over {
        font-size: 2rem;
        top: 19%;
    }
    /* BOAT */
    .bed {
        top: 45.5vh;
        left: 53vw;
        height: 3.8rem;
        width: 7.5rem;
    }
.cooler {
    top: 47vh;
    left: 39vw;
    height: 1.5rem;
    width: 5rem;
}
.cabinet {
    top: 48.5vh;
    left: 73vw;
    height: 7rem;
    width: 5rem;
}
.rope {
    top: 87vh;
    left: 19vw;
    height: 1rem;
    width: 6rem;
}
.flag {
    top: 26vh;
    left: 30.5vw;
    height: 2.3rem;
    width: 2rem;
}
.lamp {
    top: 31vh;
    left: 60.3vw;
    height: 1rem;
    width: 1.5rem;
    border-radius: 50%;
}
.to-boat-outside {
    top: 84.7vh;
    left: 54vw;
    height: 2rem;
    width: 6.5rem;
}
.wheel {
    top: 26vh;
    left: 40vw;
    height: 2.5rem;
    width:8rem;
}
.engine {
    top: 82vh;
    left: 41vw;
    height: 2.5rem;
    width:8rem;
}
.sky, .sky2 {
    top: 26vh;
    left: 15vw;
    height: 5rem;
    width:4rem;
}
.sky2 {
    left: 75vw;
}
.to-boat-inside {
    top: 42.5vh;
    left: 42vw;
    height: 6rem;
    width:7rem;
}
.fire {
    height: 5rem;
    width: 12rem;
    top: 35vh;
}
/* UNDERWATER */
.breath {
    font-size: 2rem;
    top: 29vh;
    left: 16.5vw;
}
.breath img {
    height: 2rem;
    width: 2rem;
}
.swim-forward {
    height: 6rem;
    width: 4rem;
    top: 26.5vh;
    left: 30vw;
}

.swim-right {
    height: 4rem;
    width: 10.5rem;
    top: 26.5vh;
    left: 59vw;
}

.rock {
    height: 3.5rem;
    width: 10rem;
    top: 51vh;
    left: 50vw;
}

.swim-back {
    height: 3.8rem;
    width: 3.8rem;
    top: 74.5vh;
    left: 15.3vw;
}
/* PLANE FRONT */

.swim-back2 {
    height: 12.2rem;
    width: 6.5rem;
    top: 26.5vh;
    left: 15.3vw;
}

.swim-right2 {
    height: 12.2rem;
    width: 6.5rem;
    top: 26.5vh;
    left: 69vw;
}

.nose {
    height: 11rem;
    width: 11rem;
    top: 27vh;
    left: 36vw;
    border-radius: 50%;
}
/* PLANE ENTRANCE */

.swim-back3 {
    height: 4.5rem;
    width: 8rem;
    top: 26vh;
    left: 15vw;
}

.swim-inside {
    height: 5rem;
    width: 3rem;
    top: 47vh;
    left: 73vw;
}
.swim-up {
    height: 1.5rem;
    width: 20rem;
    top: 26vh;
    left: 27vw;
}
/* PLANE INSIDE */

.swim-deeper {
    height: 2.5rem;
    width: 7rem;
    top: 44vh;
    left: 42.5vw;
    border-radius: 50%;
}

.table {
    height: 4rem;
    width: 4.5rem;
    top: 57vh;
    left: 58.5vw;
}

.cabin {
    height: 2.5rem;
    width: 22rem;
    top: 82vh;
    left: 31.5vw;
}
/* CABIN */

.mask {
    height: 3rem;
    width: 12rem;
    top: 70vh;
    left: 37vw;
}

.controls {
    height: 5rem;
    width: 17rem;
    top: 45vh;
    left: 15vw;
}
/* TO SURFACE, WOODS */

.left, .left2 {
    height: 13rem;
    width: 5rem;
    top: 25vh;
    left: 15vw;
}

.right, .right2 {
    height: 13rem;
    width: 5rem;
    top: 25vh;
    left: 73vw;
}

.up {
    height: 5rem;
    width: 25rem;
    top: 25vh;
    left: 15vw;
}

.down, .down2 {
    height: 5rem;
    width: 25rem;
    top: 67vh;
    left: 15vw;
}
/* SURFACE, WOODS2 */

.to-island, .up2 {
    height: 4.5rem;
    width: 20rem;
    top: 43vh;
    left: 27vw;
}
/* BODY */

.pockets {
    height: 2rem;
    width: 5rem;
    top: 60vh;
    left:43vw;
}

.head {
    height: 1.5rem;
    width: 2.2rem;
    top: 42vh;
    left:51.5vw;
}
}

@media only screen and (min-width: 667px) {
    /* BOAT */
    .bed {
        top: 44.5vh;
        left: 53vw;
        height: 4.8rem;
        width: 7.8rem;
    }
.cooler {
    top: 44vh;
    left: 40vw;
    height: 1.5rem;
    width: 5rem;
}
.cabinet {
    top: 46.5vh;
    left: 73vw;
    height: 9rem;
    width: 5rem;
}
.rope {
    top: 85vh;
    left: 20vw;
    height: 1rem;
    width: 5.5rem;
}
.flag {
    top: 23.5vh;
    left: 30.5vw;
    height: 3rem;
    width: 2rem;
}
.lamp {
    top: 28.3vh;
    left: 60.3vw;
    height: 1.4rem;
    width: 1.4rem;
    border-radius: 50%;
}
.to-boat-oustide {
    top: 84.7vh;
    left: 54vw;
    height: 2rem;
    width: 6.5rem;
}
.water-bottle {
    top: 49vh;
    left: 65.5vw;
    height: 2.5rem;
    width: 2.5rem;
}
.wheel {
    top: 23.8vh;
    left: 40vw;
    height: 2.5rem;
    width:8rem;
}
.engine {
    top: 83vh;
    left: 41vw;
    height: 2.5rem;
    width:8.5rem;
}
.sky, .sky2 {
    top: 24vh;
    left: 14.8vw;
    height: 6rem;
    width:4.5rem;
}
.sky2 {
    left: 75vw;
}
.to-boat-inside {
    top: 41vh;
    left: 42vw;
    height: 8rem;
    width:7rem;
}
.fire {
    height: 6rem;
    top: 36.5vh;
}
/* UNDERWATER */
.breath {
    font-size: 2rem;
    top: 26.5vh;
    left: 16.5vw;
}
.breath img {
    height: 2rem;
    width: 2rem;
}
.swim-forward {
    height: 7.5rem;
    width: 4rem;
    top: 24.5vh;
    left: 30.5vw;
}

.swim-right {
    height: 5rem;
    width: 11rem;
    top: 24.5vh;
    left: 59vw;
}

.rock {
    height: 4rem;
    width: 10rem;
    top: 49vh;
    left: 50vw;
}

.swim-back {
    height: 4.5rem;
}
/* PLANE FRONT */

.swim-back2 {
    height: 16.2rem;
    width: 6.5rem;
    top: 24.2vh;
    left: 15.3vw;
}

.swim-right2 {
    height: 16.2rem;
    width: 6.5rem;
    top: 24.2vh;
    left: 70vw;
}

.nose {
    height: 13.5rem;
    width: 13.5rem;
    top: 26vh;
    left: 35vw;
    border-radius: 50%;
}
/* PLANE ENTRANCE */
.swim-up {
    height: 4rem;
    width: 20rem;
    top: 24vh;
    left: 27vw;
}

/* CABIN */

.mask {
    height: 3rem;
    width: 15rem;
    top: 65vh;
    left: 35vw;
}

.controls {
    height: 5rem;
    width: 20rem;
    top: 43vh;
    left: 15vw;
}
/* TO SURFACE, WOODS */

.left, .left2 {
    height: 16.5rem;
    width: 6rem;
    top: 23vh;
    left: 15vw;
}

.right, .right2 {
    height: 16.5rem;
    width: 6rem;
    top: 23vh;
    left: 70vw;
}

.up {
    height: 6rem;
    width: 29rem;
    top: 23vh;
    left: 15vw;
}

.down, .down2 {
    height: 6rem;
    width: 29rem;
    top: 68vh;
    left: 15vw;
}
/* SURFACE, WOODS2 */

.to-island, .up2 {
    height: 5rem;
    width: 25rem;
    top: 43vh;
    left: 20vw;
}
/* BODY */

.pockets {
    height: 2rem;
    width: 7rem;
    top: 60vh;
    left:41vw;
}

.head {
    height: 2rem;
    width: 2.5rem;
    top: 39vh;
    left:51vw;
}
}

@media only screen and (min-width: 720px) {
    /* BOAT */
    .bed {
        top: 42vh;
        left: 53vw;
        height: 7rem;
        width: 8.5rem;
    }
.cooler {
    top: 41vh;
    left: 40vw;
    height: 3rem;
    width: 5rem;
}
.cabinet {
    top: 43vh;
    left: 73vw;
    height: 13.5rem;
    width: 5.5rem;
}
.rope {
    top: 82vh;
    left: 20vw;
    height: 1.5rem;
    width: 6rem;
}
.flag {
    top: 21vh;
    left: 30.5vw;
    height: 3.8rem;
    width: 2.5rem;
}
.lamp {
    top: 26vh;
    left: 60.3vw;
    height: 1.8rem;
    width: 1.5rem;
    border-radius: 50%;
}
.to-boat-oustide {
    width: 7rem;
}
.water-bottle {
    top: 46vh;
    left: 65.5vw;
    height: 4rem;
    width: 2.5rem;
}
.wheel {
    top: 21vh;
    left: 41vw;
    height: 2.5rem;
    width:8rem;
}
.engine {
    top: 83.5vh;
    left: 41vw;
    height: 2.5rem;
    width:9.5rem;
}
.sky, .sky2 {
    top: 21vh;
    left: 14.8vw;
    height: 7rem;
    width:7.5rem;
}
.sky2 {
    left: 68.5vw;
}
.to-boat-inside {
    top: 37vh;
    left: 42vw;
    height: 12rem;
    width:7.5rem;
}
.fire {
    height: 8rem;
    top: 35vh;
}
/* UNDERWATER */
.breath {
    font-size: 2rem;
    top: 23vh;
    left: 16.5vw;
}
.breath img {
    height: 2rem;
    width: 2rem;
}
.swim-forward {
    height: 10rem;
    width: 5rem;
    top: 21.5vh;
    left: 30vw;
}

.swim-right {
    height: 8rem;
    width: 11.7rem;
    top: 21.5vh;
    left: 59vw;
}

.rock {
    height: 6rem;
    width: 11rem;
    top: 46.5vh;
    left: 50vw;
}

.swim-back {
    height: 5.5rem;
    width: 7rem;
}
/* PLANE FRONT */

.swim-back2 {
    height: 23.5rem;
    width: 6.5rem;
    top: 21vh;
    left: 15.3vw;
}

.swim-right2 {
    height: 23.5rem;
    width: 6.5rem;
    top: 21vh;
    left: 70vw;
}

.nose {
    height: 20rem;
    width: 13.5rem;
    top: 24vh;
    left: 35vw;
    border-radius: 50%;
}
/* PLANE ENTRANCE */

.swim-back3 {
    height: 7rem;
    width: 11rem;
    top: 21vh;
    left: 15vw;
}

.swim-inside {
    height: 9rem;
    width: 3.5rem;
    top: 42vh;
    left: 73vw;
}
.swim-up {
    height: 3rem;
    width: 20rem;
    top: 21vh;
    left: 27vw;
}
/* PLANE INSIDE */

.swim-deeper {
    height: 4rem;
    width: 7.5rem;
    top: 40vh;
    left: 42.5vw;
    border-radius: 50%;
}

.table {
    height: 8rem;
    width: 5rem;
    top: 52vh;
    left: 58.5vw;
}

.cabin {
    height: 4rem;
    width: 22rem;
    top: 79vh;
    left: 31.5vw;
}
/* SURFACE, WOODS2 */

.to-island, .up2 {
    height: 6rem;
    width: 25rem;
    top: 45vh;
    left: 23vw;
}
/* BODY */

.pockets {
    height: 3rem;
    width: 6rem;
    top: 60vh;
    left:42vw;
}

.head {
    height: 2.5rem;
    width: 2.5rem;
    top: 37vh;
    left:51.5vw;
}
}

@media only screen and (min-width: 740px) {
    /* BOAT */
    .bed {
        top: 43vh;
        left: 53vw;
        height: 5rem;
        width: 8.5rem;
    }
.cooler {
    top: 43vh;
    left: 40vw;
    height: 2rem;
    width: 5rem;
}
.cabinet {
    top: 46vh;
    left: 73vw;
    height: 9rem;
    width: 5.5rem;
}
.rope {
    top: 85vh;
    left: 19vw;
    height: 1rem;
    width: 6.5rem;
}
.flag {
    top: 24vh;
    left: 30.5vw;
    height: 2.8rem;
    width: 2.5rem;
}
.lamp {
    top: 28.5vh;
    left: 60.3vw;
    height: 1.4rem;
    width: 1.6rem;
    border-radius: 50%;
}
.water-bottle {
    height: 2.5rem;
}
.wheel {
    top: 23.8vh;
    left: 40vw;
    height: 2.5rem;
    width:8rem;
}
.engine {
    top: 83vh;
    left: 41vw;
    height: 2.5rem;
    width:8.5rem;
}
.sky, .sky2 {
    top: 24vh;
    left: 14.8vw;
    height: 6rem;
    width:4.5rem;
}
.sky2 {
    left: 75vw;
}
.to-boat-inside {
    top: 41vh;
    left: 42vw;
    height: 8rem;
    width:7rem;
}
.fire {
    height: 7rem;
    top: 31vh;
}
/* UNDERWATER */
.breath {
    font-size: 2rem;
    top: 27vh;
    left: 16.5vw;
}
.breath img {
    height: 2rem;
    width: 2rem;
}
.swim-forward {
    height: 7rem;
    width: 4rem;
    top: 24.7vh;
    left: 31vw;
}

.swim-right {
    height: 5.2rem;
    width: 12rem;
    top: 24.5vh;
    left: 59vw;
}

.rock {
    height: 3.5rem;
    width: 11.5rem;
    top: 50vh;
    left: 50vw;
}

.swim-back {
    height: 4.5rem;
    width: 7rem;
}
/* PLANE FRONT */

.swim-back2 {
    height: 16rem;
    width: 6.5rem;
    top: 23.5vh;
    left: 15.3vw;
}

.swim-right2 {
    height: 16rem;
    width: 6.5rem;
    top: 23.5vh;
    left: 72vw;
}

.nose {
    height: 14rem;
    width: 13.5rem;
    top: 24vh;
    left: 35vw;
    border-radius: 50%;
}
/* PLANE ENTRANCE */

.swim-back3 {
    height: 5rem;
    width: 10rem;
    top: 23.5vh;
    left: 15vw;
}

.swim-inside {
    height: 7rem;
    width: 3.5rem;
    top: 44vh;
    left: 73vw;
}
/* SURFACE, WOODS2 */

.to-island, .up2 {
    height: 4.5rem;
    width: 25rem;
    top: 45vh;
    left: 23vw;
}
}

@media only screen and (min-width: 896px) {
    /* BOAT */
    .bed {
        top: 44.5vh;
        left: 53vw;
        height: 4.8rem;
        width: 10.5rem;
    }
.cooler {
    top: 44vh;
    left: 42vw;
    height: 2rem;
    width: 5rem;
}
.cabinet {
    top: 46.5vh;
    left: 73vw;
    height: 9rem;
    width: 6.8rem;
}
.rope {
    top: 85vh;
    left: 20vw;
    height: 1rem;
    width: 7rem;
}
.flag {
    top: 23vh;
    left: 30.5vw;
    height: 3rem;
    width: 3rem;
}
.lamp {
    top: 27.5vh;
    left: 60.3vw;
    height: 1.5rem;
    width: 2rem;
    border-radius: 50%;
}
.to-boat-oustide {
    width: 9rem;
}
.water-bottle {
    top: 48vh;
    left: 65.5vw;
    height: 3rem;
    width: 3.5rem;
}
.wheel {
    top: 23vh;
    left: 42vw;
    height: 3.5rem;
    width:9rem;
}
.engine {
    top: 81vh;
    left: 41vw;
    height: 3rem;
    width:11rem;
}
.sky, .sky2 {
    top: 23vh;
    left: 15vw;
    height: 7rem;
    width:6rem;
}
.sky2 {
    left: 75vw;
}
.to-boat-inside {
    top: 39vh;
    left: 42.5vw;
    height: 9rem;
    width:8.5rem;
}
.fire {
    height: 7rem;
    top: 33vh;
}
/* UNDERWATER */
.breath {
    font-size: 2rem;
    top: 26vh;
    left: 16.5vw;
}
.breath img {
    height: 2rem;
    width: 2rem;
}
.swim-forward {
    height: 8rem;
    width: 4rem;
    top: 23.5vh;
    left: 31vw;
}

.swim-right {
    height: 5.5rem;
    width: 14.5rem;
    top: 23.5vh;
    left: 59vw;
}

.rock {
    height: 4.5rem;
    width: 14rem;
    top: 48vh;
    left: 50vw;
}

.swim-back {
    height: 4.3rem;
    width: 8.5rem;
    top: 76vh;
}
/* PLANE FRONT */

.swim-back2 {
    height: 18rem;
    width: 6.5rem;
    top: 23.5vh;
    left: 15.3vw;
}

.swim-right2 {
    height: 18rem;
    width: 8rem;
    top: 23.5vh;
    left: 70.5vw;
}

.nose {
    height: 16rem;
    width: 16rem;
    top: 24.5vh;
    left: 35vw;
    border-radius: 50%;
}
/* PLANE INSIDE */

.swim-deeper {
    height: 3rem;
    width: 9rem;
    top: 42.5vh;
    left: 42.5vw;
    border-radius: 50%;
}

.table {
    height: 6rem;
    width: 6.5rem;
    top: 55vh;
    left: 58vw;
}

.cabin {
    height: 3rem;
    width: 32.5rem;
    top: 81.5vh;
    left: 27vw;
}
/* CABIN */

.mask {
    height: 3rem;
    width: 15rem;
    top: 70vh;
    left: 35vw;
}

.controls {
    height: 5rem;
    width: 25rem;
    top: 45vh;
    left: 15vw;
}
/* SURFACE, WOODS2 */

.to-island, .up2 {
    height: 5rem;
    width: 25rem;
    top: 43vh;
    left: 30vw;
}
/* BODY */

.pockets {
    height: 3rem;
    width: 8rem;
    top: 58vh;
    left:42vw;
}

.head {
    height: 2rem;
    width: 3rem;
    top: 38.5vh;
    left:51.5vw;
}
}

@media only screen and (min-width: 844px) {
    /* BOAT */
    .bed {
        top: 44.5vh;
        left: 53vw;
        height: 4.8rem;
        width: 10.5rem;
    }
.cooler {
    top: 44vh;
    left: 42vw;
    height: 2rem;
    width: 5rem;
}
.cabinet {
    top: 46.5vh;
    left: 73vw;
    height: 9rem;
    width: 6.3rem;
}
.rope {
    top: 85vh;
    left: 20vw;
    height: 1rem;
    width: 7rem;
}
.flag {
    top: 23vh;
    left: 30.5vw;
    height: 3rem;
    width: 3rem;
}
.lamp {
    top: 27.5vh;
    left: 60.3vw;
    height: 1.5rem;
    width: 2rem;
    border-radius: 50%;
}
.to-boat-oustide {
    width: 8.5rem;
}
.water-bottle {
    top: 49vh;
    left: 65.5vw;
    height: 2.5rem;
    width: 3rem;
}
.wheel {
    top: 23.5vh;
    left: 41vw;
    height: 3.5rem;
    width:9rem;
}
.engine {
    top: 83vh;
    left: 41vw;
    height: 2.5rem;
    width:10.5rem;
}
.sky, .sky2 {
    top: 23.5vh;
    left: 15vw;
    height: 6rem;
    width:6rem;
}
.sky2 {
    left: 74vw;
}
.to-boat-inside {
    top: 40vh;
    left: 43vw;
    height: 8.5rem;
    width:8rem;
}
.fire {
    top: 33vh;
}
/* UNDERWATER */
.swim-forward {
    height: 7.5rem;
    width: 5rem;
    top: 24vh;
    left: 31vw;
}

.swim-right {
    height: 5.5rem;
    width: 13.7rem;
    top: 24vh;
    left: 59vw;
}

.rock {
    height: 4.5rem;
    width: 13rem;
    top: 47.5vh;
    left: 50vw;
}

.swim-back {
    height: 4.5rem;
    width: 8rem;
}
/* SURFACE, WOODS2 */

.to-island, .up2 {
    height: 5rem;
    width: 25rem;
    top: 43vh;
    left: 30vw;
}
}

@media only screen and (min-width: 1180px) {
    .play_end {
        margin-top: 3rem;
        font-size: 2rem;
    }
    
    .next {
        margin-top: 3rem;
    }
    .intro_game_over {
        font-size: 5rem;
        top: 15%;
    }
    /* BOAT */
    .bed {
        top: 40vh;
        left: 53vw;
        height: 10rem;
        width: 13.5rem;
    }
.cooler {
    top: 40vh;
    left: 40vw;
    height: 4rem;
    width: 9rem;
}
.cabinet {
    top: 41vh;
    left: 73vw;
    height: 20rem;
    width: 9rem;
}
.rope {
    top: 80vh;
    left: 20vw;
    height: 2.5rem;
    width: 10rem;
}
.flag {
    top: 19vh;
    left: 30.5vw;
    height: 5.5rem;
    width: 4rem;
}
.lamp {
    top: 24vh;
    left: 60.3vw;
    height: 3rem;
    width: 2.5rem;
    border-radius: 50%;
}
.to-boat-oustide {
    top: 81vh;
    height: 4rem;
    width: 12rem;
}
.water-bottle {
    top: 44vh;
    left: 65.5vw;
    height: 6rem;
    width: 4.5rem;
}
.wheel {
    top: 19vh;
    left: 41vw;
    height: 7rem;
    width:13rem;
}
.engine {
    top: 81vh;
    left: 41vw;
    height: 4rem;
    width:15rem;
}
.sky, .sky2 {
    top: 19vh;
    left: 14.8vw;
    height: 12rem;
    width:10rem;
}
.sky2 {
    left: 72vw;
}
.to-boat-inside {
    top: 35vh;
    left: 42vw;
    height: 18rem;
    width:12rem;
}
.fire {
    height: 13rem;
    width: 24rem;
    top: 35vh !important;
}
/* UNDERWATER */
.breath {
    font-size: 3rem;
    top: 21vh;
    left: 16.5vw;
}
.breath img {
    height: 3rem;
    width: 3rem;
}
.swim-forward {
    height: 16rem;
    width: 6rem;
    top: 19.5vh;
    left: 32vw;
}

.swim-right {
    height: 12rem;
    width: 19rem;
    top: 19.5vh;
    left: 59vw;
}

.rock {
    height: 8rem;
    width: 18rem;
    top: 45vh;
    left: 50vw;
}

.swim-back {
    height: 8rem;
    width: 11rem;
    top: 73vh;
    left: 15.3vw;
}

/* PLANE FRONT */

.swim-back2 {
    height: 35rem;
    width: 10rem;
    top: 20vh;
    left: 15.3vw;
}

.swim-right2 {
    height: 35rem;
    width: 10rem;
    top: 20vh;
    left: 71vw;
}

.nose {
    height: 30rem;
    width: 24rem;
    top: 23vh;
    left: 34vw;
    border-radius: 50%;
}
/* PLANE ENTRANCE */

.swim-back3 {
    height: 13rem;
    width: 15rem;
    top: 19.5vh;
    left: 15vw;
}

.swim-inside {
    height: 13rem;
    width: 6rem;
    top: 42vh;
    left: 73vw;
}
.swim-up {
    height: 4rem;
    width: 30rem;
    top: 19.5vh;
    left: 27vw;
}
/* PLANE INSIDE */

.swim-deeper {
    height: 6.5rem;
    width: 12rem;
    top: 37.5vh;
    left: 42.5vw;
    border-radius: 50%;
}

.table {
    height: 12.5rem;
    width: 9rem;
    top: 50vh;
    left: 58.5vw;
}

.cabin {
    height: 6rem;
    width: 40.5rem;
    top: 77vh;
    left: 30vw;
}
/* CABIN */

.mask {
    height: 6rem;
    width: 25rem;
    top: 67vh;
    left: 35vw;
}

.controls {
    height: 10rem;
    width: 36rem;
    top: 42vh;
    left: 15vw;
}
/* TO SURFACE, .WOODS */

.left, .left2 {
    height: 35rem;
    width: 8rem;
    top: 20vh;
    left: 15vw;
}

.right, .right2 {
    height: 35rem;
    width: 8rem;
    top: 20vh;
    left: 73vw;
}

.up {
    height: 8rem;
    width: 45rem;
    top: 20vh;
    left: 15vw;
}

.down, .down2 {
    height: 8rem;
    width: 45rem;
    top: 73vh;
    left: 15vw;
}
/* SURFACE, WOODS2 */

.to-island, .up2 {
    height: 8rem;
    width: 45rem;
    top: 43vh;
    left: 20vw;
}
/* BODY */

.pockets {
    height: 4rem;
    width: 10rem;
    top: 58vh;
    left:42vw;
}

.head {
    height: 4rem;
    width: 4rem;
    top: 35vh;
    left:51.5vw;
}
}

@media only screen and (min-width: 1024px) {
    .play_end {
        margin-top: 3rem;
        font-size: 2rem;
    }
    
    .next {
        margin-top: 3rem;
    }
    .intro_game_over {
        font-size: 4rem;
        top: 15%;
    }
    /* BOAT */
    .bed {
        top: 40vh;
        left: 53vw;
        height: 8rem;
        width: 12.5rem;
    }
.cooler {
    top: 40vh;
    left: 40vw;
    height: 4rem;
    width: 8rem;
}
.cabinet {
    top: 42vh;
    left: 73vw;
    height: 15rem;
    width: 8rem;
}
.rope {
    top: 80vh;
    left: 20vw;
    height: 2.5rem;
    width: 9rem;
}
.flag {
    top: 20.5vh;
    left: 30.5vw;
    height: 4rem;
    width: 3.5rem;
}
.lamp {
    top: 24.8vh;
    left: 60.3vw;
    height: 2.2rem;
    width: 2.2rem;
    border-radius: 50%;
}
.to-boat-oustide {
    top: 81vh;
    height: 4rem;
    width: 10rem;
}
.water-bottle {
    top: 45vh;
    left: 65.5vw;
    height: 5.5rem;
    width: 4rem;
}
.wheel {
    top: 19.2vh;
    left: 41vw;
    height: 6.5rem;
    width:11rem;
}
.engine {
    top: 82vh;
    left: 41vw;
    height: 3.5rem;
    width:13rem;
}
.sky, .sky2 {
    top: 19.5vh;
    left: 15vw;
    height: 8rem;
    width:11rem;
}
.sky2 {
    left: 68vw;
}
.to-boat-inside {
    top: 37vh;
    left: 42.5vw;
    height: 13rem;
    width:10rem;
}
.fire {
    height: 11rem;
    width: 20rem;
    top: 34vh;
}
/* UNDERWATER */
.breath {
    font-size: 3rem;
    top: 21vh;
    left: 16.5vw;
}
.breath img {
    height: 3rem;
    width: 3rem;
}
.swim-forward {
    height: 15rem;
    width: 5.5rem;
    top: 20vh;
    left: 32vw;
}

.swim-right {
    height: 10.5rem;
    width: 16.5rem;
    top: 20vh;
    left: 59vw;
}

.rock {
    height: 7.5rem;
    width: 18rem;
    top: 45vh;
    left: 48vw;
}

.swim-back {
    height: 8rem;
    width: 10rem;
    top: 73vh;
    left: 15.3vw;
}

/* PLANE FRONT */

.swim-back2 {
    height: 26rem;
    width: 8rem;
    top: 20vh;
    left: 15.3vw;
}

.swim-right2 {
    height: 26rem;
    width: 8rem;
    top: 20vh;
    left: 73vw;
}

.nose {
    height: 23rem;
    width: 20rem;
    top: 22vh;
    left: 34vw;
    border-radius: 50%;
}
/* PLANE ENTRANCE */

.swim-back3 {
    height: 12rem;
    width: 15rem;
    top: 19.5vh;
    left: 15vw;
}

.swim-inside {
    height: 13rem;
    width: 5rem;
    top: 42vh;
    left: 73vw;
}
.swim-up {
    height: 4rem;
    width: 30rem;
    top: 19.5vh;
    left: 27vw;
}
/* PLANE INSIDE */

.swim-deeper {
    height: 6rem;
    width: 10rem;
    top: 38vh;
    left: 43vw;
    border-radius: 50%;
}

.table {
    height: 12rem;
    width: 7.5rem;
    top: 50vh;
    left: 58.5vw;
}

.cabin {
    height: 5.5rem;
    width: 34.5rem;
    top: 77vh;
    left: 31.5vw;
}
/* CABIN */

.mask {
    height: 5rem;
    width: 25rem;
    top: 65vh;
    left: 35vw;
}

.controls {
    height: 8rem;
    width: 35rem;
    top: 40vh;
    left: 15vw;
}
/* TO SURFACE, WOODS */

.left, .left2 {
    height: 20rem;
    width: 8rem;
    top: 20vh;
    left: 15vw;
}

.right, .right2 {
    height: 20rem;
    width: 8rem;
    top: 20vh;
    left: 73vw;
}

.up {
    height: 8rem;
    width: 45rem;
    top: 20vh;
    left: 15vw;
}

.down, .down2 {
    height: 8rem;
    width: 45rem;
    top: 70vh;
    left: 15vw;
}
/* SURFACE, WOODS2 */

.to-island, .up2 {
    height: 8rem;
    width: 35rem;
    top: 43vh;
    left: 25vw;
}
/* BODY */

.pockets {
    height: 3rem;
    width: 8rem;
    top: 58vh;
    left:42vw;
}

.head {
    height: 4rem;
    width: 3rem;
    top: 35vh;
    left:51.5vw;
}
}

@media only screen and (min-width: 1280px) {
    /* BOAT */
    .bed {
        top: 40vh;
        left: 53vw;
        height: 10rem;
        width: 15rem;
    }
.cooler {
    top: 40vh;
    left: 40vw;
    height: 4rem;
    width: 9rem;
}
.cabinet {
    top: 41vh;
    left: 73vw;
    height: 20rem;
    width: 9.5rem;
}
.rope {
    top: 80vh;
    left: 19vw;
    height: 2.5rem;
    width: 11rem;
}
.flag {
    top: 19vh;
    left: 30.5vw;
    height: 5.5rem;
    width: 4rem;
}
.lamp {
    top: 24vh;
    left: 60.3vw;
    height: 3rem;
    width: 3rem;
    border-radius: 50%;
}
.to-boat-oustide {
    width: 12.5rem;
}
.water-bottle {
    top: 44vh;
    left: 65.5vw;
    height: 6rem;
    width: 5rem;
}
.wheel {
    top: 19vh;
    left: 41vw;
    height: 7rem;
    width:14rem;
}
.engine {
    top: 81vh;
    left: 41vw;
    height: 4rem;
    width:16rem;
}
.sky, .sky2 {
    top: 19vh;
    left: 15vw;
    height: 12rem;
    width:10rem;
}
.sky2 {
    left: 72.5vw;
}
.to-boat-inside {
    top: 35vh;
    left: 42vw;
    height: 17rem;
    width:13rem;
}
.fire {
    height: 13rem;
    width: 23rem;
    top: 31vh;
}
/* UNDERWATER */
.swim-forward {
    height: 15rem;
    width: 6rem;
    top: 20vh;
    left: 32vw;
}

.swim-right {
    height: 11rem;
    width: 20.6rem;
    top: 20vh;
    left: 59vw;
}

.rock {
    height: 8rem;
    width: 20rem;
    top: 45vh;
    left: 50vw;
}

.swim-back {
    height: 8rem;
    width: 12rem;
    top: 73.5vh;
    left: 15.3vw;
}
/* PLANE FRONT */

.swim-back2 {
    height: 35rem;
    width: 12rem;
    top: 19vh;
    left: 15.3vw;
}

.swim-right2 {
    height: 35rem;
    width: 12rem;
    top: 19vh;
    left: 71vw;
}

.nose {
    height: 30rem;
    width: 27rem;
    top: 20vh;
    left: 34vw;
    border-radius: 50%;
}
/* BODY */

.pockets {
    height: 5rem;
    width: 10rem;
    top: 58vh;
    left:42vw;
}

.head {
    height: 4rem;
    width: 4rem;
    top: 35vh;
    left:51.5vw;
}
}

@media only screen and (min-width: 1368px) {
    /* BOAT */
    .bed {
        top: 40vh;
        left: 53vw;
        height: 10rem;
        width: 16rem;
    }
.cooler {
    top: 39vh;
    left: 40vw;
    height: 4.5rem;
    width: 9.5rem;
}
.cabinet {
    top: 41vh;
    left: 73vw;
    height: 20rem;
    width: 10.5rem;
}
.rope {
    top: 80vh;
    left: 19.5vw;
    height: 2.5rem;
    width: 13rem;
}
.flag {
    top: 18.5vh;
    left: 30.5vw;
    height: 6.5rem;
    width: 4.5rem;
}
.lamp {
    top: 23.5vh;
    left: 60.3vw;
    height: 3rem;
    width: 3rem;
    border-radius: 50%;
}
.to-boat-inside {
    top: 35vh;
    left: 43vw;
    height: 20rem;
    width:13rem;
}
.fire {
    height: 13rem;
    width: 26rem;
    top: 33vh;
}
/* UNDERWATER */
.swim-forward {
    height: 6rem;
    width: 4rem;
    top: 26.5vh;
    left: 30vw;
}

.swim-right {
    height: 4rem;
    width: 10.5rem;
    top: 26.5vh;
    left: 59vw;
}

.rock {
    height: 3.5rem;
    width: 10rem;
    top: 51vh;
    left: 50vw;
}

.swim-back {
    height: 3.8rem;
    width: 3.8rem;
    top: 74.5vh;
    left: 15.3vw;
}

/* PLANE FRONT */

.swim-back2 {
    height: 39.5rem;
    width: 12rem;
    top: 19vh;
    left: 15.3vw;
}

.swim-right2 {
    height: 39.5rem;
    width: 12rem;
    top: 19vh;
    left: 71vw;
}

.nose {
    height: 35rem;
    width: 27rem;
    top: 20vh;
    left: 34vw;
    border-radius: 50%;
}
/* PLANE INSIDE */

.swim-deeper {
    height: 7.5rem;
    width: 14.5rem;
    top: 37vh;
    left: 42.5vw;
    border-radius: 50%;
}

.table {
    height: 13rem;
    width: 9rem;
    top: 50vh;
    left: 58.5vw;
}

.cabin {
    height: 7rem;
    width: 45rem;
    top: 76vh;
    left: 30vw;
}
/* TO SURFACE, WOODS */

.left, .left2 {
    height: 30rem;
    width: 8rem;
    top: 20vh;
    left: 15vw;
}

.right, .right2 {
    height: 30rem;
    width: 8rem;
    top: 20vh;
    left: 73vw;
}

.up {
    height: 8rem;
    width: 60rem;
    top: 20vh;
    left: 15vw;
}

.down, .down2 {
    height: 8rem;
    width: 60rem;
    top: 70vh;
    left: 15vw;
}
/* SURFACE, WOODS2 */

.to-island, .up2 {
    height: 9rem;
    width: 40rem;
    top: 43vh;
    left: 30vw;
}
/* BODY */

.pockets {
    height: 4rem;
    width: 12rem;
    top: 58vh;
    left:42vw;
}

.head {
    height: 4rem;
    width: 4.5rem;
    top: 35vh;
    left:51.5vw;
}
}

@media (orientation:portrait) {
    .image, .text, .play_end, .next, .intro_game_over, .back, .breath, .breath img, .broj, .ending-txt, .end-txt, .end-txt2, .end-txt3, .end-txt4, .fade_in, .fade_out, .bed, .cooler, .cabinet, .rope, .flag, .lamp, .to-boat-outside, .water-bottle, .wheel, .engine, .sky, .sky2, .to-boat-inside, .fire, .swim-forward, .swim-right, .rock, .swim-back, .swim-back2, .swim-right2, .nose, .swim-back3, .swim-inside, .swim-up, .swim-deeper, .table, .cabin, .mask, .controls, .left, .left2, .right, .right2, .up, .down, .down2, .pockets, .head {
        visibility: hidden;
    }
    .rotate {
        display: block;
    }
}