@font-face{
	font-family:"firaSans";
	src: url(FiraSans-Medium.otf);
}


body{
	font-family:"firaSans",serif;
	background-image: url(fondo.jpg);
	background-repeat: repeat;
}

h3{
	margin-top: 3%;
	text-align: center;
	font-family:"firaSans",serif;
}

#contenedoraPrincipal{
	margin-left: 20%;
	background-color: #0040FF;
	width:60%;
	min-height:350px;
	border-style: solid;
	border-width: 2px;
	border-radius: 20px;
	display:flex;
	flex-direction:row;
	flex-wrap: wrap;
}

#h5{
	font-family:"firaSans",serif;
	text-align: center;
	border-style: solid;
	border-width: 2px;
	border-color: #000000;
	flex-basis:100%;
	flex-grow:1;
	background-color: #FFFFFF;	
}

.principales{
	margin-left: 30%;
	margin-top: 25px;
	margin-bottom: 15px;
	border-style: solid;
	border-width: 2px;
	border-color: #000000;
	width:40%;
	height:40px;
	font-family:"firaSans",serif;
	font-size: 1.2em;
	text-align: center;

}

.contenedorasOperaciones{
	margin-bottom: 10px;
	margin-right: 20px;
	margin-left: 20px;
	margin-top: 20px
	flex-basis:100%;
	flex-grow:1;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content:space-around;
}

.operaciones{
	font-weight: bold;
	margin-top: 10px;
	margin-bottom: 15px;
	height: 40px;
	border-style: solid;
	border-width: 2px;
	border-color: #000000;
	box-shadow: inset 5px -5px 4px 1px rgba(0,0,0,0.50);
	border-radius: 4px;
	flex-basis: 80px;
}

.operaciones:hover{
	background-color: #819FF7;
	border-style: solid;
	border-width: 3px;
	border-color: #000000;

}

#resultadoBinarias{
	box-shadow: inset 5px -5px 4px 1px rgba(0,0,0,0.50);
	border-radius: 4px;
}

#resultadoBinarias:hover{
	background-color: #819FF7;
	border-style: solid;
	border-width: 3px;
	border-color: #000000;
}