.level-container {
    position: relative;
    top: 0;
}

.tile {
    position: absolute;
    width: var(--tileWidth);
    height: var(--tileHeight);
    z-index: 1;
}

.tile.hidden {
    opacity: 1;
    scale: 1;
    translate: 0 0;
    /*background: red !important;*/
}

.tile.hidden.found {
    transition: opacity 1s, scale 1s, translate 1s;
    opacity: 0;
    scale: 0;
    translate: 0 -50%
}

.tile.waves {
    background-image: url(../gfx/waves.png);
    background-size: cover;
    animation-name: scrollLeft;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.tile.sky {
    background-color: white;
}

.tile.ground {
    background-image: url(../gfx/ground.png);
    background-size: cover;
    transform: scale(1.3);
    z-index: 10;

    animation: ground-wiggle;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.tile.open-water {
    background-color: #797979;
    z-index: 2;
}

.tile.decoration-1 {
    background-image: url(../gfx/seaweed.png);
    background-size: cover;
    background-position: 0 0;
    z-index: 3;

    animation: seaweed 1s steps(6) infinite;
}

.tile.decoration-2 {
    background-image: url(../gfx/seaweed.png);
    background-size: cover;
    background-position: 0 0;
    scale: 1.6;
    z-index: 3;

    animation: seaweed 1s steps(6) infinite;
}

.tile.decoration-3 {
    background-image: url(../gfx/pillar.png);
    background-size: cover;
    background-position: 0 0;
    scale: 2;
    translate: 0 calc(var(--tileHeight) / 3 * -1);
    z-index: 3;
}

.tile.decoration-4 {
    background-image: url(../gfx/pillar.png);
    background-size: cover;
    background-position: 0 0;
    scale: -1.3 1.3;
    translate: 0 calc(var(--tileHeight) / 6 * -1);
    z-index: 3;
}

.tile.decoration-5 {
    background-image: url(../gfx/vines.png);
    background-size: cover;
    background-position: 0 0;
    scale: 1.3;
    translate: 0 calc(var(--tileHeight) / 4);
    z-index: 3;
}

.tile.decoration-6 {
    background-image: url(../gfx/eyes.png);
    background-size: cover;
    background-position: 0 0;
    scale: -1.5 1.5;
    z-index: 10;
    animation: eyes 14s steps(20) infinite;
}

.tile.decoration-6 {
    background-image: url(../gfx/eyes.png);
    background-size: cover;
    background-position: 0 0;
    scale: 1.5;
    z-index: 10;
    animation: eyes 14s steps(20) infinite;
}

.tile.decoration-7 {
    background-image: url(../gfx/ship.png);
    background-size: cover;
    background-position: 0 0;
    width: calc(var(--tileHeight) * 4);
    height: calc(var(--tileHeight) * 2);
    z-index: 10;
}

.dust,
.dust-hidden {
    position: absolute;
    width: calc(var(--tileWidth) / 6);
    height: calc(var(--tileWidth) / 6);
    background-color: black;
    border-radius: 25%;
    z-index: 3;

    animation: bubbles;
    animation-duration: 1s;
    animation-timing-function: linear;
}

.dust-hidden {
    background-color: white;
    animation: bubbles-down;
    animation-duration: 1s;
    animation-timing-function: linear;
}