:root { --sans-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /*font-size: 120%;*/ } body { margin: 0; padding: 10px; } #main { display: flex; flex-direction: row; justify-content: center; align-items: center; } #mandelbrot { position: relative; width: 800px; height: 600px; flex-shrink: 0; } #mandelbrot-canvas { image-rendering: pixelated; width: 100%; height: 100%; } #progress-canvas { position: absolute; top: 5px; left: 5px; z-index: 1; } #menu-toggle { position: absolute; top: 0; left: 0; width: 30px; height: 30px; z-index: 3; border-radius: 5px; padding: 5px; cursor: pointer; background-color: rgba(0, 0, 0, 0.5); display: none; } #palette-canvas { position: absolute; bottom: 0; left: 0; width: 100%; height: 20px; z-index: 1; } #settings { margin: 20px; padding: 10px; } .collapse-ruler button { height: 1.5rem; font-size: 75%; color: #818a91; padding: .25rem .5rem; background-color: transparent; border: 0; border-radius: .25rem; margin-top: 0.25rem; } .collapse-ruler button:hover { color: #fff; background-color: #027de7; } .collapse-ruler .col { padding-right: 0; } kbd { display: inline-block; padding: 2px 5px; border: 1px solid #999; border-radius: 3px; background-color: #f7f7f7; font-family: monospace; } footer { font-family: var(--sans-font-family); font-size: 80%; text-align: center; padding-top: 10px; } #debug { font-size: inherit; position: absolute; top: 30px; left: 5px; z-index: 1; } @media all and (max-width: 1200px) { :root { font-size: 5vw; } #main { flex-direction: column; } #settings { max-width: min(800px, 100vw); padding: 0; margin: 0; } #mandelbrot { width: min(800px, 100vw); height: min(600px, 75svw); } } @media all and (max-width: 800px) { #main { padding: 0; margin-top: -10px; /* undo the container padding */ } } /*In full-screen mode only show the canvas and progress indicator*/ #main:fullscreen { position: relative; display: block; padding: 0; } #mandelbrot.fullscreen { width: 100vw; height: 100vh; /*position: fixed;*/ /*top: 0;*/ /*left: 0;*/ } #settings.fullscreen { position: absolute; top: 30px; left: 5px; z-index: 2; border-radius: 5px; max-width: 80vw; background-color: rgba(0, 0, 0, 0.5); visibility: visible; opacity: 1; transition: visibility 0.5s, opacity 0.5s linear; } #settings.hidden.fullscreen { visibility: hidden; opacity: 0; } #menu-toggle.fullscreen { display: block; } #menu-toggle.hidden.fullscreen { background: transparent; border: none !important; font-size:0; } #footer.fullscreen { display: none; }