/*! 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;max-width: 100%;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;}

/*==============================================*/
/* Customized Default*/
* {box-sizing: border-box;}
body {width: 100vw;max-width:100%;height: 100vh;}
table {border-collapse: collapse;}
table td {border: 1px black solid;}

/*==============================================*/

*{
	font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}

a:link, a:visited, a:active, a:hover{
	color:#008B95;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

header *, footer *, #key > * {
	text-align: center;
	font-weight: normal;
}

header h2 {
	margin: 0.83rem 0 0;
	font-size: 2rem;
	text-transform: uppercase;
}

header h4 {
	margin: 0 0 0.83rem;
	font-size: 1rem;
}

footer {
	margin-top: 10px;
	border-top:2px #aaaaaa solid;
	padding-top:10px;
	line-height: 1.5;
}

#calculator {
	margin:auto;
	width:400px;
	max-width: 100%;
	background: #FFFFCC;
	border: 3px black outset;
	border-radius: 4px;
}

#interface {
	margin:5px;
}

#display {
	margin:15px auto 3px;
	width:96%;
	max-width: 100%;
	height:40px;
	text-align: right;
	background: white;
	border: 1px #CCCCCC solid;
	border-radius: 3px;
	color: #222222;
	font-size: 18pt;
	padding: 4px 10px;
	overflow: hidden;
	white-space: nowrap;
}

#display:hover, #display:focus {
	border: 1px #008B95 solid;
}

#notice {
	width:95%;
	margin:3px auto 15px;
	text-align: right;
	font-size: 0.8rem;
	color: #ff3300;
	visibility: hidden;
}

#key {
	display: flex;
	flex-wrap: wrap;
	-webkit-user-select: none; /* Chrome/Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
	user-select: none;
}

#key > div {
	height: 2.7rem;
	width: 21vw;
	max-width: 87px;
	float: left;
	font-size: 16pt;
	color: #ffffff;
	background:#008B95;
	border:1px black outset;
	border-radius: 4px;
	margin:3px 4px;
	line-height: 2.5rem;
}

@media only screen and (max-width: 412px) {
    #key > div {
        width: 20.8vw;
        margin: 2.5px 0.7vw;
        height: 3.2rem;
        line-height: 2.9rem;
    }
}

#key > div:hover {
	background:#33A2AA;
	border-color: #0075FF;
	cursor:default;
}

#key > .func {
	background: #E37222;
}

#key > .func:hover {
	background: #E98E4E;
}

#key > .eval {
	background: #FFACAC;
}