@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');

:root {
	--bg1: #2e3440;
	--bg2: #3b4252;
	--bg3: #4c566a;
	--white1: #d8dee9;
	--white2: #eceff4;
	--cyan: #8fbcbb;
	--green: #a3be8c;
	--blue: #81a1c1;
	--purple: #b48ead;
}

body {
	font-family: 'Source Code Pro', monospace;
	margin: 0px;
	background-color: var(--bg1);
}

#nav {
	background-color: var(--bg2);
	padding: 10px;
}

#calculator {
	padding-left: 10px;
	color: var(--white2);
}

#icon,
#sep {
	color: var(--white1);
}

#sep {
	display: inline;
}

.page {
	color: var(--white1);
	display: inline-block;
	padding-left: 5px;
	padding-right: 5px;
}

.page:hover {
	background-color: var(--bg3);
	border-radius: 5px;
	text-decoration: none;
}

h1,
h2 {
	color: var(--blue);
}

#submit {
	border-radius: 40px;
	border-style: none;
	background-color: var(--purple);
	padding: 10px;
	color: var(--white2);
	display: inline-block;
}

#submit:hover {
	background-color: var(--cyan);
	color: var(--bg2);
	cursor: pointer;
}

.lvl3 {
	color: var(--green);
}

select,
#operand1,
#operand2,
#submit {
	font-size: 16px;
	font-family: 'Source Code Pro', sans-serif;
}

select,
#operand1,
#operand2 {
	border-radius: 10px;
	background-color: var(--white2);
}

input[type='radio'] {
	background-color: var(--white2);
}

#operand1,
#operand2 {
	text-align: center;
}

span {
	text-decoration: bold;
}

.input-section,
.output-area {
	float: left;
	width: 50%; /* allows webpage to be split into two panes */
}

#final-operation,
#result {
	color: var(--white1);
}

a {
	text-decoration: none; /* disable underline for hyperlinks */
}