body { margin: 0px; padding: 0px; } body > div { position: absolute; top: 0px; left: 0px; width: 100vw; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } body > div > * { margin: 20px; } #camview { max-width: 100vw; box-shadow: 0px 0px 50px 0px black; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; box-sizing: border-box; } #camview.took { position: fixed; right: 0px; bottom: 0px; width: 150px; z-index: 100; display: inline-flex; background-color: white; padding: 10px; } #camview.took > button { font-size: 1em; } #video-container { max-width: 100%; } #camview > button { font-size: 2em; } #precanvas { height: 100%; max-height: 4in; flex-shrink: 0; } #preview { width: 100%; display: inline-block; } .offscreen { position: absolute; top: -10000px; left: -10000px; } video.unbounded { position: absolute; height: 100vw !important; width: auto; } #final { max-width: 100vw; border: 1px solid black; }