body {
	display: flex;
	flex-direction: column;
	align-items: center;
}

#connect-dialog {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	margin: 5px 0 10px 0px;
	font-size: 24px;
	width: 100%;

	& #baseurl {
		width: 30em;
	}

	& #mapid {
		width: 100px;
	}
}

#board-dialog {
	display: none;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 700px;
	/* max-height: 60vh; */

	& #timer {
		text-align: center;
		width: 100%;
		margin-bottom: 0.3rem;
	}

	& .board {
		display: grid;
		width: 100%;
		gap: 0px;
		border: 1px solid black;
		/* box-sizing: content-box; */
	}

	& .cell {
		aspect-ratio: 1/1;
	}

	& .controls {
		width: 100%;
		margin-top: 10px;
		display: flex;
		justify-content: space-evenly;
		align-items: center;

		> input {
			border-radius: 5px;
			padding: 10px;
			border: none;
		}
	}

	#coord-x, #coord-y {
		&::before {
			content: attr(data-label);
		}
		padding: 10px;
		border-radius: 5px;
		background-color: #f0f0f0;
	}
}

@keyframes timer_alarm {
	from {
		background-color: #f00;
	}

	to {
		background-color: #fff;
	}
}