body {
    font-family: Arial, "Comic Sans MS", "Comic Sans", sans-serif;
    margin-left: 1em;
    margin-top: 1em;
    background-color: silver;
    color: black;
}

p, a {
    font-size: 18px;
}

* {box-sizing: border-box;}
        canvas {
            cursor: crosshair;
            width: 500px;
            height: 500px;
            padding: 3px;

        }
        
        .buttons {
            text-align: center
        }

        button {
            border-radius: 0;
            border: none;
            box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf;
            background-color: silver;
            font-size: 16px;
        }

        button:active {
            box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
        }

        input[type="range"] {
            background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v16h2v2h2v2h1v-1H3v-2H1V1h9V0z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 1v15h1v1h1v1h1v1h2v-1h1v-1h1v-1h1V1z' fill='%23C0C7C8'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v15H8v2H6v2H5v-1h2v-2h2z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v16H9v2H7v2H5v1h1v-2h2v-2h2z' fill='%23000'/%3E%3C/svg%3E");
        }

        #gallery {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
        }
        .image-container {
            box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #dfdfdf,inset -2px -2px grey,inset 2px 2px #fff;
            padding: 5px;
            max-width: 200px;
            text-align: center;
        }
        .image-container img {
            max-width: 100%;
            height: auto;
            display: block;
        }

        .flex {
            display: flex;
            margin: 1em;
            gap: 100px;
        }

        .leftSidebar {
            order: 1;
            box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #dfdfdf,inset -2px -2px grey,inset 2px 2px #fff;
            padding: 2px;
        }

        .rightSidebar {
            order: 2;
        }
        

        .galleryContainer {
            text-align: center;
            margin: 1rem;
            padding: 0;
            display: block;
        }
        @media only screen and (max-width: 800px) {
            body {
                text-align: center;
            }
            canvas {
                width: 100%;
                height: 100%;
                margin: auto;
            padding: 0;
            display: block;
            }

            .flex {
                flex-wrap: wrap;
                flex-flow: column;
                gap: 0;
            }
            .leftSidebar {
                order: 2;
            }
    
            .rightSidebar {
                order: 1;
            }

            ul {
                text-align: left;
            }
        }