@font-face {
	font-family: "BebasNeue Regular";
	src: url("../font/BebasNeue-Regular.ttf") format("truetype");
}

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

body {
	background-color: #f2b6ef;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: "BebasNeue Regular";
	font-size: 25px;
	height: 100vh;
}

/*
=================
	calculator
=================
*/

.calculator {
	width: 306px;
	height: 523px;
	border-radius: 25px;
	background-color: #f2f2f4;
	margin-top: 20px;
	box-shadow: 4px 4px 15px -4.2px #343434;
}

/*
=================
	output
=================
*/

.output {
	border-radius: 25px;
	width: 100%;
	height: 155px;
	background-color: #161616;
	display: flex;
	justify-content: end;
}

.output__container {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: end;
	flex-wrap: wrap;
	padding: 0 20px;
}

.output__question,
.output__answer {
	width: 100%;
	display: flex;
	justify-content: center;
	overflow-x: scroll;
	background-color: inherit;
	outline: none;
	border: none;
	text-align: right;
}

.output__question {
	margin-top: 10px;
	color: rgba(242, 242, 244, 0.6);
	font-size: 22px;
}

.output__answer {
	color: #f2f2f4;
	margin: 10px 0 0px;
	font-size: 40px;

}

.output__answer::-webkit-scrollbar,
.output__question::-webkit-scrollbar {
	display: none;
}

.output__answer,
.output__question::-webkit-scrollbar {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

/*
=================
	input
=================
*/

.input {
	width: 100%;
	background-color: #f2f2f4;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding: 20px 0;
}

.input__keypad {
	width: 42px;
	height: 42px;
	background-color: #bbbbf2;
	margin: 10px auto;
	text-align: center;
	line-height: 42px;
	border-radius: 10px;
	cursor: pointer;
	user-select: none;
}

.input__keypad--zero {
	grid-column: span 2;
	width: 77%;
}

.input__keypad--equal,
.input__keypad--ac {
	background-color: #745ff2;
}

.input__keypad--pow {
	font-size: 12px;
	font-weight: 900;
}