* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background: #0d1327;
	font-family: 'SF UI Text';
	transition-duration: 0.5s;
	letter-spacing: 2px;
}

button {
	cursor: pointer;
	font-size: 2rem;
	border-radius: 5px;
	background-color: #4e4e51;
	border: none;
	color: white;
	padding: 8px 0;
}

/* ==============================
========== DARK MODE ============
=================================*/

.mainContainer {
	margin: 100px auto;
	width: 500px;
	display: grid;
	grid-template-columns: auto 50px;
	justify-content: space-between;
}

.calculator {
	background: #242424;
	width: 400px;
	margin: auto;
}

.heading {
	background: #383838;
	padding: 60px 10px 40px;
}

.heading,
.calculator {
	border-radius: 5px;
}

.result {
	display: grid;
	grid-template-columns: 1fr 0.1fr;
	box-sizing: border-box;
	align-items: center;
	background: #c9c9c9;
	padding: 15px 0;
	margin: auto;
	border-radius: 5px;
}

.result > span,
.result > button {
	margin: 0 5px;
	padding: 5px 10px;
	align-self: center;
}

.result .lightOperationButtons {
	background: #aaa9a9;
}

#resultScreen {
	/* border: 2px green solid;
	color: red; */
	font-size: 24px;
	word-break: break-all;
}
.buttons {
	padding: 50px 0;
	margin: 0 10px;
	display: grid;
	align-content: center;
	justify-content: center;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: minmax(100px, auto) (4, 100px);
}

.buttons > button {
	margin: 6px;
}

button:hover {
	background-color: #38383a;
}

.operationButtons {
	background: #446acc;
}
.operationButtons:hover {
	background: #5b8aff;
}

.resultButton {
	background: #c26b08;
}
.resultButton:hover {
	background: #ce8026;
}

.themeImage .darkThemeImage,
.themeImage .lightThemeImage {
	opacity: 85%;
	cursor: pointer;
}

.themeImage .darkThemeImage:hover,
.themeImage .lightThemeImage:hover {
	opacity: 100%;
}

/* ==============================
========== WHITE MODE ============
=================================*/

/* 
	lightBody 
	lightImages 
	lightThemeImage
	darkThemeImage
	lightCalculator	
	lightHeading 
	lightResult 
	lightButtons
	lightOperationButtons
	lightResultButton
	
	*/

.lightBody {
	background: #f7f7f7;
}
.lightCalculator {
	background: #525252;
}
.lightHeading {
	background: #707277;
}
.lightResult {
	background: #e1e1e1;
}

.lightButtons button {
	background: #e1e1e1;
	color: black;
}

.lightButtons button:hover {
	background: #b9b8b8;
}

.lightButtons .lightOperationButtons,
.lightOperationButtons {
	background: #c7c7c7;
	color: black;
}
.lightButtons .lightOperationButtons:hover,
.lightOperationButtons:hover {
	background: #5b8aff;
}
.lightButtons .lightResultButton {
	background: #e9912c;
}

.lightButtons .lightResultButton:hover {
	background: #c26b08;
}

.hideIt {
	display: none;
}