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

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

* {
	margin:0;
	padding:0;
	-webkit-font-family:NimbusMonoBold;
	-moz-font-family:NimbusMonoBold;
	font-family:NimbusMonoBold;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
    list-style:none;
}

body {
	background-color:rgba(24,24,24,1);
}

.contenedor {
	background:rgba(24,24,24,1);
	width:94%;
	max-width:1500px;
	margin:auto;

	display:flex;
	flex-flow:row wrap;
}

/* HEADER */

header {
	border-bottom:5px solid #00ff00;
	width:100%;
	padding:20px;
    font-family:NimbusMonoBold;

	display:flex;
	align-items:center;
	text-align:center;
	
	flex-direction:row;
	flex-wrap:wrap;
}

header .titulo {
	margin:0;
	display:table;
    font-family:NimbusMonoBold;
}

header .titulo .clock {
    text-align:center;
    font-family:NimbusMonoBold;
    font-size:20px;

    color:white;
}

header .titulo h1 {
    font-family:NimbusMonoBold;
	position:relative;
	color:rgba(255,255,255,1);
}

header .titulo h1 span {
	position:absolute;
	right:0;
	width:0;
	background:rgba(24,24,24,1);
	border-left:1px solid rgba(24,24,24,1);

	animation:welcome 3s infinite alternate steps(30);
}

@keyframes welcome {
	from {
		width:100%;
	}
	to {
		width:0;
	}
}

/* NAV */

nav {
	margin:2px;
	padding:2px;
	width:100%;

	display:inline;
    text-align:right;
	align-items:center;
}

nav a {
	background:rgba(70,70,70,1);
	color:rgba(255,255,255,1);
	text-align:center;
	text-decoration:none;
	padding:8px;
	border:1px solid white;
    font-size:16px;
	font-weight:bold;

	flex-grow:1;
}

nav a:hover {
	background:rgba(0,0,0,1);
	color:rgba(255,255,255,1);	
}



/* SECTION */

section {
	padding:30px;

	flex:1 1 75%;
}

section .cabecera {
	display:flex;
	justify-content:space-between;
	align-items:center;
	text-align:center;

}

section .cabecera h1 {
    color:white;
    font-size:18px;
    font-weight:bold;
}

section .cabecera .meta p {
	color:rgba(255,255,255,1);
	text-align:left;
	-webkit-font-family:NimbusMonoBold;
	-moz-font-family:NimbusMonoBold;
	font-family:NimbusMonoBold;
}

section article {
	margin-top:20px;
	padding-top:20px;
	border-top:1px solid white;
	margin-bottom:20px;
	padding-bottom:20px;
	border-bottom:1px solid white;
}

section article p {
	color:rgba(255,255,255,1);
	font-size:18px;
	-webkit-font-family:NimbusMonoBold;
	-moz-font-family:NimbusMonoBold;
	font-family:NimbusMonoBold;
}

section article p .comment {
    color:#b30000;
    font-weight:bold;
}

section article p .tab {
    margin-left:40px;
}

section article p .tabtab {
    margin-left:80px;
}

section article p .tabtabtab {
    margin-left:120px;
}

section article p .tabtabtabtab {
    margin-left:160px;
}

section article p .tabtabtabtabtab {
    margin-left:200px;
}

section article a {
	text-decoration:none;
	color:rgba(255,255,255,1);
	text-shadow:0 0 1px black,0 0 1px black,
	0 0 1px black,0 0 1px black;
}

/* ASIDE */

aside {
	border-right:5px solid #00ff00;
	padding:20px;
    font-family:NimbusMonoBold;

	flex:1 1 25%;

	display:flex;
	flex-wrap:wrap;
	flex-direction:column;

    text-align:center;
}

aside .arriba {
	display:flex;
	justify-content:flex-start;
	flex-direction:column;
    text-align:center;

	padding:10px;
	padding-bottom:30px;
}

aside .arriba .clock {
    text-align:center;
    font-family:NimbusMonoBold;
    font-size:20px;

    color:white;
}

aside .arriba h2 {
	color:#fff;
	text-align:center;
	padding-bottom:8px;
	font-size:20px;
}

#clock-container {
    display: grid;
}

.clock-box {
    padding: 20px;
    color:#fff;
    background: transparent;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-align: center;
}

.time {
    font-size: 2rem;
    margin-top: 10px;
    font-weight: bold;
}

aside .arriba #boton {
	text-decoration:none;
	text-align:center;
	color:#00ff00;
	background:transparent;
	border:1px solid white;
	padding:5px;
	font-weight:bold;
	font-size:20px;
}

aside .arriba #boton:hover {
	color:#000;
}

aside .abajo {
	display:flex;
	justify-content:center;
	flex-direction:column;

	padding:10px;
	border-top:1px solid white;
	border-bottom:1px solid white;
}

aside .abajo h2 {
	color:#00ff00;
	padding-top:10px;
	text-align:left;
	padding-bottom:4px;
	font-size:18px;
}

aside .abajo .enlaces li {
	color:#000;
	text-align:left;

    margin:2px;
	padding:2px;
    list-style:none;
}

aside .abajo .enlaces .cache {
	color:#00ff00;
}


aside .abajo .enlaces li a {
	color:rgba(255,255,255,1);
	text-decoration:none;
    list-style:none;
    font-family:NimbusMonoBold;
    
}

aside .abajo .enlaces li a:hover {
	color:#000;
    list-style:none;

}

/* FOOTER */

footer {
	border-top:5px solid #00ff00;
	width:100%;
	padding:20px;

	text-align:center;
}

footer a {
	color:rgba(255,255,255,1);
	font-size:25px;
	-webkit-font-family:NimbusMonoBold;
	-moz-font-family:NimbusMonoBold;
	font-family:NimbusMonoBold;
}

/* MEDIA QUERY'S */

@media (max-width:1000px) {
	.contenedor {
        text-align:left;
		flex-direction:column;
	}
	header {
		flex-direction:column;
		padding:5px;
		width:100%;
		text-align:center;
	}
	.titulo {
        text-align:center;
		margin-bottom:5px;
	}
	section .cabecera {
		flex-direction:column;
	}
	section .cabecera .meta {
		margin-top:5px;
		padding-top:5px;
	}
	aside {
		border-top:5px solid #00ff00;
    	border:0;
	}

}

/*  ----  */

/*  -- COLORES HOVER--  */

.white:hover {
	text-decoration:none;
	color:#000;
	text-shadow:0 0 5px white,0 0 5px white,
	0 0 5px white,0 0 5px white;
}

.red:hover {
	text-decoration:none;
	color:#000;
	text-shadow:0 0 5px #ff3333,0 0 5px #ff3333,
	0 0 5px #ff3333,0 0 5px #ff3333;
}

.yellow:hover {
	text-decoration:none;
	color:#000;
	text-shadow:0 0 5px #d5b60a,0 0 5px #d5b60a,
	0 0 5px #d5b60a,0 0 5px #d5b60a;
}

.blue:hover {
	text-decoration:none;
	color:#000;
	text-shadow:0 0 5px #3385ff,0 0 5px #3385ff,
	0 0 5px #3385ff,0 0 5px #3385ff;
}

.green:hover {
	text-decoration:none;
	color:#000;
	text-shadow:0 0 5px #00ff00,0 0 5px #00ff00,
	0 0 5px #00ff00,0 0 5px #00ff00;
}

/*  -- COLORES NATURALES--  */

.wwhite {
	text-decoration:none;
	color:#000;
	text-shadow:0 0 5px white,0 0 5px white,
	0 0 5px white,0 0 5px white;
}

.rred {
	text-decoration:none;
	color:#000;
	text-shadow:0 0 5px #ff3333,0 0 5px #ff3333,
	0 0 5px #ff3333,0 0 5px #ff3333;
}

.yyellow {
	text-decoration:none;
	color:#000;
	text-shadow:0 0 5px #d5b60a,0 0 5px #d5b60a,
	0 0 5px #d5b60a,0 0 5px #d5b60a;
}

.bblue {
	text-decoration:none;
	color:#000;
	text-shadow:0 0 5px #3385ff,0 0 5px #3385ff,
	0 0 5px #3385ff,0 0 5px #3385ff;
}

.ggreen {
	text-decoration:none;
	color:#000;
	text-shadow:0 0 5px #00ff00,0 0 5px #00ff00,
	0 0 5px #00ff00,0 0 5px #00ff00;
}


.nobold {
    font-family:NimbusMono;
}

.bold {
    font-family:NimbusMonoBold;
}