@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Poppins&display=swap";*{margin:0;padding:0;box-sizing:border-box}html,body{overflow:hidden;background-color:#a7a3ff}.webgl{position:fixed;top:0;left:0;outline:none}#pane{position:absolute;left:.5rem;bottom:50%}footer{font-family:Roboto Condensed,monospace;font-size:.75rem;text-transform:uppercase;position:fixed;left:0;bottom:0;width:100%;color:#fff;mix-blend-mode:difference;-webkit-user-select:none;padding:.5rem;box-sizing:border-box;display:flex;justify-content:center;align-items:center}.designed-by{margin:0;text-align:left;flex-grow:1}#version{margin:0;position:absolute;right:.5rem}a{font-family:Roboto Condensed,monospace;text-decoration:none;color:#fff;border-bottom:.1rem solid #fff;transition:box-shadow .25s ease-in-out}a:hover{box-shadow:inset 0 -1.1rem #ffffff10}#screenshot{position:absolute;top:1rem;right:1rem}#input-container{position:absolute;justify-content:space-between;bottom:0;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;margin-bottom:1rem;padding-bottom:1em;margin-top:1rem}#input-container2{position:absolute;display:none;justify-content:space-between;bottom:0;left:50%;transform:translate(-50%);flex-direction:column;align-items:center;margin-bottom:1rem;padding-bottom:1em;margin-top:1rem}#current-word{position:absolute;display:flex;flex-direction:row;top:20%;left:50%;transform:translate(-50%,-50%);font-size:48px;font-weight:700;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.5);z-index:10;white-space:nowrap}#myProgress{position:absolute;transform:translate(-50%,-50%);top:27%;left:50%;width:25%;background-color:gray}.alert{padding:20px;background-color:#f44336;color:#fff}.closebtn{margin-left:15px;color:#fff;font-weight:700;float:right;font-size:22px;line-height:20px;cursor:pointer;transition:.3s}.closebtn:hover{color:#000}#myBar{width:1%;height:15px;background-color:green}#letter{color:#fff}#word{color:green}#text-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;outline:none;border-bottom:.2em solid #F79BEC;background:#f79bec30;border-radius:.2em .2em 0 0;padding:.9em;color:#fff;margin-bottom:1rem}#button-container{display:flex;gap:1em}.btn-class{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:.2em solid #F79BEC;padding:.85em 1.5em;color:#df35cb;border-radius:2em;transition:1s}.btn-class:hover,.btn-class:focus,.btn-class:active{background:#f79bec;color:#fff;cursor:pointer}#pane{-webkit-user-select:none;user-select:none}@media only screen and (max-width: 720px){button{font-size:.75rem;border:1px solid #333;padding:.5rem 1rem}#pane{display:none}}#current-letter{text-align:center;position:absolute;top:10%;left:50%;transform:translate(-50%);font-size:48px;font-weight:700;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.5);z-index:10;white-space:nowrap}.camera-button{position:fixed;top:1em;left:1em;z-index:1000;border:.2em solid #F79BEC;padding:.85em 1.5em;color:#df35cb;border-radius:2em;transition:1s}.camera-button:hover,.camera-button:focus,.camera-button:active{background:#f79bec;color:#fff;cursor:pointer}#camera-container{position:absolute;top:60%;left:50%;transform:translate(-50%,-50%);z-index:1000;width:30rem;height:25rem;background-color:#000;border-radius:10px;overflow:hidden}#camera-feed{width:100%;height:100%;object-fit:cover}.toggleContainer{position:fixed;top:1em;right:1em;z-index:1000;display:grid;grid-template-columns:repeat(2,2em);grid-template-rows:repeat(1,1em);width:fit-content;border:3px solid #F79BEC;padding:.5em 1em;border-radius:20px;background:#f79bec;font-weight:700;color:#f79bec;cursor:pointer}.toggleContainer:before{content:"";position:absolute;width:50%;height:100%;left:0%;border-radius:20px;background:#fff;transition:all .3s}.toggleCheckbox:checked+.toggleContainer:before{left:50%}.toggleContainer div{text-align:center;z-index:1}.toggleCheckbox{display:none}.toggleCheckbox:checked+.toggleContainer div:first-child{color:#fff;transition:color .3s}.toggleCheckbox:checked+.toggleContainer div:last-child{color:#f79bec;transition:color .3s}.toggleCheckbox+.toggleContainer div:first-child{color:#f79bec;transition:color .3s}.toggleCheckbox+.toggleContainer div:last-child{color:#fff;transition:color .3s}
