body{margin:0;padding:0;overflow:hidden;height:100vh;width:100vw}.container{width:100vw;height:100vh;margin:0;display:flex;flex-direction:row}canvas{transform:scaleX(-1);height:100%}@media(max-width:1024px)and (orientation:portrait){.container{flex-direction:column}canvas{width:100%}}.right-pannel{padding:10px;background-color:#e0e0ff;width:100%}.recording{position:absolute;top:70px;right:70px;background-color:transparent}.right-pannel p{font-size:14px;margin-bottom:12px;line-height:1.5}.right-pannel h3{font-size:16px;margin:8px 0;color:#444}.right-pannel select{width:70%;margin-left:15%;padding:8px;font-size:14px;margin-top:10px;border:1px solid #ccc;border-radius:6px;background-color:#fff}.right-pannel button{width:70%;margin-left:15%;margin-top:15px;padding:10px;background-color:#2d4e72;color:#fff;font-size:15px;border:3px solid transparent;border-radius:6px;cursor:pointer;transition:background-color .2s ease-in-out}.right-pannel button:hover{border:3px solid #3171b6}