/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document*/
html {line-height: 1.15;-webkit-text-size-adjust: 100%;}

/* Sections */
body {margin: 0;}
h1 {font-size: 2em;  margin: 0.67em 0;}

/* Grouping content */
hr {box-sizing: content-box;height: 0;overflow: visible;}
pre {font-family: monospace, monospace;font-size: 1em;}

/* Text-level semantics*/
a {background-color: transparent;}
abbr[title] {border-bottom: none;text-decoration: underline;text-decoration: underline dotted;}
b,strong {font-weight: bolder;}
code,kbd,samp {font-family: monospace, monospace;font-size: 1em;}
small {font-size: 80%;}
sub,sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}
sub {bottom: -0.25em;}
sup {top: -0.5em;}

/* Embedded content */
img {border-style: none;}

/* Forms */
button,input,optgroup,select,textarea {font-family: inherit;font-size: 100%;line-height: 1.15;margin: 0;}
button,input {overflow: visible;}
button,select {text-transform: none;}
button,[type="button"],[type="reset"],[type="submit"] {-webkit-appearance: button;}
button::-moz-focus-inner,[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {border-style: none;padding: 0;}
button:-moz-focusring,[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;}
fieldset {padding: 0.35em 0.75em 0.625em;}
legend {box-sizing: border-box;  color: inherit;display: table;padding: 0;white-space: normal;}
progress {vertical-align: baseline;}
textarea {overflow: auto;}
[type="checkbox"],[type="radio"] {box-sizing: border-box;padding: 0;}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {height: auto;}
[type="search"] {-webkit-appearance: textfield;outline-offset: -2px;}
[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
::-webkit-file-upload-button {-webkit-appearance: button;font: inherit;}

/* Interactive */
details {display: block;}
summary {display: list-item;}

/* Misc*/
template {display: none;}
[hidden] {display: none;}
 
/* ============================================================================ */

body {
	width: 100vw;
	height: 100vh;
	background: #cde6c3;
}

.main {
	max-width: 540px;
	padding: 12px;
	background:#d09c8d;
	border-radius: 8px;
	box-shadow: 2px 2px 2px #444444;
}

header *,header a:link, header a:visited, header a:active, header a:hover,
footer, #output h4, .main th, .main td {
	text-align: center;
	text-decoration: none;
	color: #111111;
}

.main h2, .alert, .div-button {
	text-align: center;
	color: #ffffff;
}

#output .output_result {
	background: #ffffff;
	border: 2px #000000 inset;
	border-radius: 10px;
	margin-bottom: 10px;
	overflow: hidden;
}

.alert {
	background:#c17d69;
}

.main table {
	margin-top: 10px;
}

.main table tr:first-child td {
	background: #9c8dd0;
	color: #ffffff;
}

#input label {
	color: #ffffff;
}

.div-button [type=submit], 
.div-button [type=reset], 
.div-button [type=button] {
	height: 28pt;
	width: 100px;
	margin: 5px;
	background: #dfbbb1;
}

.div-button [type=submit]:hover, 
.div-button [type=reset]:hover,
.div-button [type=button]:hover {
	background: #d0ad8d;
}

#input select.form-control {
	flex:0.2;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

@media only screen and (max-width:400px){
	header h2 {
		font-size:1.5rem;
	}
	.alert {
		text-align: left;
	}
}