body{
	background-color: #000022;
	color: whitesmoke;
	font-size: large;
	margin: 3rem;
}

main{
	display: flow-root;
	padding: 3rem;
	border: 1px solid whitesmoke;
	max-width: max-content;
}

h2{
	font-weight: bold;
}

section{display: none;}

section.warnings h2{
	color: yellow;
}

ul{
	padding-left: 0;
}

ul li span{
	padding-left: 0.5em;
}

section.warnings ul li{
	list-style: "\26A0" inside;
	color: yellow;
}

ul li span{
	color: whitesmoke;
}



a:link {color: #00dF00; text-decoration: underline;}
a:active {color: #00009f; text-decoration: underline;}
a:visited {color: #FF5555; text-decoration: underline;}
a:hover {color: #FFFFFF; text-decoration: none; font-weight: bolder;}



section.errors h2{
	color: #ff6666;
}

section.errors ul li{
	list-style: "\26D4" inside;
}

section.result p{
	padding-top: 0;
	padding-bottom: 0;
}

section.result p span{font-weight: bolder;text-decoration: underline;}


h1{
	margin-top: 0;
	padding-top: 0;
}

.container{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.container div:nth-child(2n+1){
	white-space: nowrap;
	text-align: right;
	margin: 0.4em 1em 0.4em 0;
	padding: 0 0 0.4em 0;
}



label,output{
	font-weight: bold;
	color: #fff;
}

input,output,select{
	margin: 0.4em 0 0.4em 0;
	padding: 0.4em 0 0.4em 0;
}

input[type="text"],input[type="number"],input[type="url"],input[type="date"]{
	transition: 0.5s;
}


input:focus,select:focus,textarea:focus{border: 0.2em solid blue;}

input[type="submit"],input[type="reset"]{
	font-weight: bolder;
	cursor: pointer;
	margin: 1em 0 0.4em 0;
	padding: 0.4em 0.2em 0.4em 0.2em;
}

input[type="reset"]{margin-left: 4em;}