* {
	touch-action: manipulation;
}

:root {
	--primaryColor: #8800E7;
	--accentColor: #9d4fff;
	--buttonTextColor: white;
	--bg-color: #0e0e0e;
	--red: #e74c3c;
	--blue: #3498db;
	--yellow: #f39c12;
	--green: #2ecc71;
	--white: #ffffff;
	--gray: #333;
}

::-webkit-scrollbar {
	display: none;
}

html {
	font-family: 'Bebas Neue', Arial, Verdana, sans-serif;
	scrollbar-width: none;
}

html,
body {
	height: 100%;
}

body {
	background: var(--bg-color);
	color: white;
	display: flex;
	flex-direction: column;
}

h2 {
	font-size: xxx-large;
}

footer {
	text-align: center;
	border-top: 1px solid #ccc;
}

section {
	margin: 0.2em;
	flex-grow: 1;
	min-width: 300px;
	display: block;
}

button {
	background-color: var(--primaryColor);
	font-size: x-large;
	font-family: 'Bebas Neue', Arial, Verdana, sans-serif;
	padding: 0.25em;
	text-align: center;
	border-radius: 0.5em;
	border: none;
	color: var(--buttonTextColor);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

button:hover,
button:active {
	background-color: var(--accentColor);
	color: var(--buttonTextColor);
}

.center {
	text-align: center;
}

.round {
	width: 3.2em;
	height: 3.2em;
	border-radius: 50%;
	text-align: center;
	border: 2px solid var(--primaryColor);
	background-color: var(--bg-color);
	color: white;
	padding: 0.5em;
	font-size: clamp(xx-large, 5wv, xxx-large)
}

.round:active,
.round:hover {
	background-color: var(--accentColor);
	color: var(--bg-color);
}

.border-dashed {
	border: 2px dashed var(--primaryColor);
}

.row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.2em;
	justify-content: center;
}

.col {
	flex: 1 1 auto;
	max-width: 3.1em;
	margin: 0.3em;
}

.size-6 {
	min-width: 0.8em;
}

.hide {
	display: none;
}

.controls>* {
	width: 48%;
	float: left;
	margin: 2px;
}

.headline {
	font-size: 96pt;
}

.red {
	background-color: var(--red);
	border: none;
}

.blue {
	background-color: var(--blue);
	border: none;
}

.yellow {
	background-color: var(--yellow);
	border: none;
}

.green {
	background-color: var(--green);
	border: none;
}

.white {
	background-color: var(--white);
	color: black;
	border: none;
}

.gray {
	background-color: var(--gray);
	border: none;
}

#iphoneNote {
	font-family: sans-serif;
	width: 100%;
	font-size: 10pt;
}