* {
    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;
    position: absolute;
}

#center-inner {
    width: 100%;
    height: 100%;
    position: relative;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

#mapeditor {
    margin-top: 2rem;
}

.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;
    box-sizing:content-box;
}

p {
    padding: .25rem;
}