body {
	margin: 0;
	height: 100vh;
	width: 100vw;	
}

#the_grid {
	display: grid;
	grid-template-columns: 10% 50% 30% 10%;
	grid-template-rows: 10% 10% 50% 20% 10%;
	height: 100%;
	width: 100%;
}

#logo {
	height: 3vh;
	margin-left: 2vw;
} 

.hcenter {
	display: flex;
	justify-content: center;
}

.vcenter {
	align-items: center;
	display: flex;
}

#top-panel {
	background: #b0b0b0;
	border: 2px black solid;
	border-top-left-radius: 1vh;
	border-top-right-radius: 1vh;
	grid-column-start: 2;
	grid-column-end: 4;
	grid-row-start: 2;
	grid-row-end: 3;
	justify-content: space-between;
}

.pwr {
	font-family: monospace;
	font-size: 3vh;
	font-weight: bold;
	margin: 0 0.5vw;
}

#rngPwr {
	height: 2vw;
	width: 3vw;
}

#display {
	background: #909090;
	border-left: 2px black solid;
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 3;
	grid-row-end: 4;
}

#screen {
	background: linear-gradient(150deg, #233523 0%, #000000 68%); 
	border: 2px darkgreen solid;
	height: 100%;
	margin: 2%;
	overflow-y: hidden;
	width: 80%;
}

#output {
	color: #80e080;
	font-family: vt323;
	font-size: 10vh;
	font-weight: bold;
	line-height: 1;
	margin: 0;
	padding-left: 1vh;
	text-shadow: 3px 3px #207020;
}

#answer {
	color: #80e080;
	font-family: vt323;
	font-size: 10vh;
	font-weight: bold;
	line-height: 1;
	margin: 0;
	padding-left: 1vh;
	text-shadow: 3px 3px #207020;
}

.inpFunc {
	font-size: 6vh;
	width: 4vw;
}

#btnsavefunc {
	width: 14.4vw;
}

#numpad {
	background: #b0b0b0;
	border-left: 2px black solid;
	border-right: 2px black solid;
	grid-column-start: 3;
	grid-column-end: 4;
	grid-row-start: 3;
	grid-row-end: 4;
}

button {
	box-shadow: 3px 4px 0px 0px #404040;
	background: linear-gradient(135deg, #b0b0b0 5%, #909090 100%);
	border-radius: 5px;
	border: 1px solid #202020;
	color: #202020;
	cursor: pointer;
	font-family: monospace;
	font-size: 5vh;
	font-weight: bold;
	height: 8vh;
	text-shadow: 2px 2px #606060;
}

.btnnum {
	width: 7.2vw;
}

#btncalc {
	width: 14.4vw;
}

#bottom-panel {
	background: #b0b0b0;
	border: 2px black solid;
	border-bottom-left-radius: 1vh;
	border-bottom-right-radius: 1vh;
	grid-column-start: 2;
	grid-column-end: 4;
	grid-row-start: 4;
	grid-row-end: 5;
}

#subbottompanel {
	justify-content: space-between;
	width: 70vw;
}
	
#leds {
	align-items: center;
	display: flex;
	justify-content: flex-start;
	width: 30vw;
}

#cardreader {
	background: #909090;
	border: 2px black solid;
	border-radius: 1vh;
	height: 5vh;
	width: 38vw;
}

#slot {
	background: #303030;
	border: 2px black solid;
	height: 1.5vh;
	width: 30vw;
}

#eject {
	background: #909090;
	border: 2px black solid;
	box-shadow: 3px 3px 0px 0px #404040;
	cursor: pointer;
	font-weight: bold;
	height: 1.5vh;
	width: 3vw;
}

#cardinside {
	background: #e7e1d0;
	border: 1px black solid;
	border-radius: 3px;
	height: 0.8vh;
	visibility: hidden;
	width: 29vw;
}

#card {
	background: #e7e1d0;
	border: 2px black solid;
	border-radius: 5px;
	box-shadow: 10px 10px 0px 0px #00000040;
	height: 78vh;
	left: 35%;
	position: absolute;
	top: 11%;
	width: 29vw;
}	

#function {
	align-items: center;
	display: flex;
	font-size: 5vh;
	font-family: vt323;
	font-weight: bold;
	justify-content: center;
	margin: 1vh 0;
	white-space: nowrap;
}

#funclegend {
	font-size: 2.5vh;
	font-style: italic;
	font-family: vt323;
}

.monospace {
	font-family: monospace;
}

.center {
	text-align: center;
}

#insert {
	cursor: pointer;
	font-size: 4vh;
	font-style: italic;
	font-family: vt323;
	letter-spacing: 0.5vw;
	margin: 0;
}

table {
	border-spacing: 1.25vw 0.1vh;
	font-family: monospace;
	font-size: 1.5vh;
	margin-bottom: 1.5vh;
}

th {
	font-style: italic;
}

td {
	color: #303030;
	cursor: pointer;
}

.namnare {
	border-top: 2px black solid;
	display: block;
	line-height: 4vh;
	text-align: center;
}

.taljare {
	border-bottom: 2px black solid;
	display: block;
	line-height: 4vh;
	text-align: center;
}

.led {
	background-color: #800000;
	box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 5px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;
	border-radius: 50%;
	display: inline-block;
  	margin: 0 1.5vw;
	height: 3vh;
	width: 3vh;
}

.ledwrap {
	font-size: 1vh;
	text-align: center;
}

@keyframes blinkRed {
    from { background-color: #ff0000; }
    50% { background-color: #800000; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to { background-color: #ff0000; }
}