html, body {
	width: 100%;
	height: 100%;
	/*opacity: 0.5; */
}

body {
	margin-left: -0.1px;
	font-family: Arial, Helvetica, sans-serif;
}

img {
	width: 100%;
	height: 50%;
	/* Mit dieser Kode Linie gibt es keine Verzerrung */
	object-fit: cover; 
}

div, header, nav, aisde, footer {
	/*border: 1px solid blue;
	/*margin-bottom: 5px;*
	border-collapse: collapse;*/
	box-sizing: border-box;
}

header, nav, footer {
	width: 100%;
}

header {
	height: 35%;
}

nav {
	padding-left: 2%;
	background-color: skyblue;
	height: 25%x;
	font-size: 1.05em;
}

a.link {
	color: #47a;
	text-decoration: none;
}

a.link:hover {
	color: #147;
	text-decoration: underline;
}

footer {
	float: left;
	height: 15%;
}

a#fLink {
	color: #47a;
	font-size: 1.0em;
	text-decoration: none;
}

a#fLink:hover {
	color: #147;
	text-decoration: underline;
}

div#inhalt, aside {
	float: left;
	height: 80%;
}

div#inhalt {
	width: 80%;
	background-color: gold;
}

aside {
	background-color: lightgrey;
	width: 20%;
}

p#bschr {
	text-align: justify;
	font-size: 1.2em;
}

/* ++++++++++++++++++ Kode für den Rechner ++++++++++++++++++ */


/* Haupt Tabelle*/
table#rc {
	width:500px;
	height:450px;
	background-color: #e94;
	border: 5px groove #222;
	border-radius: 8px;
}

/* Haupt Bildschirm */
tr#screen {
	margin-top: 8px;
	border-radius: 15px;
	width: 380px;
	height: 80px;
	font-size: 20px;
	background-color: #fff;
}

/* Kleine anzeige */
#txt1 {
	width: 250px;
	height: 20px;
	font-size: 17.5px;
	background-color: #fff;
	border: 0px;
}

/* Grosse anzeige */
#txt2 {
	width: 370px;
	height: 35px;
	font-size: 25px;
	background-color: #fff;
	border: 0px;
}

/* Löschen */
#btnC {
	outline:none;
	border-radius: 8px;
	background-color: #f00;
	width:50px;
	height:50px;
	color: #fff;
	text-align: center;
	font-size:17.5px;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}


#btnC:hover {
	background-color: #a00;
	box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 11px 25px 0 rgba(0,0,0,0.19);
}

#btnC:active {
	box-shadow: 0 2px #444;
	transform: translateY(2px);
}

/* Wert löschen */
#btnCE {
	outline:none;
	border-radius: 8px;
	background-color: #fa0;
	width:50px;
	height:50px;
	color: #fff;
	text-align: center;
	font-size:17.5px;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}


#btnCE:hover {
	background-color: #a60;
	box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 11px 25px 0 rgba(0,0,0,0.19);
}

#btnCE:active {
	box-shadow: 0 2px #444;
	transform: translateY(2px);
}


/* Back Space */
#btnB {
	outline:none;
	border-radius: 8px;
	background-color: #fd0;
	width:50px;
	height:50px;
	color: #000;
	text-align: center;
	font-size:20px;
	font-weight: bolder;
	/* box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); */
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}


#btnB:hover {
	background-color: #a80;
	box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 11px 25px 0 rgba(0,0,0,0.19);
}

#btnB:active {
	box-shadow: 0 2px #444;
	transform: translateY(2px);
}

/* Permutation */
#btnPer {
	outline:none;
	border-radius: 8px;
	background-color: #bbb;
	width:50px;
	height:50px;
	color: #a00;
	text-align: center;
	font-size:17.5px;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}


#btnPer:hover {
	background-color: #888;
	box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 11px 25px 0 rgba(0,0,0,0.19);
}

#btnPer:active {
	box-shadow: 0 2px #444;
	transform: translateY(2px);
}

/* Gleich */
#btnEv {
	outline:none;
	border-radius: 8px;
	background-color: #4CAF50;
	width:50px;
	height:50px;
	color: #fff;
	text-align: center;
	font-size:17.5px;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}


#btnEv:hover {
	background-color: #3e8e41;
	box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 11px 25px 0 rgba(0,0,0,0.19);
}

#btnEv:active {
	box-shadow: 0 2px #444;
	transform: translateY(2px);
}

/* Nummer */
#btnN {
	outline:none;
	border-radius: 8px;
	background-color: #bbb;
	width:50px;
	height:50px;
	color: #000;
	text-align: center;
	font-size:17.5px;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}


#btnN:hover {
	background-color: #888;
	box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 11px 25px 0 rgba(0,0,0,0.19);
}

#btnN:active {
	box-shadow: 0 2px #444;
	transform: translateY(2px);
}


/* Speicher löschen */
#btnMC {
	outline:none;
	border-radius: 8px;
	background-color: #333;
	width:50px;
	height:50px;
	color: #f00;
	text-align: center;
	font-size:17.5px;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}


#btnMC:hover {
	background-color: #111;
	box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 11px 25px 0 rgba(0,0,0,0.19);
}

#btnMC:active {
	box-shadow: 0 2px #444;
	transform: translateY(2px);
}

/* Speicher einblenden */
#btnMR {
	outline:none;
	border-radius: 8px;
	background-color: #333;
	width:50px;
	height:50px;
	color: #3d0;
	text-align: center;
	font-size:17.5px;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}


#btnMR:hover {
	background-color: #111;
	box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 11px 25px 0 rgba(0,0,0,0.19);
}

#btnMR:active {
	box-shadow: 0 2px #444;
	transform: translateY(2px);
}

/* Speichern */
#btnMS {
	outline:none;
	border-radius: 8px;
	background-color: #333;
	width:50px;
	height:50px;
	color: #aaa;
	text-align: center;
	font-size:17.5px;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}


#btnMS:hover {
	background-color: #111;
	box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 11px 25px 0 rgba(0,0,0,0.19);
}

#btnMS:active {
	box-shadow: 0 2px #444;
	transform: translateY(2px);
}

/* Speicher Subtraktion */
#btnMSub {
	outline:none;
	border-radius: 8px;
	background-color: #333;
	width:50px;
	height:50px;
	color: #0af;
	text-align: center;
	font-size:17.5px;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}


#btnMSub:hover {
	background-color: #111;
	box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 11px 25px 0 rgba(0,0,0,0.19);
}

#btnMSub:active {
	box-shadow: 0 2px #444;
	transform: translateY(2px);
}

/* Speicher Addition */
#btnMPl {
	outline:none;
	border-radius: 8px;
	background-color: #333;
	width:50px;
	height:50px;
	color: #d94;
	text-align: center;
	font-size:17.5px;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}


#btnMPl:hover {
	background-color: #111;
	box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 11px 25px 0 rgba(0,0,0,0.19);
}

#btnMPl:active {
	box-shadow: 0 2px #444;
	transform: translateY(2px);
}


/* Operator */
#btnOp {
	outline:none;
	border-radius: 8px;
	background-color: #bbb;
	width:50px;
	height:50px;
	color: #07a;
	text-align: center;
	font-size:17.5px;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}


#btnOp:hover {
	background-color: #888;
	box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 11px 25px 0 rgba(0,0,0,0.19);
}

#btnOp:active {
	box-shadow: 0 2px #444;
	transform: translateY(2px);
}


/* Komma (oder punkte) */
#btnPo {
	outline:none;
	border-radius: 8px;
	background-color: #bbb;
	width:50px;
	height:50px;
	color: #070;
	text-align: center;
	font-size: 30px;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}


#btnPo:hover {
	background-color: #888;
	box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 11px 25px 0 rgba(0,0,0,0.19);
}

#btnPo:active {
	box-shadow: 0 2px #444;
	transform: translateY(2px);
}

/* Komma (oder punkte) */
#btnS {
	outline:none;
	border-radius: 8px;
	background-color: #bbb;
	width:50px;
	height:50px;
	color: #FFD700;
	text-align: center;
	font-size: 22px;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}


#btnS:hover {
	background-color: #888;
	box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 11px 25px 0 rgba(0,0,0,0.19);
}

#btnS:active {
	box-shadow: 0 2px #444;
	transform: translateY(2px);
}