html, body {
    background-color: rgba(20,20,20);
    overflow: hidden;
    font-family: "Silkscreen";
    -webkit-user-select: none;
    user-select: none;
    margin: 0;
    height: 100dvh;

    touch-action: none;

    -webkit-touch-callout: none;
    -webkit-user-callout: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-modify: none;
    -webkit-highlight: none;
}

.silkscreen-regular {
  font-family: "Silkscreen", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.silkscreen-bold {
  font-family: "Silkscreen", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.canvasContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
}

canvas {
    background-color: rgba(20,20,20);
    /* width: 500px;*/
    width: 100vw;
    /* height: 100vh;  */
    image-rendering: pixelated;
    top: 0;
}

.lowerHUD {
    position: absolute;
    bottom: 8vw;
    z-index: 100;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* height: 50vh; */
    width: 100vw;
    gap: 2vw 2vw;
    flex-wrap: wrap;
}

button {
    width: 20vw;
    height: 20vw;
    font-size: 5vw;
    border-radius: 4vw;
    outline: none;
    border: none;
    background: rgba(100,100,100,0.5);
    color: white;
    font-family: "Silkscreen";
    transition: 0.1s;
    touch-action: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1vw;
}

.emptyButton {
    background: rgba(100,100,100,0.25);
}

p {
    margin: 0;
}

button > svg {
    stroke-width: 1;
    color: #FFFFFF;
    /* fill: #FFFFFF; */
    stroke: #FFFFFF;
    width: 5vw;
    height: 5vw;
}


.costs {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: row;
    gap: 3vw;
}

.costs > div {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: row;
    gap: 1vw;
}

.costs > div > svg {
    width: 5vw;
    height: 5vw;
}

.costs > div > p {
    margin: 0;
    padding-bottom: 0.5vw;
}

.levelLabel {
    color: rgb(195, 195, 195);
    margin-right: 2vw !important;
}

/* button:active {
    scale: 0.9;
    background: rgba(255,255,255,0.15);
    transition: 0.2s;
} */

.wideButton {
    width: 42vw;
}

.tallButton {
    width: 42vw;
}

.hugeButton {
    width: 86vw;
}


.resources {
    width: 86vw;
    height: 20vw;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: row;
    /* gap: 20vw; */
}

.resources > div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 2vw;
}

.resources > div > p {
    /* color: white; */
    font-size: 5vw;
    margin: 0;
    margin-bottom: 1vw;
}

.resources > div > img {
    /* filter:brightness(100); */
    width: 15vw;
    height: 15vw;
}

.resources > div > svg {
    width: 5vw;
    height: 5vw;
}

.energy {
    stroke-width: 1;
    color: #F5D752;
    fill: #F5D752;
    stroke: #F5D752;
}

.material {
    stroke-width: 1;
    color: #2EBFA5;
    fill: #2EBFA5;
    stroke: #2EBFA5;
}

.crystal {
    stroke-width: 1;
    color: #d338f2;
    fill: #d338f2;
    stroke: #d338f2;
}

.tips {
    width: 86vw;
    height: 20vw;
    display: flex;
    align-items:flex-end;
    justify-content: space-around;
    flex-direction: row;
}

.tips > p {
    color: rgba(120, 120, 120, 1);
    font-size: 5vw;
    text-align: center;
    /* bottom: 0; */
}


/* Menu Sections */

.menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100vw;
    gap: 2vw 2vw;
    flex-wrap: wrap;
}

/* .deviceMenu {
    display: none !important;
} */