.calc{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-bottom: 1em;
	background-color: #404040;
	border-radius: .5rem;
	user-select: none;
}

.calc::before{
	content: '';
	position: absolute;
	top: -.25em;
	right: -1em;
	height: 100%;
	width: 1.5em;
	background-color: #262626;
	border-radius: .5rem;
	transform-origin: left;
	transform: skewY(45deg);
	z-index: -1;
}

.calc::after{
	content: '';
	position: absolute;
	bottom: -1em;
	left: -.25em;
	height: 1.5em;
	width: 100%;
	background-color: #262626;
	border-radius: .5rem;
	transform-origin: top;
	transform: skewX(45deg);
	z-index: -1;
}

.calc-score{
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 3em;
	width: 12em;
	margin: .5em;
	padding: .25em;
	font-size: 2rem;
	background-color: #64B37D;
	border-top: .15em solid #262626;
	border-left: .15em solid #262626;
	border-radius: .5rem;
	font-family: 'Orbitron', sans-serif;
	text-align: right;
}

.calc-btns{
	width: 12em;
	margin-top: .5em;
	font-size: 2rem;
	font-family: 'Kanit', sans-serif;
}

.calc-btns-top{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 1em;
	margin-bottom: 1em;
}

.calc-btns-btm{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(4, 1fr);
	column-gap: 1em;
	grid-row-gap: .35em;
}

.btn{
	position: relative;
	display: grid;
	place-items: center;
	width: 3em;
	font-size: 1.5rem;
	cursor: pointer;
}

.btn-clicked{
	bottom: -.25em;
	right: -.25em;
}

.btn-animate{
	display: none;
}

.btn-side{
	content: '';
	position: absolute;
	top: -.03em;
	right: -.175em;
	height: 100%;
	width: .25em;
	background-color: var(--btn-color-110);
	border-radius: .5rem;
	transform-origin: left;
	transform: skewY(45deg);
}

.btn-btm{
	content: '';
	position: absolute;
	bottom: -.175em;
	left: -.03em;
	height: .25em;
	width: 100%;
	background-color: var(--btn-color-110);
	border-radius: .5rem;
	transform-origin: top;
	transform: skewX(45deg);
}

.btn > span{
	position: relative;
	width: 100%;
	height: 100%;
	padding: .25em 0;
	background-color: var(--btn-color-100);
	border-radius: .25rem;
	text-align: center;
	text-transform: uppercase;
	color: rgb(240, 240, 240);
	z-index: 5;
}

.btn:hover > span{
	background-color: var(--btn-color-120);
}