.tile {
    position: relative;
    /* Creates variables for the tile that can */
    /* be set later using inline styling or with a class*/
    --fgColor: red;
    --bgColor: blue;
    --size: 108px;

    /* Creates mask variable */
    --mask: url("/images/tiles/default.png");

    /* Sets the css properties according to the 
    values of the variables that were written in the styling */
    
    background-color: var(--bgColor);
    width: var(--size);
    height: var(--size);
}

.tile::before {
    content: "";
    position: absolute;
    inset: 0;

    /* The background color of the mask layer
    functions as the FORGROUND color of the tile*/
    background-color: var(--fgColor);
    image-rendering: pixelated;

    /* sets up the layer as a mask. 
    What shape? the tiles inline styling 
    will set this property using --mask later. */
    -webkit-mask-image: var(--mask);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;

    mask-image: var(--mask);
    mask-repeat: no-repeat;
    mask-size: contain;
}

/* tile types override the mask variable */
.tile.mountain {
    --mask: url("/images/tiles/mountain.png");
    --size: 108px;
    --fgColor: #162135;
    --bgColor: black;
    
}
.tile.water {
    -mask: url("/images/tiles/water.png");
}