:root {
    --color-water: linear-gradient(180deg, dodgerblue, aquamarine);
    --color-crate: linear-gradient(-180deg, peru, saddlebrown);
    --color-fire: linear-gradient(90deg, yellow, goldenrod);
    --color-wall: linear-gradient(45deg, black, lightslategray);
    --color-empty: blanchedalmond;
    --board-width: 48rem;
    --board-height: 48rem;
    --board-angle-x: 45deg;
    --board-angle-y: 0deg;
    --board-angle-z: -25deg;
    --board-perspective: 48rem;
    --board-scale-x: 1;
    --board-scale-y: 1;
    --board-scale-z: 1;
    --accent-color: gold;
    --secondary-color: forestgreen;
}

html, body {
    font-size: 16px;
    font-family: Verdana, sans-serif;
    min-height: 96vh;
    min-width: 96vw;
    background: black url("../images/alexandre-godreau-359029.jpg") no-repeat top left fixed;
    background-size: contain;
    color: white;
}

*, *:before, *:after {
    box-sizing: border-box;
}

input {
    line-height: 1.5;
    padding: .3em .8em;
}

.main {
    margin: 0 auto;
    width: var(--board-width);
    height: var(--board-height);
    perspective: var(--board-perspective);
}

.main table {
    border: none;
    border-collapse: collapse;
    margin: 0 auto;
    width: var(--board-width);
    height: var(--board-height);
    background-color: transparent;
    transform: rotate3d(1, 0, 0, var(--board-angle-x, 45deg)) rotate3d(0, 0, 1, var(--board-angle-z, -25deg)) scale3d(var(--board-scale-x, 1), var(--board-scale-y, 1), var(--board-scale-z, 1));
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
}

.main table td {
    border: 1px dotted black;
    padding: 0;
    margin: 0;
    width: 3rem;
    height: 3rem;
}

ul.menu {
    list-style-type: "";
    list-style-image: none;
}

ul.menu.horizontal {
    display: flex;
    flex-direction: row;
    gap: 2em;
    justify-content: center;
    align-items: start;
}

ul.menu.vertical {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 2em;
    justify-content: center;
    align-items: start;
}

.btn {
    font-weight: 700;
    font-family: Arial, Helvetica, sans-serif;
    padding: .3em .8em;
    border: 1px solid rgba(0, 0, 0, .1);
    background: silver linear-gradient(hsla(0, 0%, 100%, .2), transparent);
    border-radius: .2em;
    box-shadow: 0 .05em .25em rgba(0, 0, 0, .5);
    color: white;
    text-shadow: 0 -.05em .05em rgba(0, 0, 0, .5);
    font-size: 125%;
    line-height: 1.5;
    cursor: pointer;
}

.btn.btn-cta {
    color: black;
    background-color: var(--accent-color);
}

.btn.btn-secondary {
    color: white;
    background-color: var(--secondary-color);
}

.cell {
    filter: opacity(0.7);
}

.wall {
    background: var(--color-wall);
}

.fire {
    background: var(--color-fire);
}

.water {
    background: var(--color-water);
}

.crate {
    background: var(--color-crate);
}

/* defaults to empty cell aesthetic */
.cell {
    background: var(--color-empty);
}

.tools {
    display: flex;
    flex-direction: row;
    gap: 1em;
    justify-content: end;
    align-content: start;
    position: fixed;
    top: 16px;
    right: 16px;
    width: max-content;
    height: max-content;
}

.cell.wall {
    background: var(--color-wall);
}

.cell.fire {
    background: var(--color-fire);
}

.cell.water {
    background: var(--color-water);
}

.cell.crate {
    background: var(--color-crate);
}

.cell:hover, .tools .btn:hover {
    border: 2px dashed var(--accent-color);
    filter: drop-shadow(2px 4px 10px var(--accent-color));
    transition: all ease-in-out 300ms;
}

@media (hover: hover) and (pointer: fine) {
    .cell:hover, .tools .btn:hover {
        border: 2px dashed var(--accent-color);
        filter: drop-shadow(2px 4px 10px var(--accent-color));
        transition: all ease-in-out 300ms;
    }
}

.cell:target, .tools .btn:target {
    border: 2px dashed var(--accent-color);
    filter: drop-shadow(2px 4px 10px var(--accent-color));
    transition: all ease-in-out 300ms;
}