* { margin: 0; padding: 0; } :root { font-size: 2rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; color: #fff; } body { background-color: #191919; width: 100vw; height: 100vh; display: flex; } #center { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; position: absolute; } .rotate90 { transform: rotate(90deg); } .rotate180 { transform: rotate(180deg); } .rotate270 { transform: rotate(270deg); } .sprite { position: absolute; /* transition: left .1s, top .1s; */ z-index: 2; } #join, #lobby { display: flex; flex-direction: column; } #lobby span { margin-bottom: .5rem; } #lobby #start { margin-top: 1rem; } #lobby #players { display: flex; flex-direction: column; } input { background-color: transparent; outline: none; box-shadow: none; color: #fff; font-size: 1rem; border: solid 2px #fff; padding: .25rem; margin-bottom: .215rem; }