#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100%;height:100%;background-color:#333}body{overflow:hidden;background-color:#000;height:100vh;width:100vw}*{border:0;box-sizing:border-box;margin:0;padding:0}html{height:100vh;width:100vw}#video{position:absolute;top:0;left:0;display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;z-index:1}.overlayContainer{position:absolute;top:0;left:0;bottom:0;right:0;z-index:2}.overlay{border:2px var(--accent-bg) solid;z-index:2;position:fixed;pointer-events:none}.overlay>span{background-color:var(--accent-bg);padding:1rem;margin:0 1rem;font-size:1rem;text-transform:capitalize;display:inline-block;transform:translateY(-1rem);pointer-events:auto}.voice-available{cursor:pointer}.voice-available:after{content:" 🔈"}.being-spoken{color:red}.being-spoken:after{content:"🔊"}.ui{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;justify-content:space-between;z-index:3;pointer-events:none}nav{display:flex;justify-content:space-between;margin:1rem;padding:1rem}#logo{display:flex;align-items:center;color:var(--accent-bg);position:relative;z-index:9}#logo>svg{width:40px;fill:var(--accent-bg)}#logo>span{margin-left:1rem;user-select:none}#switch-camera{width:40px;height:40px;fill:var(--accent-bg);cursor:pointer;display:none;pointer-events:auto}#switch-camera.available{display:block}.ui>div{z-index:4}:root{--accent-bg:rgb(255, 231, 76);--accent-bg-alpha:rgba(255, 231, 76, 0.5);--accent:rgb(0, 0, 0)}.photo-button{width:80px;height:80px;display:inline-block;border-radius:40px;position:absolute;transform:translateY(-25%) translateX(-50%);margin:0 50%;top:0;transition:top .4s ease-in;z-index:9;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.circle{position:absolute;display:inline-block;top:24%;left:24%;bottom:24%;right:24%;border-radius:100%;background-color:var(--accent-bg);opacity:.8;clip-path:polygon(0 0,0 0,0 0,0 100%,0 100%,0 100%,100% 100%,100% 100%,100% 100%,100% 0,100% 0,100% 0);transition:clip-path .4s,background-color .4s}.close>.circle{clip-path:polygon(10% 0,0 10%,40% 50%,0 90%,10% 100%,50% 60%,90% 100%,100% 90%,60% 50%,100% 10%,90% 0,50% 40%);background-color:red}.eye>.circle{top:33%;left:30%;bottom:27%;right:30%;opacity:1;animation:2s ease-out look-around infinite}.circle:after{width:20%;height:30%;content:"";background-color:#fff;display:inline-block;position:absolute;right:20%;top:35%;border-radius:50%;opacity:0;transition:opacity .2s}.eye>.circle:after{opacity:.5;animation:2s ease-out look-around infinite}@keyframes look-around{0%,100%{transform:translateX(0)}25%{transform:translateX(-20%)}75%{transform:translateX(20%)}}.eye>.ring{border-width:.3em;opacity:1}.ring{position:absolute;top:0;left:0;bottom:0;right:0;display:inline-block;border-radius:100%;border:.4em solid var(--accent-bg);opacity:.8;transition:background-color .3s,border-color .4s}.eyelid{position:absolute;border-radius:50%;top:0;left:0;bottom:0;right:0;display:inline-block;overflow:hidden}.close>.ring{border-color:red}.photo-button.eye{opacity:.8}.photo-button::after{content:" ";display:block;border-radius:50%;border:0 solid;position:absolute;top:-20px;left:-20px;bottom:-20px;right:-20px;border-color:var(--accent-bg) transparent var(--accent-bg) transparent;transition:border-width .4s,transform .4s;animation:dual-ring 1.2s linear infinite}.page-loader.photo-button{top:-40vh;opacity:1!important;cursor:default!important}.page-loader>*{opacity:1!important}.page-loader.photo-button::after{border-width:.5rem}.photo-button::before{width:110vw;height:250vh;content:'';transform:translateX(calc(-50% + 30px)) translateY(-50%);background-color:#333;opacity:1;z-index:5;display:block;clip-path:circle(0 at 50% 50%);transition:clip-path .4s ease-in}.page-loader.photo-button::before{clip-path:circle(71% at 50% 50%)}@keyframes dual-ring{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.eyelid::after{display:inline-block;width:100%;height:0%;content:"";background-color:var(--accent-bg);transition:height ease-in .2s}.photo-button.eye>.eyelid::after{height:100%;animation:blink 2.2s infinite ease-in-out}@keyframes blink{0%,10%,100%{transform:translateY(-50%)}4.5%,5.5%{transform:translateY(0)}}.photo-button .circle,.photo-button .ring{transition:all .25s;cursor:pointer}.photo-button:hover .circle{opacity:1}.photo-button:active .ring{opacity:1}.photo-button:active .circle{opacity:.5}.controls{position:relative;display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin:2rem;padding:.5rem;pointer-events:auto}.button{background-color:var(--accent-bg);color:var(--accent);border-color:var(--accent);border-radius:1rem;border-width:2px;font-weight:700;padding:.5rem 1rem;cursor:pointer;font-size:.85rem}.button.active{color:red}#language-dropdown-menu{background-color:var(--accent-bg);color:var(--accent);font-weight:700;position:absolute;bottom:60px;border-radius:1rem;overflow:hidden;display:none}#dropdown-toggle{display:none}#dropdown-toggle:checked~#language-dropdown-menu{display:block}#dropdown-toggle:checked~#language-choice-trigger{color:red}.dropdown-content{display:flex;flex-direction:column}.dropdown-item{display:inline-block;color:var(--accent);text-decoration:none;padding:.5rem 1rem;font-size:.8rem;text-align:center}.dropdown-item.active,.dropdown-item:hover{background-color:#fff}