@charset "utf-8";

@font-face{
	font-family:titulo;
	src:url(../fonts/righteous-regular.ttf);
}

@font-face{
	font-family:apartados;
	src:url(../fonts/lobster-regular.ttf);
}

@font-face{
	font-family:sub;
	src:url(../fonts/opensans-condbold.ttf);
}


@font-face{
	font-family:parrafo;
	src:url(../fonts/opensans-condlight.ttf);
}

.contenedor{
	display:flex;
	flex-direction:column;
}

body{
	 height:100%;
	 background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%,800, from(#cde6f9), to(#6191bf));
}


h1{ 
	font-family:titulo;
	text-align:center;
	letter-spacing:2px;
	padding-bottom:3%;
	
}

h4{
	font-family:sub;
	text-align:center;
	letter-spacing:1px;
	
}

p{
	font-family:parrafo;
	margin-left:2px;
	text-align:center;	
}

header{
	margin:auto;
}

ul{
	list-style:none;
	text-align:center;
}		

.nav > li{
	float:left;
}

.nav li ul{
	display:none;
	position:absolute;
	min-width:140px;
}

.nav li:hover>ul{
	display:block;
}

.nav li ul li{
	position:relative;
}


.nav li a{
	display:block;
	font-family:apartados;
	border:2px grey solid;
	-webkit-border-radius: 40% 40%;
	box-shadow:2px 2px grey;
	background-color: lightblue;
	color:rgba(0, 0, 153, 1);
	text-decoration:none;
	padding:10px 12px;
	margin:5px;
}

.nav li a:hover {
				background-color:#434343;
			}

article img{
	width:20%;
	height:30%;
	margin-top:2%;
	margin-left:40%;
	border:2px lightblue solid;
	box-shadow:4px 4px grey;
	-webkit-border-radius: 25% 25%;

}

#coin{
	width:45px;
	height:40px;
	margin:auto;
	background:url("../img/coin.png") repeat-x;
	animation:walk 1s steps(10) infinite;
}

@keyframes walk {
	0% { background-position:0 }
	
	100% { background-position:438px }
}

@media all and (max-width: 640px){
	ul li{
		flex-direction:column;
		-webkit-flex-direction:column;
		width:60%;
		height:60%;
		margin-left:15%;
		}
	p{
	font-size:90%;
	}
	h4{
	font-size:90%;
	}
	
	
}