.player {
    position: absolute;
    width: calc(var(--tileWidth) * 1.5);
    height: calc(var(--tileHeight) * 1.5);
    z-index: 5;
    perspective: 50px;
    transform-style: preserve-3d;
}

.player-sprite {
    position: absolute;
    width: calc(var(--tileWidth) * 1.5);
    height: calc(var(--tileHeight) * 1.5);
    background-image: url(../gfx/player.png);
    background-size: contain;

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

.player-sprite.swimming {
    animation-duration: 0.5s;
}

.oxytank,
.oxytank-overlay {
    position: absolute;
    width: 258px;
    height: 501px;
    z-index: 50;
}

.oxytank {
    scale: 0.4;
    translate: -50px -140px;
    background-image: url(../gfx/oxytank_empty.png);
    filter: drop-shadow(10px 10px 0 #222);
    animation-name: oxy-rest;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.oxytank-overlay {
    top: 0;
    left: 0;
    background-image: url(../gfx/oxytank_full.png);
    background-repeat: no-repeat;
    background-position: 0 0;
}

.bubble {
    position: absolute;
    width: calc(var(--tileWidth) / 4);
    height: calc(var(--tileWidth) / 4);
    background-color: white;
    border-radius: 25%;
    z-index: 3;

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