@import url(https://fonts.googleapis.com/css2?family=Nunito&display=swap);*{box-sizing:border-box;margin:0;padding:0}html{color:#fff;font-family:Nunito,sans-serif;font-size:22px}body{background-color:#1e90ff;min-height:100vh}.App{align-items:center;justify-content:center;min-height:100vh;padding:1rem .5rem}.App,section{display:flex;flex-direction:column}section{background-color:#0006;justify-content:flex-start;max-width:420px;min-height:400px;padding:1rem;width:100%}form{display:flex;flex-direction:column;flex-grow:1;justify-content:space-evenly;padding-bottom:1rem}a,a:visited{color:#fff}button,input[type=password],input[type=text],textarea{border-radius:.5rem;font-family:Nunito,sans-serif;font-size:22px;padding:.25rem}button,label{margin-top:1rem}button{padding:.5rem}li{list-style-type:none}.instructions{background:#000;border-radius:.5rem;bottom:-10px;color:#fff;font-size:.75rem;padding:.25rem;position:relative}.instructions>svg{margin-right:.25rem}.offscreen{left:-9999px;position:absolute}.hide{display:none}.valid{color:#32cd32}.invalid,.valid{margin-left:.25rem}.invalid{color:red}.errmsg{background-color:#ffb6c1;color:#b22222;font-weight:700;margin-bottom:.5rem;padding:.5rem}.line{display:inline-block}.flexGrow{align-items:flex-end;display:flex;flex-grow:1;justify-content:flex-start}.login-container,.register-container{align-items:flex-start;display:flex;gap:2rem;margin:0 auto;max-width:800px}.form-side,.webcam-side{flex:1 1;padding:1rem}.webcam-container{text-align:center}.webcam-controls{margin-top:1rem}.webcam-controls button{background-color:#007bff;border:none;border-radius:4px;color:#fff;cursor:pointer;padding:.5rem 1rem}.webcam-controls button:hover{background-color:#0056b3}