@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .abs { position: absolute; } a { color: white; text-decoration: none; } a:hover { color: lightblue; } body { bottom: 0; font-family: "Titillium Web", sans-serif; color: white; left: 0; margin: 0; position: absolute; right: 0; top: 0; transform-origin: 0px 0px; overflow: hidden; } .container { position: absolute; background-color: #596e73; width: 100%; max-height: 100%; } .input_video { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .input_video.selfie { transform: scale(-1, 1); } .input_image { position: absolute; } .canvas-container { display: flex; height: 100%; width: 100%; justify-content: center; align-items: center; } .output_canvas { max-width: 100%; display: block; position: relative; left: 0; top: 0; } .logo { bottom: 10px; right: 20px; } .logo .title { color: white; font-size: 28px; } .logo .subtitle { position: relative; color: white; font-size: 10px; left: -30px; top: 20px; } .control-panel { position: absolute; left: 10px; top: 10px; } .loading { display: flex; position: absolute; top: 0; right: 0; bottom: 0; left: 0; align-items: center; backface-visibility: hidden; justify-content: center; opacity: 1; transition: opacity 1s; } .loading .message { font-size: x-large; } .loading .spinner { position: absolute; width: 120px; height: 120px; animation: spin 1s linear infinite; border: 32px solid #bebebe; border-top: 32px solid #3498db; border-radius: 50%; } .loaded .loading { opacity: 0; } .shoutout { left: 0; right: 0; bottom: 40px; text-align: center; font-size: 24px; position: absolute; }