:root {
    --blueish-white: #dcffff;
    --blueish-black: #003c3c;
    --ice: #73e2f3;
    --ice-rock: #158898;
    --ice-dark: #002225;
    /*--ice: #002a30;*/
    /*--ice-rock: #002a30;*/
    --icePuzzle-player: #822626;
    --icePuzzle-target: #72ff4b;
}

body {
    background-color: #64ffff;
}

.blueish {
    background-color: var(--blueish-white);
    border-color: var(--blueish-black);
}

#victory-text {
    color: blue;
}

#sliding-holder, #icePuzzle-holder {
    min-height: 77vh;
    > * {
        margin: 2px;
    }
}

#sliding-game-board {
    background-color: white;
    border: 4px solid black;
    display: grid;
    grid-template-columns: repeat(3, 72px);
    grid-template-rows: repeat(3, 72px);
    margin: 4px auto;
    flex: none;
}

#icePuzzles-game-board {
    background-color: white;
    border: 4px solid black;
    display: grid;
    grid-template-columns: repeat(3, 72px);
    grid-template-rows: repeat(3, 72px);
    margin: 4px auto;
    flex: none;
}

.ice, .rock, .wall, .player, .target, .dark, .dark-wall {
    border: 4px solid black;
    margin: 0;
    padding: 0;
}

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

.rock {
    background-color: var(--ice-rock);
}

.dark {
    background-color: var(--ice-dark);
}

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

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

.player {
    background-color: var(--icePuzzle-player) !important;
}

.target {
    background-color: var(--icePuzzle-target);
}

.tile {
    font-size: 36px;
    font-weight: bolder;
    border: 4px solid black;
    margin: 0;
    padding: 0;
    background-color: white;
}

.tile:hover {
    cursor: pointer;
    filter: brightness(.75);
}