@charset "utf-8";


body, html {
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
	background-color: rgb(113, 236, 123);
	
}
nav {
	margin-bottom:0.1em;
	font-family: 'Lato', sans-serif;
	
}
nav ul {
	list-style-type:none;
	margin:0;
	padding:0;
	display:flex;
}
nav li { flex-grow: 1; }
nav a {
	display: block;
	padding: 1em;
	text-align: center;
	text-decoration: none;
	color: #000000;
	border: solid 1px #424242;
	transition: all 0.5s;
	text-transform: uppercase;
}
nav a:hover {
	background-color:#4fc3f7; }



section{
	display: grid;

    grid-template-columns: 1fr 1fr 1fr ; /*repeat(4, 1fr)*/
    grid-template-columns: minmax(100. auto);
    gap: 5px;
}
article h1 {
	margin: 1rem 1rem 0rem 1rem;
	text-transform: uppercase;
}
#caja {
	display:grid;
	grid-gap: 2rem;
	padding:1rem;
}
.bloque {
	font-family: 'Merriweather', serif;
	box-shadow: 3px 5px 28px 0px rgba(0,0,0,0.75);
}
.bloque video {
	width:100%;
	height:100%;
	border: 1px solid black;
}
.bloque iframe{
	width:100%;
	height:auto;
	border: 1px solid black;

}
article h1{
	font-family: 'Times New Roman', Times, serif;
	text-align: center;
	border: 1px solid black;
}
article p {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	margin-left: 2px;
	border: 1px solid black;
}


aside {
	display:grid;
	grid-gap: 0.5rem;
	padding:0.5rem;
	background-color:rgb(88, 217, 240) ;
}



.luz img {
	width:50%;
	height:auto;
	transition:all 1s;
	align-self: center;
	padding: 60px;
	border: 2px solid blue;
	
}
.luz img:hover {
	filter:invert(100%);
}

footer{
	background-color: rgb(233, 147, 147);
	text-align: center;
	font-family: fantasy;
}


	@media (orientation: landscape) {
		section {
			grid-template-columns: 3fr 1fr;
			grid-template-rows: auto;
		}
		#caja {
			grid-template-columns: 1fr 1fr 1fr 1fr;
			grid-template-rows: auto;
		}
		aside {
			grid-template-columns: 1fr;
			grid-template-rows: 1fr ;
		}
		nav ul {
			flex-direction: row;
		}
		a {
			margin-right:0.2em;
		}
		}
		@media (orientation: portrait) {
		section {
			grid-template-columns: 1fr;
			grid-template-rows: auto auto;
		}
		#caja {
			grid-template-columns: 1fr ;
			grid-template-rows: 1fr 1fr 1fr;
		}
		aside {
			grid-template-columns: 1fr ;
			grid-template-rows: 1fr 1fr 1fr;
		}
		nav ul {
			flex-direction: column;
		}
		nav a {
			margin-bottom:0.2em;
		}
		}