* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
}

canvas {
	display: block;
}

#surface-roughness {
	width: 100vw !important;
	height: 100vh !important;
	object-fit: cover;
}

footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: black;
	bottom: 0;
	position: fixed;
	width: 100%;
	color: white;
	padding: 0.5rem 2rem;
}

p {
	font-family: "input-mono-compressed", monospace;
	font-weight: 100;
	font-style: normal;
	margin: 0;
	padding: 0;
}

.button {
	cursor: pointer;
	height: 1rem;
	width: 1rem;
	background-image: url(expand-solid.svg);
	background-repeat: no-repeat;
	background-position: center;
}

.fullscreen {
	background-image: url(compress-solid.svg);
}