style.css

body {
	margin: 0;
	height: 100%;
	font-family: 'Times New Roman', Times, serif;
	color: #ddc;
	background-image: radial-gradient(#088, #000);
}

.radial {
	height: 100vh;
}

canvas {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;

}

.flex-container {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: space-evenly;
}

#settings-menu {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0 1em 1em 2em;
	flex: 0 0 20%;
	background-color: #0007;
	z-index: 1;
}
#settings-menu h1 {
	margin: 0.5em 0;
}

#settings-menu div,
#settings-menu h2,
#settings-menu h3,
#settings-menu p {
	margin: 0
}

.flex-container .icon {
	flex-grow: 1;
	text-align: end;
	background-color: none;
}

.flex-container.inputs input,
.flex-container.inputs select {
	flex: 1 1 60%;
	max-width: 60%;
	margin-left: auto;
	background-color: #5555;
	color: #e55;
}

.button {
	border: 1px solid black;
	background-color: #777;
}

.button:hover {
	background-color: #666;
	cursor: pointer;
}

input[type=color] {
	margin-top: 0.5em;
	border: none;
	padding: 0;
}

input[type=color]:not([disabled]):hover,
i:hover {
	cursor: pointer;
	background-color: #666;
}

input[type=color]:disabled {
	opacity: 20%;
}

i {
	margin-right: 0.5em;
}

#error-message {
	position: absolute;
	color: red;
}

#help-modal {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: #222c;
}

#help-modal div {
	position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);	
}

.margin-top {
	margin-top: .5em !important;
}

.flex-container.color {
	padding: 0 1.5em;
	gap: 10px;
}

.flex-container.color input {
	flex: 1;
	height: 3em;
}

.info-box {
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	max-width: 35%;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}