body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.S1{text-align:center}.S1-header{color:#fff;background-color:#282c34;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;font-size:calc(10px + 2vmin);display:flex}button{color:#fff;background-color:#7f7fd8;border-radius:10px;font-size:calc(15px + 3vmin)}.start-button{color:#fff;background-color:#7f7fd8;border-radius:2vh;margin:10vh;padding:2vh 10vh;font-size:calc(15px + 3vmin)}input{color:#fff;background-color:#9399a5;font-size:calc(10px + 2vmin)}.stop-button{background-color:#9399a5;padding:2vmin;font-size:x-large}.whole-page-container{background-color:#282c34;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.left-side{background-color:#282c34;width:50%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.right-side{width:50%;height:100%;position:absolute;top:0;left:50%;overflow:hidden}.title{color:#fff;font-size:x-large}.footer-text{color:#fff;margin-bottom:1vmin;font-size:large}.vertical-center{flex-direction:column;justify-content:center;align-items:center;height:100%;display:flex}.footer{flex-direction:column;align-items:center;margin-top:auto;margin-bottom:0;padding:2vmin;display:flex;position:absolute;bottom:0}.header{color:#fff;z-index:1;margin:auto 5px 0;font-size:x-large;position:absolute;top:5%}.video{min-height:100%;position:absolute;top:50%;left:50%;transform:translateY(-50%)translate(-50%)scaleX(-1)}.video-flipped{min-height:100%;position:absolute;top:50%;left:50%;transform:translateY(-50%)translate(-50%)}.recordings{z-index:1;width:25vmin;height:12.5vmin;margin:10px;position:absolute;left:0}.loading-bubbles{width:160px;height:80px;display:inline-block;position:absolute;bottom:10vh;left:50%;transform:translate(-50%)}.loading-bubbles div{background-image:linear-gradient(71deg,#ff0 -14%,#b3fe00 86%,#aafe00 86%);border-radius:50%;width:26px;height:26px;animation-timing-function:cubic-bezier(0,1,1,0);position:absolute;top:33px}.loading-bubbles div:first-child{animation:.6s infinite loading-bubbles1;left:16px}.loading-bubbles div:nth-child(2){animation:.6s infinite loading-bubbles2;left:16px}.loading-bubbles div:nth-child(3){animation:.6s infinite loading-bubbles2;left:64px}.loading-bubbles div:nth-child(4){animation:.6s infinite loading-bubbles3;left:112px}@keyframes loading-bubbles1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes loading-bubbles3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes loading-bubbles2{0%{transform:translate(0)}to{transform:translate(48px)}}.ex-container{justify-items:stretch;width:100vw;height:100vh;display:grid}@media (orientation:landscape){.ex-container{grid-template-columns:50% 50%}}@media (orientation:portrait){.ex-container{grid-template-rows:50% 50%}}.ex-side{width:100%;height:100%}.ex-coach-video{object-position:50% 50%;object-fit:cover;width:100%;height:100%}.ex-coach-video-flipped{object-position:50% 50%;object-fit:cover;width:100%;height:100%;transform:scaleX(-1)}.ex-user-video{background-color:#282c34;width:100%;height:100%;transform:scaleX(-1)}.round-timer{z-index:1;background-color:#000000b3;border-radius:50%;width:20vmin;height:20vmin;position:absolute;top:2vmin;right:2vmin}.round-timer svg{width:100%;height:100%;position:absolute;top:0;left:0;transform:rotateY(-180deg)rotate(-90deg)}.round-timer svg circle{stroke-dasharray:282.6%;stroke-dashoffset:0;stroke-linecap:round;stroke-width:.75vh;stroke:#fff;fill:none}.round-timer .value{color:#fff;font-size:10vmin;line-height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.circle-animation{width:100%;height:100%;position:absolute;top:0;left:0;transform:scaleX(-1)}.circle-animation circle{stroke-dashoffset:0;stroke-linecap:round;stroke-width:.5vmin;stroke:#fff;fill:none;animation:linear forwards countdown-ring}@keyframes countdown-ring{0%{stroke-dashoffset:0}to{stroke-dashoffset:282.6%}}.BadInternetConnection-container{background-color:#282c34;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.BadInternetConnection-container .title{color:#fff;margin:4vh;font-size:5vh}.BadInternetConnection-container .subtitle{color:#fff;margin:2vh 2vh 2vh 4vh;font-size:3vh}img{width:60vh;height:40vh;margin:5vh}