:root{
	--sizeindex: calc(1vh + 1vw);
}
/*calculator styles*/
#rocket_calculator{
	color:black;
	display:flex;
	flex-direction:column;
	max-width:94%;
	width:80vw;
	margin:0 auto;
	align-items: center;
}

#rocket_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;
}

#rocket_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;
}

.rocket__type{
	display: flex;
	flex-direction:row;
	width: 100%;
	justify-content: space-between;

}
.rocket__type .calculator__button{
	width: 30%;
	height: auto;
	margin: 10px
	padding: 10px;
}
.calculator__button img{
	max-height: 90%;
	width: 70%;
}
.rocket__type .calculator__button:hover{
	cursor: pointer;
	transform:scale(1.02);
	transition:0.3s ease;
}
#result{
	color: black;
}