html,body{font-family:sans-serif;padding:0;margin:0}*{box-sizing:border-box}#app{width:100vw;height:100vh;display:flex;background:black}.game-creation{display:flex;flex-direction:column;justify-content:center;align-items:center;margin:auto;color:#fff;background:linear-gradient(to bottom,#071052,#1f0040);border-radius:10px;padding:48px;width:100%;max-width:380px}.game-creation *{transition:all .3s}.game-creation h1{margin-top:0}.game-creation form{display:flex;flex-direction:column;width:100%}.game-creation form label{position:relative;margin-bottom:1rem;display:block;width:100%}.game-creation form label span{display:block;margin-bottom:4px;font-size:14px;opacity:.9}.game-creation form label+input{display:block}.game-creation input{border-radius:5px}.game-creation input[type=text]{border:1px solid rgba(255,255,255,.3);background:none;color:#fff;padding:8px;border-radius:5px;width:100%}.game-creation input[type=submit]{background:white;color:#000;border-color:#ffffff4d;font-weight:700;padding:8px;width:100%}.game-creation input[type=submit]:hover{transform:scale(1.05);cursor:pointer}.game-creation .colors{display:flex;justify-content:space-between;margin-top:16px}.game-creation .colors input[type=radio]{-webkit-appearance:none;background:transparent;height:28px;width:28px;border-radius:14px;border-color:#ffffff4d;cursor:pointer;opacity:.5;margin:0;padding:0}.game-creation .colors input[type=radio]:checked{opacity:1}#generate-hostId{position:absolute;top:24px;right:6px;margin-bottom:16px;font-weight:700;border-radius:3px;height:24px;width:24px;padding:0}#generate-hostId:hover{transform:scale(2);cursor:pointer}#game-url{min-width:100%;cursor:pointer;user-select:none;box-sizing:border-box;-webkit-box-orient:vertical;line-break:anywhere;display:-webkit-box;overflow:hidden;-webkit-line-clamp:1;height:24px;max-height:24px;margin-top:16px;padding:4px;font-size:14px;border-radius:3px;border:1px solid rgba(255,255,255,0);color:#aaa}#game-url:hover{border:1px solid rgba(255,255,255,.3)}#game-url.empty-url{display:none}#game-settings{display:flex;color:#fff;background:rgba(255,255,255,.1);border-radius:6px;padding:12px;width:100%;margin-bottom:24px}#game-settings>div{flex-grow:1;margin:0 6px}#game-settings label{height:24px;width:140px;vertical-align:middle;display:flex;align-items:center;font-size:14px;margin:0}#game-settings input[type=number]{width:100%;height:24px;vertical-align:middle;text-align:right;background:rgba(0,0,0,.1);color:#fff;border:1px solid rgba(255,255,255,.3)}#game-settings.hidden{display:none}