:root{
	--color-main:#d36736;/*LightCoral;*/
	--color-secondary:white;

	--color-header-border:rgba(119,119,119,0.2);
	--color-footer-border:#da7e55;
	--color-footer:#efefef;
	--color-text:#333333;
}

@font-face {
	font-family: 'BankGothic';
	src: URL('../font/bnkgothm.ttf') format('truetype');
}

input{
    outline-color: var(--color-main);
}

body{
	font-family: BankGothic, New Century Schoolbook, Palatino, Georgia, Serif;
	font-size:1rem;
	margin:0;
}
@media (max-width: 767px) {
	body{
		font-size:24px;
	}
}

body>header{
	height:calc(15vh - 2 * 0.25em - 2px);

	color:var(--color-text);
	background-color:var(--color-secondary);
	border-bottom:1px solid var(--color-header-border);
	text-align:center;
	padding:0.25em;
}
body>section{
	height:calc(70vh - 2 * 0.5em);
	max-height:calc(100vh - 100px - 100px - 2 * 0.5em);
	background-color:var(--color-secondary);
	padding:0.5em 0.25em;
	color:var(--color-text);
	text-align:center;
	overflow-y:auto;
}
body>section>p{
	display:block;
	margin-top:2em;
	text-align:center;
}
body>section label{
	font-weight:bold;
	display:inline-block;
	width:15em;
}
body>section input[type="text"],
body>section input[type="password"],
body>section input[type="submit"],
body>section input[type="button"],
body>section select,
body>section textarea
{
	border:1px solid var(--color-main);
	border-radius:0.25em;
	color: var(--color-main);
	background-color: var(--color-secondary);
	padding:0.25em 0.5em;
	width:calc(100% - 15em - 1em - 1em - 3em);
	min-width:15em;
}
body>section select,
body>section input[type="submit"],
body>section input[type="button"]
{
	width:calc(100% - 15em - 1em - 1em - 3em + 0.5em);
}
body>section input[type="submit"], body>section input[type="button"]{
	border:1px solid var(--color-main);
	border-radius:0.25em;
	color: var(--color-secondary);
	background-color: var(--color-main);
	padding:0.25em 0.5em;
	/*width:90%;*/
	
}
body>footer{
	height:calc(15vh - 0.25em - 64px - 2px);
	background-color:var(--color-footer);
	border-top:1px solid var(--color-footer-border);
	text-align:center;
	padding:0.25em;
	padding-bottom: 64px;
}

input:focus {
	outline: none !important;
	border:1px solid var(--color-main);
	box-shadow: 0 0 10px var(--color-main);
}
::placeholder {
	color: var(--color-main);
	opacity: 1; /* Firefox */
}
body>section input[type="checkbox"]{
	accent-color: var(--color-main);
}