body {
	color: #000;
	font-family: 'Courier New', Courier, monospace;
	font-size: 3.4vh;
}

.box {
	padding: 0 2%;
	width: 100%;
	box-sizing: border-box;
}

.Input {
	position: relative;
}

.Input-text {
	display: block;
	margin: 0;
	width: 100%;
}

.Input-text:focus {
	/**
	 * Focused input styles here.
	 */
}

.Input-label {
	display: block;
	position: absolute;
	opacity: 0;
	font-size: 1rem;
	font-style: italic;
	top: -1.2rem;
}

.Input-text:placeholder-shown + .Input-label {
	visibility: hidden;
	z-index: -1;
}

.Input-text:not(:placeholder-shown) + .Input-label,
.Input-text:focus:not(:placeholder-shown) + .Input-label {
	visibility: visible;
	transition: all 0.5s ease;
	z-index: 1;
	opacity: 1;
}

.box input,
.box textarea {
	width: 100%;
	padding: 1%;
	box-sizing: border-box;
	font-size: 16px;
	font-family: 'Courier New', Courier, monospace;
	border: 1px solid #dedede;
}

.box textarea {
	height: 11em;
}

input {
	height: 3.3em;
}

button {
    font-size: 2.5vh;
    cursor: pointer;
    font-family: 'Courier New', Courier, monospace;
    padding: 5px 15px;
}

a {
	color: #000;
}

p {
	margin-bottom: 0.1em;
}

/* dark mode */

:root {
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	body {
		color: #fff;
		background: #202020;
	}

	a {
		color: #fff;
	}

	.box input,
	.box textarea {
		border: 1px solid #444;
		background: #333;
	}
}