html, body { padding: 0; margin: 0; /*overflow: hidden;*/ /*overflow-x: hidden;*/ -webkit-text-size-adjust: none; /*width: 100%;*/ /*height: 100%;*/ /*position: fixed;*/ font-family: "Ubuntu", sans-serif; overscroll-behavior-y: contain; } .body__inner { overflow: hidden; position: relative; min-height: 100vh; } input[type=checkbox] { cursor: pointer; } #overlays, #connecting { opacity: 0; /*position: absolute;*/ position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 200; } #connecting { z-index: 1001; } #needtobeloggined { opacity: 0; /*position: absolute;*/ position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 200; } #needtobeloggined { z-index: 2020; } .connecting {} .connecting__content { max-width: 350px; width: 100%; padding: 0 20px; /*background-color: #fff;*/ /*border-radius: 15px;*/ /*padding: 20px;*/ position: absolute; z-index: 10; top: 50%; left: 50%; transform: translate(-50%, -50%); } .connecting__title { margin: 0 0 10px; } .connecting__text { margin-bottom: 10px; } .connecting__text:last-child { margin-bottom: 0; } #connecting-content {} #title { margin: 0; padding: 0; line-height: 1.2; } @media (max-width: 359px) { #title { font-size: 32px; } } #nick, .form-control { width: 100%; border-radius: 4px; border-style: solid; border-color: #A2A2A2; /*margin-top: 5px;*/ /*margin-bottom: 5px;*/ } #nick:focus, .form-control:focus { border-color: #A2A2A2; outline: none; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 0, 0, 0.4); } #skin { width: 33%; float: right; } #nick, #skin { display: inline; } #gamemode { /*margin-top: 5px;*/ /*width: 100%;*/ cursor: pointer; /*width: 50%;*/ } .gamemode-select { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position-x: calc(100% - 5px); background-position-y: 50%; -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: ''; } #menu { width: 100%; background-color: #fff; border-radius: 1px; padding: 30px; } #menu2 { height: 250px; width: 308px; background-color: #fff; margin: 10px auto; border-radius: 15px; padding: 5px 15px 5px 15px; position: absolute; top: 35%; left: 74%; transform: translate(-50%, -50%); } #menu3 { height: 481px; width: 308px; background-color: #fff; margin: 10px auto; border-radius: 15px; padding: 5px 15px 5px 15px; position: absolute; top: 50%; left: 26%; transform: translate(-50%, -50%); } .links-field { z-index: 1000; position: relative; bottom: 40px; } #chat_textbox { transition: all .5s ease-in-out; position: absolute; bottom: 10px; background: rgba(0, 0, 0, .2); border: 0; outline: none; color: #fff; height: 30px; padding: 0 12px; font-family: "Ubuntu", sans-serif; font-size: 13px; z-index: 301; width: 40vw; border-radius: 15px; margin-left: auto; margin-right: auto; } #chat_textbox:focus { background: rgba(0, 0, 0, .5); } #footer { text-align: center; margin-bottom: 10px; margin-top: -10px; } #play-btn { width: 100%; outline: none; } #spectate-btn { width: 13%; float: right; top: 0; } #play-btn, #spectate-button { display: inline; } #gallery-btn { margin-top: 15px; width: 100%; } #touchpad, #touchCircle, #splitBtn, #ejectBtn { position: fixed; } #touchpad, #splitBtn, #ejectBtn { z-index: 2; } #touchpad { background-color: #000; opacity: 0.4; width: 20vw; height: 20vh; left: 0; bottom: 0; background-image: url("../../assets/images/touch.svg"); background-repeat: no-repeat; background-size: contain; background-position: center; } #touchCircle { width: 4vw; height: 4vw; border-radius: 2vw; background: #f00; opacity: 0.3; z-index: 3; } #splitBtn, #ejectBtn { width: 8vw; height: 8vw; border-radius: 4vw; background: #777; opacity: 0.5; } #splitBtn { left: 11.5vw; bottom: 22vh; } #ejectBtn { left: 0.5vw; bottom: 22vh; } #playSounds:checked + #soundsVolume { display: inline; } #soundsVolume { display: none; width: 100px; height: 18px; padding: 0; /* IE fix */ vertical-align: middle; } #settings label { margin-right: 10px; user-select: none; } #canvas { position: fixed; width: auto; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } .mb-0 { margin-bottom: 0; } .d-none { display: none; }