@font-face{
	font-family:"Montserrat";
	src: url('/fonts/Montserrat/Montserrat-VariableFont_wght.ttf')format('truetype');
}

body{
	background-color: #008de4;
	color: whitesmoke;
	font-size: large;
	font-family: monospace;
	margin: 3rem;
}

main{
	display: flow-root;
	padding: 3rem;
	border: 1px solid whitesmoke;
	border-radius: 2em;
	max-width: max-content;
	background-color: #2795E5;
}

main>h1,main>p{font-family: "Montserrat",serif;}

h2{
	font-weight: bold;
}

section{display: none;border-radius: 2em;padding:1em 3em;margin:2em 0;}

section.errors{background-color:#728FC8;}
section.warnings{background-color:#99A6A1;}
section.result{background-color:#40A000;}

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: #f22; text-decoration: underline;}
a:hover {color: #FFFFFF; text-decoration: none; font-weight: bolder;}



section.errors h2{
/*	color: #ff6666;*/
	color:#FFC3C3;
}

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.6em 1em 0.4em 0;
	padding: 0 0 0.4em 0;
}

input,select{
	border-radius: 1em;
	padding: 0.4em 0.6em;
	border: 0.2em solid transparent;
}

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

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

input[type="text"],input[type="number"],input[type="url"],input[type="submit"],input[type="reset"],select{
	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;
}

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