.scene-wrapper.subpage {
    margin-top: -128px;
    height: 412px;
}

.scene-wrapper {
    position: relative;
    height: 512px;
    user-select: none;
    overflow-x: clip;
    overflow-y: visible;
}

.scene {
    position: absolute;
    height: 1280px;
    left: 0;
    right: 0;
    top: 0;
    background-image: url(/img/scene2/scene.jpg);
    background-repeat: repeat-x;
    background-position-x: calc(50% + 128px * 0.65 * 1.5);
    background-size: calc(2944px * 0.65);
}

.scene.scene-dynamic-content {
    transform: scale(0.65, 0.65);
}

@media (max-width: 576px) {
    h1 {
        font-size: 2.2rem;
    }

    .scene-wrapper {
        margin-bottom: -128px;
    }

    .scene {
        transform: scale(0.75);
        transform-origin: top;
        width: 150%;
        margin-left: -25%;
    }
}

.scene-dynamic-content {
    position: relative;
    width: 0;
    height: 0;
    margin: auto;
    transform: scale(0.65, 0.65);
}

.scene-dynamic-content > img, .scene-dynamic-content > div.inhabitant {
    position: absolute;
    pointer-events: none;
}

.building {
    transform-origin: bottom;
    transform: translate(-50%, -25%);
}

.field {
    transform-origin: bottom;
    transform: translate(-50%, -12%);
}

.field:not(.growing) {
    pointer-events: all;
    cursor: pointer;
}

.tree {
    transform-origin: bottom;
    animation-name: wave;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

.tree.mirror {
    animation-name: wave_mirror;
}

.tree.chopped {
    animation-name: chop;
    animation-duration: 0.1s;
}

.tree.chopped.mirror {
    animation-name: chop_mirror;
}

.tree:not(.growing) {
    pointer-events: all;
    cursor: pointer;
}

@keyframes wave {
    0% {
        transform: translate(-50%, -95%) skewX(2deg);
    }
    50% {
        transform: translate(-50%, -95%) skewX(-2deg);
    }
    100% {
        transform: translate(-50%, -95%) skewX(2deg);
    }
}

@keyframes wave_mirror {
    0% {
        transform: translate(-50%, -95%) skewX(2deg) scaleX(-1);
    }
    50% {
        transform: translate(-50%, -95%) skewX(-2deg) scaleX(-1);
    }
    100% {
        transform: translate(-50%, -95%) skewX(2deg) scaleX(-1);
    }
}

@keyframes chop {
    0% {
        transform: translate(-50%, -95%) skewX(4deg);
    }
    50% {
        transform: translate(-50%, -95%) skewX(-4deg);
    }
    100% {
        transform: translate(-50%, -95%) skewX(4deg);
    }
}

@keyframes chop_mirror {
    0% {
        transform: translate(-50%, -95%) skewX(4deg) scaleX(-1);
    }
    50% {
        transform: translate(-50%, -95%) skewX(-4deg) scaleX(-1);
    }
    100% {
        transform: translate(-50%, -95%) skewX(4deg) scaleX(-1);
    }
}

.inhabitant {
    transform-origin: bottom;
    width: 96px;
    height: 96px;
    transform: translate(-50%, -95%)
}

.sheep {
    transform-origin: bottom;
    animation-name: breathe;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.sheep.mirror {
    animation-name: breathe-mirror;
}

@keyframes breathe {
    0% {
        transform: translate(-50%, -95%) scale(1);
    }
    50% {
        transform: translate(-50%, -95%) scale(1, 1.05);
    }
    100% {
        transform: translate(-50%, -95%) scale(1);
    }
}

@keyframes breathe-mirror {
    0% {
        transform: translate(-50%, -95%) scale(1) scaleX(-1);
    }
    50% {
        transform: translate(-50%, -95%) scale(1, 1.05) scaleX(-1);
    }
    100% {
        transform: translate(-50%, -95%) scale(1) scaleX(-1);
    }
}

.windmill {
    z-index: 10000 !important;
    animation-name: rotate;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.watermill {
    animation-name: rotate;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.watermill.back {
    animation-name: rotate_back;
}

@keyframes rotate {
    0% {
        transform: translate(-50%, -35%) rotate(0);
    }
    100% {
        transform: translate(-50%, -35%) rotate(-360deg);
    }
}

@keyframes rotate_back {
    0% {
        transform: translate(-50%, -35%) rotate(0) scale(0.9);
    }
    100% {
        transform: translate(-50%, -35%) rotate(-360deg) scale(0.9);
    }
}

.deco {
    transform-origin: bottom;
    transform: translate(-50%, -95%);
}

.grass {
    transform-origin: bottom;
    animation-name: grass-wave;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.grass.mirror {
    animation-name: grass-wave-mirror;
}

@keyframes grass-wave {
    0% {
        transform: translate(-50%, -95%) skewX(3deg);
    }
    50% {
        transform: translate(-50%, -95%) skewX(-3deg);
    }
    100% {
        transform: translate(-50%, -95%) skewX(3deg);
    }
}

@keyframes grass-wave-mirror {
    0% {
        transform: translate(-50%, -95%) skewX(3deg) scaleX(-1);
    }
    50% {
        transform: translate(-50%, -95%) skewX(-3deg) scaleX(-1);
    }
    100% {
        transform: translate(-50%, -95%) skewX(3deg) scaleX(-1);
    }
}