@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;
//      --bg: var(--arms);
//      --clr: var(--background);
}

body {
		font-family: "NCND","DejaVu Sans Mono", monospace;
		color: var(--clr);
		background: var(--bg);
		display: grid;
		height: 100vh;
		margin: 0;
		font-size: clamp(1em, 5.5vw, 3em)
}
form {
		margin: auto;
		background: var(--bg);
		padding: 1em;
		border-radius: .5em;
}
p:empty {display: none;}
input, button,select {
		font: inherit;
}
input {
		width: 100%;
		box-sizing: border-box;
}
select {
		font-size: .8em;
		max-width: 12em;
}
div {
		margin: .5em 0 1em;
		display: grid;
		grid-template-columns: 1fr auto;
		gap: .5em;
		align-items: center;
}
a {
		color: inherit;
}
select + a {
		font-size: .7em;
}

label {
		display: block;
}

fieldset {
		margin-top: 1em;
		border: none;
		padding: .5em 0;
}
input[type="radio"] {
		display: inline;
		width: .6em;
		height: .6em;
}

fieldset + div {
		display: flex;
		justify-content: end;
		gap: .5em;
}
fieldset + div a,
fieldset + div button {
		border: 1px solid;
		background: ;
		padding: .3em;
		border-radius: .5em;
		text-decoration: none;
}

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-column: span 8;
		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;
		width: 20em;
}
.setNumber {
		display: grid;
		text-align: center;
		border: none;
		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;
}

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

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