body { 
	margin: 0;
	font-family: arial;
	display: grid;
        min-height: 100vh;
        padding: 0;
	grid-template:
	'main'
	'footer';
}

#calculator {
        max-width: 640px;
	margin: 0 auto;
	background: #F2F2F2;
	padding: 15px;
	display: grid;
	grid-area: main;
        grid-template-columns: 300px, 300px;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "title  title"
            "calc   side";
        gap: 20px;
}
    #calculator h1 {
        grid-area: title;
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }
    .calc-main {
        grid-area: calc;
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-width: 0;
	max-width: 300px;
    }
#display {
	background: #FFFFFF;
	padding: 7px;
	border-radius: 5px;
	margin-bottom: 0;
	min-height: 90px;
	text-align: right;
	font-family: monospace;
	font-size: 30px;
	border: 2px solid #CFCBC0;
	border-radius: 10px;
        display: flex;
        flex-direction: column;
        gap: 4px;
}
#display > div {
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	text-align: right;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
#display > div > * {
	direction: ltr;
	unicode-bidi: embed;
}
#resultDisplay {
	width: 100%;
	box-sizing: border-box;
	border: none;
	outline: none;
	background: transparent;
	font-family: monospace;
	font-size: 30px;
	text-align: right;
	padding: 0;
	margin: 0;			
}
.button-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
}

button {
	padding: 4px;
	font-size: 23px;
	border: 2px solid #D4D4D4;
	border-radius: 10px;
	cursor: pointer;
	background: #FFFFFF;
        transition: background 0.08s ease, transform 0.04s ease;
}
button:active {
	background: #E0E0E0;
}		
button:hover { background: #E0E0E0; }
button:active { transform: translateY(1px); }
button:focus-visible {
	outline: 2px solid var(--accent);
        outline-offset: 2px;
}
.operator { background: #1B3A5C; color: white; border: none; }
.operator:hover {background: #132A42;}
.equals { background: #146C2B; color: white; border: none;}
.clear { background: #A02422; color: white; border: none;}
#backspace { background: #4A4A47; color: white; border: none;}
#backspace:hover {background: #1F1F1D;}
#backspace:active { background: #1F1F1D; }
.clear:active {background: #831C1A;}
.clear:hover {background: #701918;}
.operator:active {background: #0E1F30;}
.equals:active {background: #0D451C;}
.equals:hover {background: #0D451C;}

.history {
    box-sizing: border-box;
	margin-top: 0;
	border: 1px solid #ccc;
	padding: 0px 15px;	
	overflow-y: auto;
	overflow-wrap: break-word;
	font-family: monospace;
	background-color: #FFFFFF;
	border-radius: 10px;
        grid-area: side;
        flex-direction: column;
        min-height: 0;
	min-width: 300px;
        max-height: 447px;
	max-width: 300px;
}

#historyItems {
	text-align: right;
	font-size: 20px;
}

#historyItems:empty::before {
	content: "No calculations yet";
	display: block;
	text-align: center;
	color: var(--text-muted);
	font-style: italic;
	font-size: 13px;
	padding: 8px 0;
}
.expression {
	min-height: 22px;
	padding-bottom: px;
	font-size:18px; 
	color:#666;
}
#display > #mem {
	min-height: 18px;
	margin-left: 10px;
	text-align: left;
	font-size:15px; 
	color:#666;
}
.mem {
	padding: 2px;
	font-size: 18px;		
}


	  #instructions {
	    border-style: solid;
		border-width: thin;
		border-color: black;
		margin: 20px;
		max-width: 300px;

	  }
	  .key {
	  border-style: solid;
	  border-width: 1px;
	  padding: 1px 4px;
	  border-radius: 3px;
	  font-family: courier;
	}
	  .keyslim2 {
	  border-style: solid;
	  border-width: 1px;
	  padding: 1px 4px;
	  border-radius: 3px;
	  font-family: courier;
	  display: inline-block;
	}

	  .keyslim3 {
	  border-style: solid;
	  border-width: 1px;
	  padding: 1px 4px;
	  border-radius: 3px;
	  font-family: courier;
	  display: inline-block;

	}
    h2, h3 {
	  margin: 10px;
 	  font-family: arial;
	}
	
	ul {
	  list-style-type: none;
	  padding: 0px 20px;
	  font-family: arial;  	
	  font-size: 17px;
	}

    .innerUL {
	  padding-inline-start: 40px;
    }
	  .outerLi {	  
	  padding: 15px 5px;
	}
	
	li {
	  padding: 5px 0px;
	}
	
	.example {
	  color: green;
	}
footer {
	margin: 0 auto;
}
@media (max-width: 700px) {
	#calculator {
		grid-template-columns: minmax(0, 300px);
		justify-content: center;
		grid-template-areas:
			"title"
			"calc"
			"side";
		padding: 14px;
		gap: 14px;
	}
	.history { 
		max-height: 180px; 
	}    
}