@charset "UTF-8";

* {
	font-family: "Audiowide", verdana;
}

body {
	height: 100%;
	width: 100%;
}

header {
	display: block;
	font-size: 50px;
	height: 100px;
	margin: 0 auto;
	min-width: 150px;
	text-align: center;
}

p {
	margin: 0 auto;
	max-width: 650px;
	position: relative; /* Asignamos a <p> posición relativa para posicionar .info-contenido con posición abosulta sobre éste */
}

p:active .info-item {  /* Cuando pulsamos sobre <p> con ratón aplicamos a .info-item.. */
	color: #FFFFFF;
	text-shadow: 2px 2px 4px #000000;
}

/* ESTILOS RELOJ */
/* Dentro de <p> tenemos la estructura con <span> que nos sirve para mostrar el contenido js de new Date(). 
Usamos un <span> para cada objeto a mostrar (horas, minutos, etc.). 
Usamos otro <span> que va vinculado a cada uno de los objetos a mostrar que estará posicionado en relación a este y se mostrará al hacer :hover sobre <p>, contiene el nombre del objeto ("hora", "minutos", etc.) */

/* Definimos estilos para <span class="info"> que contiene el objeto a mostrar */
.info {
	display: inline-block;
	min-width: 150px;
	padding-top: .5em;
	position: relative;
	z-index: 999;
}

/* Definimos estilos para <span class="info-item"> que muestra el objeto (horas, minutos, etc) extraído con new Date() en script de js */
.info-item {
	cursor: pointer;
	font-family: "Press Start 2P", verdana;
	font-size: 30px;
	padding: 1em;	
}

/* Definimos estilos para <span class="info-contenido" que muestra descripción de objeto mostrado en .info-item */
.info-contenido {
	color: #33AD5C;
	cursor: pointer;
	font-size: 20px;
	margin: 0 0 105px -140px;
	opacity: 0; /* Definimos al objeto como "invisible" para poder aplicar transiciones y mostrarlo al hacer :hover */
	pointer-events: none;
	position: absolute; /* Posicionamos de manera absoluta sobre su contenedor al que hemos posicionado de manera relativa, esto hará que .info-item e .info-contenido vayan "pegados" */
	top: 70%;
	left: 20%;
	z-index: 9999;
	text-align: left;
	width: 280px;
}

/* Definimos transiciones para cada .info-contenido por separado (en total 4) ya que queremos que cada uno tarde un tiempo diferente en mostrarse */
.info-contenido#info-hora {
	transition: opacity 0.3s, transform 0.3s;
	-moz-transition: opacity 0.3s, transform 0.3s;
	-o-transition: opacity 0.3s, transform 0.3s;
	-webkit-transition: opacity 0.3s, transform 0.3s;
}

.info-contenido#info-minu {
	transition: opacity 0.4s, transform 0.4s;
	-moz-transition: opacity 0.4s, transform 0.4s;
	-o-transition: opacity 0.4s, transform 0.4s;
	-webkit-transition: opacity 0.4s, transform 0.4s;
}

.info-contenido#info-segu {
	transition: opacity 0.5s, transform 0.5s;
	-moz-transition: opacity 0.5s, transform 0.5s;
	-o-transition: opacity 0.5s, transform 0.5s;
	-webkit-transition: opacity 0.5s, transform 0.5s;
}

.info-contenido#info-mili {
	transition: opacity 0.6s, transform 0.6s;
	-moz-transition: opacity 0.6s, transform 0.6s;
	-o-transition: opacity 0.6s, transform 0.6s;
	-webkit-transition: opacity 0.6s, transform 0.6s;
}

/* Definimos el "movimiento" de la caja .info-contenido */
.info .info-contenido {
	transform: translate3d(0,50px,0) rotate3d(1,1,1,-6deg);
	-moz-transform: translate3d(0,50px,0) rotate3d(1,1,1,-6deg);
	-ms-transform: translate3d(0,50px,0) rotate3d(1,1,1,-6deg);
	-o-transform: translate3d(0,50px,0) rotate3d(1,1,1,-6deg);
	-webkit-transform: translate3d(0,50px,0) rotate3d(1,1,1,-6deg);
}

/* Definimos el "movimiento" de .info-contenido al hacer :hover en <p> (para todos los elementos juntos) */
p:hover .info .info-contenido {
	opacity: 1;
	pointer-events: none;
	transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
} 

/* Definimos el "movimiento" de .info-contenido al hacer :hover en <p> (para cada elemento por separado)
.info:hover .info-contenido {
	opacity: 1;
	pointer-events: auto;
	transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
} */

/* Definimos lo que mostraremos en la transformación, en este caso, en content:attr(title) indicamos que usaremos el atributo title de .info-contenido. Definimos los estilos y la posición con respecto .info-item */
.info-contenido::after {
	content: attr(title);
	height: 120px;
	position: absolute;
	top: 100%;
	right: 25%;
	transform: rotate3d(1,1,1,25deg) translate3d(0,-15px,0);
	-moz-transform: rotate3d(1,1,1,25deg) translate3d(0,-15px,0);
	-ms-transform: rotate3d(1,1,1,25deg) translate3d(0,-15px,0);
	-o-transform: rotate3d(1,1,1,25deg) translate3d(0,-15px,0);
	-webkit-transform: rotate3d(1,1,1,25deg) translate3d(0,-15px,0);
	transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	-ms-transform-origin: 50% 0;
	-o-transform-origin: 50% 0;
	-webkit-transform-origin: 50% 0;
	width: 60px;
}

/* Definimos el tiempo que tardará en hacerse la transformación para cada elemento (total 4) ya que queremos que cada uno lo haga en un tiempo diferente */
.info-contenido#info-hora::after {
	transition: transform 0.3s;
	-moz-transition: transform 0.3s;
	-o-transition: transform 0.3s;
	-webkit-transition: transform 0.3s;
}

.info-contenido#info-minu::after {
	transition: transform 0.4s;
	-moz-transition: transform 0.4s;
	-o-transition: transform 0.4s;
	-webkit-transition: transform 0.4s;
}

.info-contenido#info-segu::after {
	transition: transform 0.5s;
	-moz-transition: transform 0.5s;
	-o-transition: transform 0.5s;
	-webkit-transition: transform 0.5s;
}

.info-contenido#info-mili::after {
	transition: transform 0.6s;
	-moz-transition: transform 0.6s;
	-o-transition: transform 0.6s;
	-webkit-transition: transform 0.6s;
}

/* Definimos como se mostrará la transformación para .info-contenido al hacer p:hover. (para todos los elementos juntos) */
p:hover .info .info-contenido::after {
	transform: rotate3d(1,1,1,0) translate3d(0,-5px,0);
	-moz-transform: rotate3d(1,1,1,0) translate3d(0,-5px,0);
	-ms-transform: rotate3d(1,1,1,0) translate3d(0,-5px,0);
	-o-transform: rotate3d(1,1,1,0) translate3d(0,-5px,0);
	-webkit-transform: rotate3d(1,1,1,0) translate3d(0,-5px,0);
}

/* Definimos como se mostrará la transformación para .info-contenido al hacer p:hover. (para cada elemento por separado)
.info:hover .info-contenido {
	transform: rotate3d(1,1,1,0) translate3d(0,-5px,0);
	-moz-transform: rotate3d(1,1,1,0) translate3d(0,-5px,0);
	-ms-transform: rotate3d(1,1,1,0) translate3d(0,-5px,0);
	-o-transform: rotate3d(1,1,1,0) translate3d(0,-5px,0);
	-webkit-transform: rotate3d(1,1,1,0) translate3d(0,-5px,0);
} */