@font-face { font-family: 'VT323'; src: url('fonts/VT323-Regular.ttf') format('truetype'); } div { box-sizing: border-box; } body { margin: 0; overflow: hidden; display: flex; flex-direction: column; height: 100vh; width: 100vw; font-family: 'VT323', monospace; } #menu-bar, #info-bar { padding: 10px; background-color: #ddd; display: flex; flex-direction: row; gap: 10px; justify-content: flex-start; } #menu-bar { order: 1; } #info-bar { order: 3; } #row { display: flex; flex-direction: row; flex-grow: 1; order: 2; } #tool-bar, #layer-bar { display: flex; padding: 10px; padding-top: 0; background-color: #ddd; gap: 10px; height: 100%; flex-direction: column; justify-content: flex-start; } #canvas-area { background-color: darkgray; flex-grow: 1; height: 100%; border: 1px solid; cursor: crosshair; } #canvas-container { position: absolute; border: 1px solid; background-color: white; } #canvas { display: block; } .button { background-color: #ddd; border: 1px solid; border-radius: 2px; width: 30px; height: 30px; padding: 5px; display: flex; flex-direction: column; text-align: center; justify-content: center; } .puck { width: 30px; height: 30px; border: 1px solid; border-radius: 2px; } .button.active, .button:active { background-color: darkgray; }