:root{
	--sizeindex: calc(1vh + 1vw);
}
/*calculator styles*/

#calculator{
	color:black;
	display:flex;
	flex-direction:column;
	max-width:94%;
	width:80vw;
	margin:0 auto;
	align-items: center;
}

#calculator .calculator__input{
	color: black;
	width: 100%;
	margin:10px 0 10px 0;
	height:6vh;
	border-radius:0.6vw;
	border:none;
	padding:5px;
	font-size: calc(1.3*var(--sizeindex));
	text-align:center;
}

#calculator .calculator__input:active, :hover, :focus {
  outline: 0;
  outline-offset: 0;
}

.calculator__button{
	width: 100%;
	border:none;
	background-color:var(--headerbg);
	height:6vh;
	border-radius:0.6vw;
	font-size: calc(1.3*var(--sizeindex));
	margin:10px 0 10px 0;
}

.calculator__output{
	height:10vh;
	width: 100%;
	background: white;
	margin:10px 0 10px 0;
	border-radius:0.6vw;
	color: black;
	text-align: center;
	display:flex;
	flex-direction:column;
	justify-content: center;
	font-size: calc(1.2*var(--sizeindex));
}

.calculator__item{
	margin:10px 0 10px 0;
	width: 100%;
	font-size: var(--sizeindex);
	background-color: var(--headerbg);
	height:6vh;
	border-radius:0.6vw;
	text-align: center;
	display:flex;
	flex-direction:column;
	justify-content: center;
}