style.css

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

html, body {
  height: 100%;
  width: 100%;

	margin: 0px;
	padding: 0px;

	font-family: 'Noto Sans', sans-serif;
}

body {
	background-color: #dceafe;
}

button {
	border: solid 1px #a28639;
	border-radius: 20000px;

	background: #fff3c7;

	padding: 3px 7px;

	&:hover {
		background: #f0e0a5;
	}
}

#canvas {
	background: white;

	border: 1px solid black;

	max-width: 30em;
}

#page {
	padding: 10px;

	height: 90%;
	
	display: flex;

	flex-align: center;
	justify-content: center;
	align-items: center;

	gap: 10px;
}

#options {
	background: #fff3c7;

	border: solid 1px #a28639;
	border-radius: 10px;

	width: fit-content;
	height: fit-content;

	font-family: sans-serif;
}
#options>* {
	padding: 10px;

	&:not(:last-child){
		border-bottom: solid 1px #a28639;
	}
}

.option-title {
	font-size: 1.2em;
	font-weight: bold;
	
	margin-bottom: 5px;
}

input[type="number"] {
	width: 4em;

	border: solid 1px #a28639;
	border-radius: 20000px;

	background: #fffcf0;

	padding: 3px 7px;
}