/* AUTORES: Paula Ortiz e Iván Palacios  */

body {
	width: 100%;
	display: flex;
	flex-direction: row;
    justify-content: center;
    align-items: center;
  	background-image:
	    linear-gradient(120deg, black , transparent, black ),   
	    linear-gradient(60deg, black , transparent, black ),
	    linear-gradient(to top, black , limegreen, black );
  	background-size: 80px 80px;
  	color: white;

}
main{
	margin: 20px;
	width: 70%;
}
aside{
	position: fixed;
	left: 71%;
	top: 40%;
}

/*espacio donde se encuentran los botones*/
.botones { 
	margin: 0px;
	display: flex;
	justify-content: center;
    align-items: center;
}
/*espacio donde se encuentran los botones de mundos predefinidos*/
#pred { 
	display: flex;
    flex-direction: column;
}
/*estilo usado por los botones*/
.boton {
	color: white;
	border: 1px solid black;				
	margin: 15px;
	padding: 10px;
	display: inline-block;
	border-radius: 10px;
	border: 5px outset limegreen;
	background: linear-gradient(-45deg, black, limegreen);
}
/*cuando el raton esta sobre el boton, se hace mas grande*/
.boton:hover {
	transform: scale(1.1)
}
/*espacio donde se encuentra la simulación y sus botones*/
#simulacion { 
	display: flex;
	flex-direction: column;
	justify-content: center;
    align-items: center;
}
/*espacio donde se encuentra la simulación*/
#canvas { 
	border:5px outset limegreen; 
	margin:  20px;
	display: flex; 
	background-color: black;
}
/*espacio donde se encuentran los datos de la célula*/
#datosCelula{ 
	margin: 100px;
	padding: 30px 20px;
	border-radius: 20px;
	border: 5px outset limegreen;
	background: black;
	display: flex;
	flex-direction: column;
	width: 250px;
}
/*espacio donde se encuentra la información dada al usuario*/
#info { 
	margin: 50px;
	padding: 20px 50px;
	border-radius: 20px;
	border: 5px outset limegreen;
	background: black;
	display: flex;
	flex-direction: column;
}
/*botones para determinar el tamaño del mundo*/
#ancho, #alto, input { 
	color: white;
	border: 1px solid black;				
	margin: 15px;
	border-radius: 10px;
	border: 5px outset limegreen;
	background: linear-gradient(-45deg, black, limegreen);
}
/*texto de los marcos para determinar el tamaño del mundo*/
::placeholder { 
	color: white;
}

h1 {
	font-size: 100px;
}
h3 {
	font-size: 30px;
}
#gen {
	font-size: 20px;
}