:root {
	--translucent-high: rgba(255, 255, 255, 0.8);
	--translucent-low: rgba(255, 255, 255, 0.4);
	--padding: 0.5rem;
	--padding-half: calc(var(--padding) / 2);
	--border-size: 0.2rem;
	--max-width: min(calc(100dvw - 1rem), 700px);
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	background-color: rgb(247, 234, 219);
	height: 100dvh;
	margin: 0;
	padding: 0;

	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
		Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
		sans-serif;
}

h1,
h2 {
	margin: 0;
}

h1 {
	text-align: center;
}

main {
	padding: var(--padding);
	height: 100%;
	text-wrap: pretty;
}

.touch-controls {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--padding);
	padding: var(--padding);

	button {
		height: 5.5rem;
		font-size: 3rem;
		border-radius: var(--padding);
	}
}

button {
	border: solid var(--border-size) var(--translucent-high);
	background: var(--translucent-high);
	border-radius: var(--padding-half);
	transition: all 0.2s ease;
	height: 100%;
	font-size: 110%;

	&:active {
		border-color: var(--translucent-low);
		background-color: var(--translucent-low);
	}
}

.input-controls,
.settings {
	padding: var(--padding);
	display: flex;
	gap: var(--padding);
	border: solid var(--border-size) var(--translucent-high);
	border-radius: var(--padding-half);
	align-items: center;
	justify-content: space-around;
}

.inputs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--max-width), 1fr));
	gap: var(--padding);
	width: 100%;
}

.infos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--max-width), 1fr));
	flex-wrap: wrap;
	gap: var(--padding);
	justify-content: space-between;
}

label {
	display: grid;
	gap: var(--padding);
}

input {
	border: solid var(--border-size) var(--translucent-high);
	background: var(--translucent-low);
	border-radius: var(--padding-half);
	transition: all 0.2s ease;
	height: 100%;
	padding: var(--padding-half);
	font-family: 'Courier New', Courier, monospace;
	outline: none;

	&:focus {
		background-color: var(--translucent-high);
	}
}