/*
 __   __        _      _    _        
 \ \ / /_ _ _ _(_)__ _| |__| |___ ___
  \ V / _` | '_| / _` | '_ \ / -_|_-<
   \_/\__,_|_| |_\__,_|_.__/_\___/__/
 */
:root {
	--nav-height: 50px;
}
/*
  ___ _                   _      
 | __| |___ _ __  ___ _ _| |_ ___
 | _|| / -_) '  \/ -_) ' \  _(_-<
 |___|_\___|_|_|_\___|_||_\__/__/
*/
* {
	box-sizing: border-box;
	font-family: sans-serif;
	font-size: 40px;
	font-weight: 900;
}

body {
	margin: 0 auto;
}

nav {
	height: var(--nav-height);
	background-color: black;
	color: white;
	padding: 0 15px;
	display: flex;
	align-items: center;
	position: sticky;
	top: 0;
}

main {
	height: calc(100vh - var(--nav-height));
	background-color: #1c1c1c;
	color: white;
	padding: var(--nav-height) 16.5%;
	display: flex;
	justify-content: center;
}

footer {
	height: 100px;
	background-color: black;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
}

h1 {
	margin: 0;
}

a {
	color: white;
	text-decoration: none;
}

a:hover {
	color: goldenrod;
}

a:active {
	color: white;
}
/*
   ___ _                    
  / __| |__ _ ______ ___ ___
 | (__| / _` (_-<_-</ -_|_-<
  \___|_\__,_/__/__/\___/__/
*/
.frame {
	height: 600px;
	width: 400px;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center	;
	border-radius: 10px;
	gap: 5px;
	padding: 15px;
	background-color: dimgray;
}

.row {
	height: 15%;
	width:90%;
	display: flex;
	justify-content: space-evenly;
}

.display {
	border: 2px solid black;
	border-radius: 15px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	font-size: 32px;
	padding: 0 15px;
	overflow-x: scroll;
	font-family: "Orbitron";
	background-color: #1c1c1c;
}

.button {
	display: flex;
	justify-content: center;
	align-items: center;
	border: 2px solid black;
	flex: 1 1 0;
	border-radius: 50%;
	margin: 5px;
	font-family: "Nunito";
	background-color: #1c1c1c;
	user-select: none; 
  -ms-user-select: none; 
  -webkit-user-select: none;
  transition: transform 0.1s ease-out;
  padding: 10px;
}

.button:hover {
	background-color: white;
	color: black;
}

.button:active {
	background-color: slategray;
	transform: scale(0.95);
	border: 5px solid black;
	padding: 7px;
}

.operator {
 background-color: orange;
 color: black;
}

.delete {
	background-color: red;
	color: white;
}

.clear {
	background-color: royalblue;
	color: white;
}