html {
    background-color: darkgreen;
}

body > * button {
    border-radius: 0.5rem;
    box-shadow: 0.3rem 0.3rem 0.3rem black;
}

body > * button:disabled {
    background-color: #1f2b2b;
    color: #999797;
}

.ore-gain-info {
    text-align: center;
    font-size: 3rem;
    margin: 2rem;
}

#current-ore-amount {
    background-color: dimgray;
    border-radius: 0.5rem;
    box-shadow: 0.5rem 0.5rem 0.5rem black;
    padding: 1rem;
    text-shadow: 0.2rem 0.2rem grey;
}

#levels {
    max-height: 50rem;
    overflow-y: auto;
    padding: 5rem 0rem;
    background-color: rgb(92, 53, 3);
}

.level {
    text-align: center;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.level-canvas {
    background-color: burlywood;
    display: inline-block;
}

.level-canvas canvas {
    width: 70rem;
    height: 6rem;
    border: 0.3rem solid rgb(49, 28, 1);
    vertical-align: middle;
}

.add-miner-button {
    display: inline-block;
    width: 4rem;
    height: 6rem;
    vertical-align: middle;
    background-image: url('Art/miner_moose.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #7c744e;
    color: #d2f3f9;
}

.new-level-button-parent {
    text-align: center;
    margin: 1rem;
}

#add-new-level {
    width: 15rem;
    height: 3rem;
    background-color: darkgoldenrod;
    color: lavenderblush;
}

#add-new-level:disabled {
    background-color: #1f2b2b;
    color: #575656;
}

/* Custom fonts */
.rubik-dirt-regular {
  font-family: "Rubik Dirt", system-ui;
  font-weight: 400;
  font-style: normal;
}

.special-elite-regular {
  font-family: "Special Elite", system-ui;
  font-weight: 400;
  font-style: normal;
}