#root {
    display: flex;
    justify-content: space-between;
}

#elements {
    width: 40%;
}

#elements>div>button {
    width: 70%;
    display: inline-flex;
    justify-content: space-between;
}

#elements>div>span {
    width: 30%;
    font-size: 83%;
    padding-left: 0.6em;
}

#shop,
#upgrades {
    width: 40%;
    padding: 0 1%;
}

:is(#upgrades, #shop)>div>button {
    width: 100%;
}

:is(#upgrades, #shop)>div>button>span:nth-child(1) {
    display: block;
    font-size: 120%;
    text-align: left;
}

:is(#upgrades, #shop)>div>button:disabled>span:nth-child(1) {
    color: #0f0;
}

:is(#upgrades, #shop)>div>button>span:nth-child(1):after {
    content: ":";
}

:is(#upgrades, #shop)>div>button>span:nth-child(2) {
    display: block;
}

:is(#upgrades, #shop)>div>button>span:nth-child(3) {
    display: block;
    font-size: x-small;
    text-align: right;
}

:is(#upgrades, #shop)>div>button>span:nth-child(3):before {
    content: "Cost: ";
}

:is(#upgrades, #shop)>div>button:disabled>span:nth-child(3) {
    font-size: 0;
}

:is(#upgrades, #shop)>div>button:disabled>span:nth-child(3):before {
    font-size: x-small;
    content: "Owned";
}

button {
    border-radius: 0.6em;
    margin-bottom: 0.2ex;
    color: #000;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#element-Fire,
#shopItem-fire-buyer,
#shopItem-fire-boost,
#upgrade-fire-upgrade,
#shopItem-fire-culture {
    background-color: #faa;
    background-image: url("icons/fire.png");
}

#element-Water,
#shopItem-water-buyer,
#shopItem-water-boost,
#upgrade-water-upgrade,
#shopItem-water-culture {
    background-color: #aaf;
    background-image: url("icons/water.png");
}

#element-Earth,
#shopItem-earth-buyer,
#shopItem-earth-boost,
#upgrade-earth-upgrade,
#shopItem-earth-culture {
    background-color: #afa;
    background-image: url("icons/earth.png");
}

#element-Air,
#shopItem-air-buyer,
#shopItem-air-boost,
#upgrade-air-upgrade,
#shopItem-air-culture {
    background-color: #ffc;
    background-image: url("icons/air.png");
}

#element-Metal,
#shopItem-metal-buyer,
#upgrade-furnace,
#exchange-Metal-Metal,
#shopItem-metal-culture {
    background-color: #d97;
    background-image: url("icons/metal.png");
}

#element-Ice,
#shopItem-ice-buyer,
#upgrade-freezer,
#exchange-Ice-Ice,
#shopItem-ice-culture {
    background-color: #aff;
    background-image: url("icons/ice.png");
}

#element-Power,
#shopItem-power-buyer,
#upgrade-generator,
#upgrade-dynamo,
#exchange-Power-Power {
    background-color: #ff8;
    background-image: url("icons/power.png");
}

#element-Sludge,
#shopItem-sludge-buyer,
#upgrade-composter,
#exchange-Sludge-Sludge {
    background-color: #cc8;
    background-image: url("icons/sludge.png");
}

#element-Glass,
#shopItem-glass-buyer {
    background-color: #eff;
    background-image: url("icons/glass.png");
}

#element-Lead,
#shopItem-lead-buyer,
#exchange-Lead-Lead {
    background-color: #aab;
    background-image: url("icons/lead.png");
}

#element-Copper,
#shopItem-copper-buyer,
#exchange-Copper-Copper {
    background-color: #e62;
    background-image: url("icons/copper.png");
}

#element-Aether,
#shopItem-aether-buyer,
#shopItem-all-buyer,
#upgrade-buyer-buyer,
#upgrade-aether-unlock,
#upgrade-heirloom,
#upgrade-transmutation-1,
#upgrade-transmutation-2,
#upgrade-transmutation-3,
#upgrade-transmutation-4,
#shopItem-aether-boost,
#shopItem-aether-culture,
#upgrade-heirloom-2,
#upgrade-heirloom-3,
#exchange-Aether-Aether-Power,
#exchange-Aether-Aether-Bulk,
#exchange-Aether-Aether-Lead {
    background-color: #222;
    color: #fff;
    background-image: url("icons/aether.png");
}

#upgrade-victory {
    background-color: #ec6;
    background-image: url("icons/gold.png");
}

:root {
    font-size: 1.2em;
}

body,
a {
    color: #fff;
}

h1,
p,
span,
button,
label {
    font-family: "Quintessential", serif;
    font-weight: 400;
    font-style: normal;
}

#bg1,
#bg2,
#bg3,
#bg4 {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    opacity: 50%;
}

#bg1 {
    background: linear-gradient(225deg, rgba(34, 51, 102, 1) 0%, rgba(0, 0, 0, 1) 100%);
    z-index: -3;
    opacity: 100%;
}

#bg2 {
    background-image: url(stars.png);
    background-size: 2in;
    background-repeat: repeat;
    animation: 80s linear infinite running scroll;
}

#bg3 {
    background-image: url(stars.png);
    background-size: 2.6in;
    background-repeat: repeat;
    animation: 301s linear infinite running scroll2;
}

#bg4 {
    background-image: url(stars.png);
    background-size: 1.8in;
    background-repeat: repeat;
    animation: 303s linear infinite running scroll3;
}

@keyframes scroll {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 12in -4in;
    }
}

@keyframes scroll2 {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -7.8in -2.6in;
    }
}

@keyframes scroll3 {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 1.8in 3.2in;
    }
}