@font-face {
	font-family: 'DS Digital';
	src: url('./font/DS-DIGIT.TTF') format('truetype'); /* Adjust path if necessary */
}

::selection {
	background: transparent;
}

* {
	font-family: Roboto, 'Helvetica Neue', san-serif;
	font-family: 'DS Digital', monospace;
	/* outline: solid 2px red; */
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: orange;
	height: 98vh;
	perspective: 1000px;
	padding: 0;
	margin: 0;
}

#container {
	background-color: #333333;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	height: 32rem;
	min-height: 32rem;
	width: 25rem;
	min-width: 25rem;
	padding: 1.5rem 0;
	border-radius: 0.5rem;
	box-shadow: -6px 1px 10px #222222, -6px 6px 0px #222222;
}

#screen {
	display: flex;
	justify-content: end;
	align-items: center;
	width: 21rem;
	height: 5rem;
	border-radius: 0.5rem;
	font-size: 5rem;
	background-color: #cde9e9b6;
	box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5);
	overflow: hidden;
	padding: 0 1rem;
}

#screen-text {
	opacity: 0.5;
}

#buttons {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
	width: 21rem;
	height: 25rem;
	max-height: 25rem;
	gap: 1rem;
	margin-top: 0.5rem;
}

.button {
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Roboto', sans-serif;
	font-size: 2em;
	background-color: #858585;
	color: white;
	width: 4rem;
	height: 3.5rem;
	border-radius: 5px;
	margin: 0 0.3rem;
	box-shadow: 4px 1px 10px #222222, 4px 6px 0px #222222;
}

.button:hover {
	background-color: #b6b6b6;
	cursor: pointer;
	transform: scale(1.1) translate(0, -2px);
	transition: 0.3s ease-out;
}

.erase:hover {
	background-color: rgb(146, 7, 7);
	transition: 0.3s ease-out;
}

.addition {
	height: 8rem;
}

.erase {
	background-color: rgb(207, 10, 10);
}