@font-face {
  font-family: "NCND";
  src: url("../../font/ncnd.woff2");
  font-style: normal;
  font-stretch: normal;
  font-weight: 250 900;
}
html {
	--bg: whitesmoke;
	--clr: black;
}

body {
	font-family: "NCND","DejaVu Sans Mono", monospace;
	color: var(--clr);
	background: var(--bg);
	//background: linear-gradient(var(--clr) 30%, var(--bg) 70%);
	display: grid;
	height: 100vh;
	margin: 0;
	font-size: clamp(1em, 5vw, 3em)
}
form {
	margin: auto 1em;
}
input, button {
	font: inherit;
}

output {
	padding: .3em;
	color: inherit;
}
button {
	//background: var(--bg);
	//mix-blend-mode: multiply;
	border: none;
	background: transparent;
	//color: var(--bg);
}
button:first-of-type{
	color: var(--clr);
}
p {
	grid-row-start: 1;
	max-width: 20em;
	//color: var(--bg);
}

.setTheDate {
	display: grid;
	grid-template-rows: 1fr auto 1fr;
	//grid-template-columns: auto auto auto 1fr auto auto auto auto;
	//gap:.3em;
}
.setTheDate > div {
	display: flex;
}
.setNumber {
	display: grid;
	text-align: center;
	border: .05em solid;
	border-radius: 1em;
	overflow: clip;
	color: black;
	position: relative;
	//background: linear-gradient(var(--bg), var(--clr));
	margin: 0 .1em;
	min-width: 2em;
	width: fit-content;
}
.setNumber:has(#setMonth) {
	width: 10ch;
}
.setNumber:has(#setHour) {
	margin-inline-start: auto;
}
.setNumber + span {
	display: grid;
	align-content: center;
	margin-inline: -.3em;
}

.setTheDate > div ~ div {
		display: flex;
		justify-content: end;
		gap: .5em;
		grid-row-start: 3;
}
.setTheDate > div ~ div a,
.setTheDate > div ~ div button {
		border: 1px solid;
		background: ;
		padding: .3em;
		border-radius: .5em;
		text-decoration: none;
}

input[type="submit"],
.setTheDate > div ~ div a {
	grid-row-start: 3;
	grid-column: span 8;
	padding: 1em 1em;
	justify-self: end;
	border: .05em solid;
	background: inherit;
	border-radius: 1em;
	color: var(--clr);
	margin-block-start: 1em;
}

@keyframes --onoff {
	50% {
		opacity: 0;
	}
}