/* 
Red Highlight: #B73225

Blue Minded: #004E7C

Maroon 6: #591COB

Grey Water: #5C5F58

Lighter Grey: #DCE1E3

*/
/* Box Model Hack */
* {
	box-sizing: border-box;
  }

* {
    color: #B73225;
    font-weight: 600;
	font-family: 'Palatino', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
	font-size: 1.4rem;
	border-radius: 8px;
}

kbr, .contact > * {
	font-family: Consolas;
	font-size: 1.2rem;
	background-color: #DCE1E3;
	padding: .2rem;
}

.svg-icon {
	width: 1em;
	height: 1em;
  }
  .svg-icon path,
  .svg-icon polygon,
  .svg-icon rect {
	fill: black;
  }
  .svg-icon circle {
	stroke: #DCE1E3;
	stroke-width: 2;
  }


main{
	padding: 1vmin 2vmin; 
	background-color: white;
}

h3 {
	text-transform: uppercase;
	border-bottom: 1px dotted black;
	border-radius: 0;
	display: inline-block;
}


main > section {
	margin-bottom: 2vmin;
	min-width: 225px;
	display: flex;
}
.calcDisp {
    background-color: #DCE1E3;
	
	justify-content: flex-end;
	align-items: flex-end;
	
	text-align: right; 
	height: 10vmin;
	min-height: 50px;
	min-width: 100%;
}

section, button {
	border: 1px solid black;
	border-bottom: 3px solid #5C5F58;
	border-right: 1px solid #5C5F58;
}
#display {margin: .2rem .5rem;}

ul {
	list-style: none;
	display: flex;
}

li, li * {
	width: 15vw;
	text-align: center;
	margin: 0.2rem;
}
button{
    background-color: #DCE1E3;
}
.useCalc {padding: 1rem;}
.numPad, .mathBtns {
	flex-direction: row-reverse;
	flex-wrap: wrap;
	justify-content: space-around;
	align-content: space-between;
}

.clearBtn, #clearDisp {width: 34vw;}
.notesAndContact {
	justify-content: center;
	align-items: center;
	padding: 1rem;
}
.notesAndContact > * {border: none;}
.instructions {
	padding: .3rem;
	margin-right: .8rem;
	border-left: .6px dotted black;
	border-right: .6px dotted black;

}
.instructions * {line-height: 1.5;}
.instructions, .instructions p {
	font-size: 1.2rem;
	min-height: 0; 
	height: auto; 
	display: block;
}
.contactP{
	text-align:center;
	margin-bottom: .3rem;
}

@media screen and (min-width: 330px) {
    main {padding: 2vw 10vw;}
}

@media screen and (min-width: 800px) {
	* {font-size: 2rem;}
    button {padding: 0.5rem;}
    li, li * {width: 15vw;}
}