:root {
    --grid-row-count: 10;
    --grid-column-count: 18;

    --cell-color: tomato;
    --active-cell-color: chocolate;

    --crosshair-color: lightseagreen;
    --crosshair-thickness: 5px;

    --vector-color: limegreen;
    --vector-thickness: 5px;
}


html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; 
    cursor: none;
}


.crosshair {
    position:fixed;
    z-index:10;
    background-color: var(--crosshair-color);
    top: 0;
    left: 0;
    /* transition: transform 0.01s linear; */
    z-index: 9999;
    pointer-events: none;
    user-drag: none;
    user-select: none;
}

#vertical-crosshair {
    width: var(--crosshair-thickness);
    height: 100%;
}

#horizontal-crosshair {
    width: 100%;
    height: var(--crosshair-thickness);
}

#main-container {
    width: 100%;
    height: 100%;
    display: flex;
    background-color: bisque;
}


#grid-box {
    margin: 3em;
    flex-grow: 1;
    display: grid;
    grid-template-columns: repeat(var(--grid-column-count), 1fr);
    user-drag: none;
    user-select: none;
}

.cell {
    border: 2px solid darksalmon;
}


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

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

.cell:hover {
    filter: brightness(0.9) hue-rotate(-5deg);
}