@import url("https://fonts.googleapis.com/css?family=Lato");

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html{
	height: 100%;
	scroll-behavior: smooth;
}

@font-face{
	font-family: unlearn;
	src: url('fonts/unlearn.ttf');
}

@font-face{
	font-family: Minecraft;
	src: url("fonts/Minecraft.otf");
}

body{
	display: grid;
	min-height: 100%;
	grid-template-areas: 
		"nav nav nav nav"
		"header header header header"
		"section section section section"
		"acerca acerca acerca acerca"
		"aside aside aside aside"
		"contacto contacto contacto contacto"
		"footer footer footer footer";
	grid-template-rows: auto 1fr auto auto 1fr auto;
	font-family: Lato;
	background-color: black;
}

nav{
	grid-area: nav;
	background-image: linear-gradient(to right, black, #140023);
}

nav ul{
	display: flex;
	justify-content: space-between;
	list-style-type: none;
}

nav a{
	text-decoration: none;
	font-weight: bold;
	color: magenta;
}

nav li{	
	padding: 1.5rem;
}

nav li:hover{
	background-color: indigo;
}

nav li:first-of-type, nav li:nth-child(2){
	display: none;
}

.dropdown{
	display: none;
	background-color: black;
	color: inherit;
	margin-top: 1rem;
}

.dropdown p{
	padding: 1rem;
}

.dropdown p:hover{
	background-color: indigo;
	color: black;	
}

header{
	grid-area: header;
	background-image: url("img/arcade.jpg");
	display: grid;
	align-items: center;
	padding-top: 8rem;
}

header div{
	background-color: rgba(0, 0, 0, 0.8);
	padding: 1rem;
}

section{
	grid-area: section;
	background-image: linear-gradient(to right, magenta, indigo);
}

#acerca{
	grid-area: acerca;
	background-image: linear-gradient(to right, black, #140023);	
}

aside{
	grid-area: aside;
	display: flex;
	justify-content: space-between;
	background-image: linear-gradient(to right, magenta, indigo);
}

article{
	width: 30%;
	padding: 1rem;
	background-image: linear-gradient(to right, black, #140023);
}

article img{
	width: 100%;
	height: 70%;
	object-fit: cover;
}

img:hover{
	opacity: 0.8;
}

#contacto{
	grid-area: contacto;
	background-image: linear-gradient(to right, black, #140023);
}

footer{
	grid-area: footer;
	background-image: linear-gradient(to right, magenta, indigo);
	text-align: center;
}

:not(footer,article) > img{
	width:100%;
	height: auto;
}

footer img{
	width: 3rem;
	height: auto;
	color: black;
}

footer a{
	text-decoration: none;
	color: black;
	font-weight: bold;
}

footer a:hover{
	color: indigo;
}

header, section, #acerca, aside, #contacto, footer{
	padding: 1.5rem;
}

h1{
	font-family: unlearn;
	font-size: 8rem;
	background: linear-gradient(to right, fuchsia, magenta);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

h2{
	font-family: Minecraft;
	font-size: 2rem;
	color: magenta;
}

p{
	color: white;
}

#acerca{
	display: flex;
}

#acerca p{
	float: left;
	width: 50%;
	padding: 1rem;
}

#acerca img{
	float: right;
	width: 50%;
}

#contacto{
	display: flex;
}

#contacto p{
	float: left;
	width: 50%;
	padding: 1rem;
}

#contacto iframe{
	float: right;
	width: 50%;
}

hr{
	border: 1px solid magenta;
}

.parallax{
	width: 100;
	height: auto;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.shadowed{
	box-shadow: 0px 3px 10px black;
}

@media screen and (min-width: 801px){
	nav li:hover > .dropdown{
		display: block;
		position: absolute;
	}
}

@media screen and (max-width: 800px){
	body{
		grid-template-rows: auto auto auto auto 1fr auto;
	}

	nav ul{
		flex-direction: column;
	}

	nav:not(:target) li:first-of-type{
		display: inherit;
	}

	nav:not(:target) li{
		display: none;
	}

	nav:target li{
		display: inherit;
	}

	nav:target li:first-of-type{
		display: none;
	}

	h1{
		font-size: 4.5rem;
	}

	h2{
		font-size: 1.5rem;
	}

	aside{
		flex-direction: column;
	}

	article{
		width: 100%;
	}

	#acerca{
		flex-direction: column;
	}

	#contacto{
		flex-direction: column;
	}

	#acerca p, #acerca img, #contacto p, #contacto iframe{
		width: 100%;
	}

	.dropdown{
		display:list-item;
		margin-left: 2rem;
	}
}

@media screen and (max-width: 400px){
	h1{
		font-size: 3rem;
	}

	h2{
		font-size: 1rem;
	}	
}

#contactopara{
	padding: 5rem;
	font-size: 2rem;
}