.debug_cell
{
    border: 1px lime solid;
}
.cell
{
    position: absolute;
    z-index: 2;
    cursor: help;
    background-repeat: no-repeat;
    /**TEMP**/
    color:white;
    font-size: small;
    text-align: center;
}
.on::after
{
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: fit-content;
    height: fit-content;
    content: "🟢";
}
.off::after
{
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: fit-content;
    height: fit-content;
    content: "🔴";
}
.stone
{
    background: gray;
    background-image: url("../img/stone.png");
    background-size: contain;
}
.clay
{
    background: rgb(204, 112, 95);
    background-image: url("../img/clay.png");
    background-size: contain;
}
.basalt
{
    background: rgb(59, 59, 59);
    background-image: url("../img/basalt.png");
    background-size: contain;
}
.atop
{
    border-top:3px rgb(47, 54, 47) solid ;
    transform: translateY(-3px);
}
.coal
{
    background: black;
    background-image: url("../img/coal.png");
    background-size: contain;
}
.graphene
{
    background: black;
    background-image: linear-gradient(315deg, black 0%, rgb(59, 56, 56) 74%);
}
.iron
{
    background: rgb(197, 177, 165);
    background-image: url("../img/iron.png");
    background-size: contain;
}
.gold
{
    background: gold;
    background-image: url("../img/gold.png");
    background-size: contain;
}
.copper
{
    background: rgb(255, 145, 0);
    background-image: url("../img/copper.png");
    background-size: contain;
}
.diamond
{
    background: rgb(7, 235, 243);
    background-image: url("../img/diamond.png");
    background-size: contain;
}
.platinium
{
    background: rgb(227, 242, 243);
    background-image: url("../img/platinium.png");
    background-size: contain;
}
.hydrogen
{
    background: rgba(250, 146, 163, 0.795);
    background-size: contain;
}
.oxygen
{
    background: rgba(146, 229, 250, 0.795);
    background-size: contain;
}
.air
{
    background: transparent;
}
.coalGenerator
{
    background: rgb(71, 36, 36);
}
.battery
{
    background: rgb(198, 101, 207);
}
.ceramicOven
{
    background: rgb(138, 8, 8);
}
.steelForge
{
    background: rgb(143, 160, 71);
}
.geothermalGenerator
{
    background: rgb(4, 51, 53);
}
.uraniumCentrifuge
{
    background: rgb(184, 202, 17);
}
.nuclearReactor
{
    background: rgb(229, 255, 0);
    animation: radioactive 1s ease-in-out infinite alternate;
}
.rockCrusher
{
    background: rgb(7, 170, 108);
}
.grapheneForge
{
    background: rgb(114, 0, 124);
}
.waterPump
{
    background: rgb(46, 83, 92);
}
.oxygenExtractor
{
    background: rgb(33, 149, 179);
}

.electrolyzer
{
    background: rgb(23, 212, 203);
}

.water
{
    background: rgb(26, 74, 163);
    background-image: url("../img/water.png");
    background-size: contain;
    transform-origin: bottom;
}
.magma
{
    background: rgb(197, 57, 1);
    background-image: url("../img/magma.png");
    background-size: contain;
    animation: magmaGlow 2s ease-in-out infinite alternate;
    transform-origin: bottom;
}
@keyframes magmaGlow {
    from {box-shadow: red 0px 0px 1px;}
    to {box-shadow: red 0px 0px 5px;}
}
.uranite
{
    background: rgb(7, 172, 7);
    background-image: url("../img/uranite.png");
    background-size: contain;
}
.geode
{
    background: rgb(21, 36, 41);
    background-image: url("../img/geode.png");
    background-size: contain;
}
.uranium
{
    background: rgb(0, 255, 0);
    box-shadow: lime 0px 0px 3px;
    animation: radioactive 1s ease-in-out infinite alternate;
}
@keyframes radioactive {
    from {box-shadow: lime 0px 0px 1px;}
    to {box-shadow: lime 0px 0px 7px 2px;}
}
.steel
{
    background-color: #e3efe8;
    background-image: linear-gradient(315deg, #e3efe8 0%, #96a7cf 74%);
}
.ceramic
{
    background: rgb(90, 9, 22);
}
.sparePartA,.sparePartB,.sparePartC
{
    background-color: #e3efe8;
    background-image: linear-gradient(315deg, #e3efe8 0%, #96a7cf 74%);
    border-radius: 10px;
}