@media(max-width: 400px) {
    #canvas {
        width: 350px;   /* 50% of 900 */
        height: 250px;  /* 50% of 600 */
        
        image-rendering: crisp-edges;
        image-rendering: pixelated; 
    }
}

canvas {
    margin-top: 20px;
    margin-bottom: 20px;
    touch-action: none; /* prevents scrolling/gestures when touching canvas */
  -ms-touch-action: none;
}

.controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size:24px;
}

#ray1mark {
    background-color: yellow;
    color: black;
}

#ray2mark {
    background-color: magenta;
    color: black;
}

#ray3mark {
    background-color: palegreen;
    color: black;
}