:root { --white: #FFFFFF; --button: #DDE4E7; --hover: #B3BBBD; --active: #8F9598; --background: #949C9E; --black: #000000; } @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; background-color: var(--background); color: var(--black); } .bar { z-index: 2; background-color: var(--button); display: flex; gap: 10px; justify-content: flex-start; flex-wrap: wrap; padding: 10px; } #row { display: flex; flex-direction: row; flex-grow: 1; } #menu-bar, #color-bar { flex-direction: row; } #tool-bar, #layer-bar { flex-direction: column; } #studio { flex-grow: 1; height: 100%; border: 1px solid; cursor: crosshair; } #easel { position: absolute; border: 1px solid; z-index: -1; } canvas { position: absolute; top: 0; left: 0; }