@charset "utf-8";

/*Cargamos las fuentes de Texto*/
@font-face{
	font-family:"BoldItalic";
	src:url("../fonts/FiraSans-BoldItalic.ttf");
}

@font-face{
	font-family:"BookItalic";
	src:url("../fonts/FiraSans-BookItalic.ttf");
}

h1{font-family:Arial, Helvetica, sans-serif; color:#040113;}
h2{font-family:Georgia, 'Times New Roman', Times, serif; color:#2f6208;}
h3{font-family:'Times New Roman', Times, serif; color:#350864;}

h1, h2, noscript, a{
	display:inline-block;
	margin:0px 20px 0px 20px;
	padding:0px 0px 0px 0px;
}

h3{
	display:inline-block;
	margin:0px 20px 0px 500px;
	padding:0px 0px 0px 0px;
	font-style:italic;
	font-size:1rem;
	}

/*
input{
	margin:0px 1px 0px 20px;
	background-color:transparent;
	border:2px solid #858585;
	border-radius:5px;
	font-family:"BookItalic";
	text-align:center;
	color:#CD6723;
}  */

#reloj,
#cronometro{
	margin:15px 9px;
	background-color:transparent;
	font-family:"BoldItalic";
	color:#CD6723;

}

/* Distribucion de las cajas */
body{
	min-width:531px;
	margin:5px auto;
	background-color:#79ee95;
}

#main {
	margin: 5px;
	padding: 10px;

	display: -webkit-flex;
	display:         flex;

	-webkit-flex-flow: column;
			flex-flow: column;
}


#main > header {
	margin: 5px;
	padding: 10px;
	min-height:90px;
	background-color:#f17a7a;
	border:2px solid #3d4e04;
	border-radius:10px;
	
	-webkit-flex: 3 1 100%;
			flex: 3 1 100%;
			
	-webkit-order: 1;
			order: 1;

		display: flex;
		flex-direction: row;
		flex-wrap: wrap;justify-content: space-around;
		align-items: center;
}

canvas{
	margin-left: 120px;
}

#relojAnalogico{
	background-color: #0b5bef;
	border: 4px solid greenyellow;
	border-radius: 16px;
	
}


#main > article {
	margin: 5px;
	padding: 10px;
	min-height:400px;
	background:#75beeb url("../media/tiempo.jpg") center right no-repeat; 
	border:2px solid #858585;
	border-radius:10px;

	-webkit-flex: 3 1 100%;
			flex: 3 1 100%;
			
	-webkit-order: 2;
			order: 2;
}

#main > footer {
	margin: 5px;
	padding: 10px;
	min-height:20px;
	background-color:#000000;
	border:2px solid #858585;
	border-radius:10px;
	
	-webkit-flex: 3 1 100%;
			flex: 3 1 100%;
			
	-webkit-order: 3;
			order: 3;
}

footer > a{
	display:block;
	color:#CD6723;
	text-align:right;
}

/*Eventos */

a:hover{
	color:#008EAB;
	text-shadow: 5px 5px 5px #CD6723;
}

input:focus{
    outline: 0;
}

input:hover,
input:focus{
	background-color:#5F5F5F;
	border:2px solid #858585;
	border-radius:5px;
	color:#008EAB;
}