@font-face {
    font-family: "orange";
    src: url(../fonts/orange_juice.ttf) format("truetype");
}

html {
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
}

body{
	background-color: #FDF7D5;
}

.general {
	display: flex;
	flex-direction:column;
	flex-flow: center;
	justify-content:center;
	align-items:center;
	min-height: 100vh;
}

.titulo{
	align-content: center;
	min-height:15vh;
	font-family: "orange";
	font-size:100px;
	text-align: center;
	margin-top: 15px;
}

.contenedor {
	display: flex;
	flex-direction: row;
	flex-flow: space-between;
	justify-content:center;
	align-items:center;
	align-content:center;
	min-height:25vh;
	min-width: 900px;
}

.caja {
	flex-grow:2;
	background:rgba(0,0,0,0.2);
	text-align: center;
	font-size:150px;
	font-family: "orange";
}

.caja:nth-child(even) {
	flex-grow:1;
	background:transparent;
}

.contenedor2 {
	display: flex;
	flex-direction: row;
	flex-flow: space-between;
	justify-content:center;
	align-items:center;
	align-content:center;
	min-height:35vh;
	max-width: 900px;
	flex-wrap:wrap;
	background: transparent;
	border:1px solid black;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
}

.opcion {
	max-width:calc(25%-20px);
	font-size:100px;
	font-family: "orange";
	text-align: center;
	margin: 20px;
}

.opcion span {
	background:rgba(0,0,0,0.2);
	-webkit-border-radius: 500px;
	-moz-border-radius: 500px;
	border-radius: 500px;
	padding: 0 20px;
}

.opcion span:hover {
	background:rgba(0,0,0,0.3);
	cursor: pointer;
}

.contenedorE{
	display: flex;
	flex-direction: row;
	flex-flow: space-between;
	justify-content:center;
	align-items:center;
	align-content:center;
	min-height:10vh;
	min-width: 900px;
}

.errores{
	flex-grow:1;
	text-align: center;
	font-size:50px;
	font-family: "orange";
}

.pie {
	display: flex;
	align-content: center;
	font-size:20px;
	text-align: center;
	height:5vh;
}

.pie span {
	align-self:flex-end;
}