body {
	background-color: #75f8e2;
}

span {
    background-color: whitesmoke;
	padding-top: 3px;
	padding-bottom: 3px;
}

:root {
	--disconnected: 270px;
    --connected: 235px;
	--waiting: 154px;
	--connecting: 235px;
	--slots-full: 249px;
}

span.disconnected {
    padding-left: var(--disconnected);
	padding-right: var(--disconnected);
}

span.connected {
    padding-right: var(--connected);
	padding-left: var(--connected);
}

span.waiting {
    padding-right: var(--waiting);
	padding-left: var(--waiting);
}

span.connecting-server {
    padding-right: var(--connecting);
	padding-left: var(--connecting);
}

span.slots-full {
    padding-right: var(--slots-full);
    padding-left: var(--slots-full);
}

/* CodeHS Stuff */
canvas {
	border: 3px solid black;
	display: inline-block;
	vertical-align: top;
	background-color: white;
}