:root{--padding: 28px;--border-width: 10px;--effective-padding: calc(var(--padding) - var(--border-width));--border-radius: 10px;--screen-width: calc((1024px * 4 / 3) + (2 * var(--border-width)))}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;background:teal}#app{display:flex;flex-wrap:nowrap;width:1920px;height:1080px;padding:var(--effective-padding);gap:var(--effective-padding);position:relative}.confetti{position:absolute;animation:confetti-fall 3s linear forwards}@keyframes confetti-fall{0%{top:0;transform:translate(0)}25%{transform:translate(100px)}50%{transform:translate(0)}75%{transform:translate(100px)}to{transform:translate(0);top:1200px}}.green-screen{position:relative;background-color:#0f0}.screen{height:100%;max-width:var(--screen-width);aspect-ratio:4 / 3;border:var(--border-width) solid beige;border-radius:var(--border-radius)}.webcam-timer{flex-grow:1;display:flex;flex-direction:column;gap:var(--effective-padding)}.webcam{width:100%;height:auto;aspect-ratio:4 / 3;border:var(--border-width) solid beige;border-radius:var(--border-radius)}.timer{flex-grow:1;background:beige;border:var(--border-width) solid beige;border-radius:var(--border-radius)}#timer-inner{visibility:hidden;display:flex;flex-wrap:wrap;justify-content:center;height:100%}#block{font-size:55px;font-weight:700;width:100%;text-align:center;color:teal;padding-top:20px}#clock{font-size:145px;width:100%;font-weight:700;text-align:center;color:teal;margin-bottom:0;transform:translateY(-70px)}#techlectic{font-size:30px;width:100%;text-align:center;font-weight:700;color:teal;align-self:flex-end;padding-bottom:20px}#techlectic.big{font-size:40px}#logo{margin-top:55px;display:none;color:#fff;height:200px}#logo>code{font-weight:700;background:teal;border:var(--border-width) solid teal;font-size:200px;padding:0 60px;border-radius:100%}#logo.visible{display:block}