.heading {
    margin-top: 10px;
    margin-bottom: 10px;
}

.form-row > div {
    margin-top: 5px;
    margin-bottom: 5px;
}

input[type=range] {
    display: block;
    padding: 8px 0;
    width: 100%;
}

.spaced {
    margin-bottom: 10px;
}

.stretch {
    width: 100%;
}

.simulator {
    background-image: url("../img/texture.jpg");
}

.simulator-row {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
}

.simulator-cell {
    flex: 1;
    position: relative;
}

.background {
    width: 100%;
    padding-top: 100%;
}

.background-tree {
    background: url("../img/tree.png") center center no-repeat;
    background-size: contain;
}

.background-tree-burnt {
    background: url("../img/ash.png") center center no-repeat;
    background-size: contain;
}

.background-fire {
    background: url("../img/fire.png") center center no-repeat;
    background-size: contain;
}

.background-fire-animated {
    background: url("../img/fire.gif") center center no-repeat;
    background-size: contain;
}

.background-rock {
    background: url("../img/rock.png") center center no-repeat;
    background-size: contain;
}

.background-house {
    background: url("../img/house.png") center center no-repeat;
    background-size: contain;
}

.background-house-burning {
    background: url("../img/house_burning.png") center center no-repeat;
    background-size: contain;
}

.background-house-burning-animated {
    background: url("../img/house.png") center center no-repeat;
    background-size: contain;
}

.background-house-burning-animated::before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../img/fire.gif") center center no-repeat;
    background-size: contain;
    z-index: 3;
}

.background-volcano-sleeping {
    background: url("../img/volcano-sleeping.png") center center no-repeat;
    background-size: contain;
}

.air-drone::before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../img/drone.gif") center center no-repeat;
    background-size: contain;
    z-index: 5;
}

.water::after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}

.water-0::after {
    background: url("../img/water_0.png") center center no-repeat;
    background-size: contain;
}

.water-1::after {
    background: url("../img/water_1.png") center center no-repeat;
    background-size: contain;
}

.water-2::after {
    background: url("../img/water_2.png") center center no-repeat;
    background-size: contain;
}

.water-3::after {
    background: url("../img/water_3.png") center center no-repeat;
    background-size: contain;
}

.water-4::after {
    background: url("../img/water_4.png") center center no-repeat;
    background-size: contain;
}

.water-5::after {
    background: url("../img/water_5.png") center center no-repeat;
    background-size: contain;
}

.water-6::after {
    background: url("../img/water_6.png") center center no-repeat;
    background-size: contain;
}

.water-7::after {
    background: url("../img/water_7.png") center center no-repeat;
    background-size: contain;
}

.background-volcano-active {
    background: url("../img/volcano-active.png") center center no-repeat;
    background-size: contain;
}

.background-volcano-inactive {
    background: url("../img/volcano-inactive.png") center center no-repeat;
    background-size: contain;
}