* {margin: 0; padding:0;}


/* ESTILOS GENERALES */

body {
	background-image: url("graficos/homebg.png");
	width: 100%;
	height: 100%;
	font-family: Tahoma, sans-serif;
}

body.main {
	background-image: url("graficos/mainbg.png");
}

body.media {
	background-image: url("graficos/mediabg.png");
}

body.code {
	background-image: url("graficos/codebg.png");
}

body.projects {
	background-image: url("graficos/projectsbg.png");
}

/* FUENTES */

@font-face {
	src: url("Supersonic Rocketship.ttf");
	font-family: supersonic;
}

h1, h2, h3, h4, #pestanas li {
	font-family: supersonic, Tahoma, sans-serif;
	font-weight: normal;
}

p {
	margin-bottom: 0.5em;
}

a {
	color: #28423b;
}

a:hover {
	color: #86dbc4;
}

a:active {
	color: #e3b76d;
}

cite {
	display: block;
	text-align: center;
}

#copyright {
	font-style: italic;
}

/* ESTILOS MENÚ */

#menu {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	z-index: 70;
	padding-right: 2em;
}

#mascota {
	width: 5em;
	height: 5em;
	margin-left: 1em;
	cursor: pointer;
	position: relative;
	background-size: contain;
	background-repeat: no-repeat;
	
	animation-name: mascota;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.home #mascota {
	background-image: url('graficos/webmascothome.png');
}

.main #mascota {
	background-image: url('graficos/webmascotmain.png');
}

.media #mascota {
	background-image: url('graficos/webmascotmedia.png');
}

.code #mascota {
	background-image: url('graficos/webmascotcode.png');
}

.projects #mascota {
	background-image: url('graficos/webmascotprojects.png');
}

#pestanas {
	height: 7em;
	list-style-type: none;
	transform: rotate(-90deg);
	margin-right: 2em;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#pestanas li {
	width: 6em;
	padding: 0.2em;
	margin-bottom: 0.3em;
	text-align: center;
	position: relative;
	right: 0.8em;
	border: solid black;
	border-color: black;
}

#pestanas li:hover, .main #mainblog, .media #mediablog, .code #codeblog, .projects #projectsblog {
	right: 0.4em;
	box-shadow: 1px 1px 5px black;
}

#pestanas li a, .tarjeta h3 a, #botonsellos a {
	text-decoration: none;
	color: black;
}

#pestanas li a:hover, .tarjeta h3 a:hover, #botonsellos a:hover {
	color: white;
}

#pestanas li a:active, .tarjeta h3 a:active, #botonsellos a:active {
	color: #6f5643;
}

#mainblog {
	background-color: #d2a24c;
	
	/* Borde comic 1 */
	border-width: 3px 4px 3px 5px;
	border-radius:95% 4% 92% 5%/4% 95% 6% 95%;
	transform: rotate(2deg);
}

#mediablog {
	background-color: #cc6b49;
	
	/* Borde comic 2 */
	border-width: 3px 3px 5px 5px;
	border-radius:4% 95% 6% 95%/95% 4% 92% 5%;
	transform: rotate(-2deg);
}

#codeblog {
	background-color: #73bda8;
	
	/* Borde comic 3 */
	border-width: 5px 3px 3px 5px;
	border-radius:95% 4% 97% 5%/4% 94% 3% 95%;
	transform: rotate(2deg);
}

#projectsblog {
	background-color: #e3b76d;
	
	/* Borde comic 1 */
	border-width: 3px 4px 3px 5px;
	border-radius:95% 4% 92% 5%/4% 95% 6% 95%;
	transform: rotate(2deg);
}

/* ESTILOS DE PÁGINA */

#pagina {
	width: 100%;
}

/* CABECERO */

#cabecero {
	background-color: #6f5643;
	color: black;
	background-image: url("graficos/piel.jpg");
	padding: 0.5em;
	border: 3px solid black;
	position: relative;
	z-index: 90;
	width: 100%;
}

#cabecero h1 {
	text-align: center;
	color: #d2a24c;
}

/* CONTENIDO */

#contenido {
	background-image: url("graficos/papel.png");
	background-size: contain;
	width: 90%;
	margin: auto;
	padding: 1em;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#contenido li {
	margin-left: 1em;
}

#contenido div {
	margin-bottom: 1em;
}

#contenido>p {
	width: inherit;
	padding-right: 1em;
	padding-left: 1em;
}

#presentacion {
	padding: 2em;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	max-width: 100%;
}

#presentacion h2 {
	text-align: center;
}

#presentacion p {
	text-align: center;
	padding-right: 2em;
	padding-left: 2em;
}

#presentacion img {
	max-width: 90%;
}

#guestbook:hover {
	animation-name: boton;
	animation-duration: 0.5s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
}

#afiliado {
	display: flex;
	justify-content: center;
	align-items: center;
}

textarea {
	resize: none;
	margin: 0.5em;
	background-color: transparent;
	scrollbar-width: none;
}

#wordoftheday {
	background-color: #cc6b49;
	padding: 0.6em;
	max-width: 90%;
	border: solid black;
	border-color: black;
	
	/* Borde comic 1 */
	border-width: 3px 4px 3px 5px;
	border-radius:95% 4% 92% 5%/4% 95% 6% 95%;
	transform: rotate(2deg);
}

#wordoftheday p, #wordoftheday h3 {
	text-align: center;
}

span.palabra {
	font-size: 2em;
	font-family: supersonic, Tahoma, sans-serif;
}

#artoftheday {
	background-color: #e3b76d;
	padding: 0.6em;
	max-width: 100%;
	border: solid black;
	border-color: black;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
	/* Borde comic 2 */
	border-width: 3px 3px 5px 5px;
	border-radius:4% 95% 6% 95%/95% 4% 92% 5%;
	transform: rotate(-2deg);
}

#artoftheday h3 {
	text-align: center;
}

#artoftheday img {
	margin: 0.5em;
	border: 3px solid black;
	max-width: 90%;
}

#links {
	background-color: #73bda8;
	padding: 0.6em;
	max-width: 90%;

	border: solid black;
	border-color: black;
	
	/* Borde comic 3 */
	border-width: 5px 3px 3px 5px;
	border-radius:95% 4% 97% 5%/4% 94% 3% 95%;
	transform: rotate(2deg);
}

#botonsellos {
	text-align: center;
	width: 70%;
	max-width:90%;
	margin-top: 2em;
	margin-bottom: 2em;
	margin:auto;
	padding: 0.6em;
	background-color: #cc6b49;
	/* Borde comic 2 */
	border: solid black;
	border-width: 3px 3px 5px 5px;
	border-radius:4% 95% 6% 95%/95% 4% 92% 5%;
	
	animation-name: boton;
	animation-duration: 0.5s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	
}

/* ANIMACIONES */

/* Animación de botón */
@keyframes boton {
	from {
			transform: rotate(2deg);
		}
	50% {
			transform: rotate(-2deg);
		}
	to {
			transform: rotate(2deg);
		}
}

/* Animación de mascota */
@keyframes mascota {
	from {
			top: 0;
		}
	50% {
			top: 5px;
		}
	to {
			top: 0;
		}
	}

/* TARJETAS */

.borde1 {
	border: solid black;
	/* Borde comic 1 */
	border-width: 3px 4px 3px 5px;
	border-radius:95% 4% 92% 5%/4% 95% 6% 95%;
	transform: rotate(1deg);
}

.borde2 {
	border: solid black;
	/* Borde comic 2 */
	border-width: 3px 3px 5px 5px;
	border-radius:4% 95% 6% 95%/95% 4% 92% 5%;
	transform: rotate(-1deg);
}

.borde3 {
	border: solid black;
	/* Borde comic 3 */
	border-width: 5px 3px 3px 5px;
	border-radius:95% 4% 97% 5%/4% 94% 3% 95%;
	transform: rotate(1deg);
}

.tarjeta {
	margin-top: 2em;
	width: 80%;
	max-width: 90%;
	height: 7em;
	transition: transform 0.2s ease-in-out;
}

.tarjeta:hover, .proyecto:hover {
	transform: rotate(0deg);
	transition: transform 0.2s;
}

.tarjeta h3 {
	border: 3px solid black;
	width: 20em;
	max-width: 90%;
	text-align: center;
	overflow: hidden;
	position: relative;
	bottom: 13px;
	left: 5px;
}

.tarjeta article {
	padding-bottom: 1em;
	display: flex;
	justify-content: space-between;
}

.tarjeta article p {
	padding-left: 1em;
	height: 3.5em;
	max-height: 5em; 
	overflow: scroll;
	scrollbar-width: none;
}

.tarjeta article img {
	max-width: 60px;
	position: relative;
	top: 16px;
}

.main #contenido .tarjeta, #contenido .tarjeta.main {
	background-color: #ffcd73;
}

.main #contenido .tarjeta h3, #contenido .tarjeta.main h3 {
	background-color: #d2a24c;
}

.media #contenido .tarjeta, #contenido .tarjeta.media {
	background-color: #ff9b78;
}

.media #contenido .tarjeta h3, #contenido .tarjeta.media h3 {
	background-color: #cc6b49;
}

.code #contenido .tarjeta, #contenido .tarjeta.code {
	background-color: #baffeb;
}

.code #contenido .tarjeta h3, #contenido .tarjeta.code h3 {
	background-color: #73bda8;
}

.projects #contenido .tarjeta, #contenido .tarjeta.projects {
	background-color: #ffdda3;
}

.projects #contenido .tarjeta h3, #contenido .tarjeta.projects h3 {
	background-color: #e3b76d;
}

/* CAJAS DE PROYECTOS */

#escaparate {
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 100%;
}

.proyecto {
	background-color: #e3b76d;
	padding: 0.6em;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.proyecto h3, .proyecto p {
	text-align: center;
}

.proyecto img {
	max-width: 90%;
}

/* ENTRADAS/POSTS */

.post article {
	width: inherit;
	padding: 1em;
}

.post img {
	max-width: 90%;
	float: right;
}

span.fecha {
	font-size: small;
	font-style: italic;
}

#notas {
	width: 80%;
	padding: 0.6em;
}

.main #notas {
	background-color: #d2a24c;
}

.media #notas {
	background-color: #cc6b49;
}

.code #notas {
	background-color: #73bda8;
}

.projects #notas {
	background-color: #e3b76d;
}

#botonspoiler {
	cursor: pointer;
	padding: 0.6em;
	margin: 0.5em;
	background-color: #cc6b49;
	font-weight: bold;
}

#botonspoiler:hover {
	color: white;
	background-color: #ff9b78;
}

#botonspoiler:active {
	background-color: #cc6b49;
}

.oculto {
	visibility: hidden;
}

.revelado {
	visibility: visible;
}

/* PIE */

#pie {
	background-color: #6f5643;
	background-image: url("graficos/piel.jpg");
	padding: 0.5em;
	position: relative;
	z-index: 90;
	width: 100%;
	border: 3px solid black;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#pie p {
	text-align: center;
	color: #e3b76d;
}

#pie h3 {
	color: #d2a24c;
	text-align: center;
}

#pie a {
	position: relative;
}

#pie a:hover {
	bottom: 2px;
}

#pie a:active {
	top: 2px;
}

.post #pie img {
	float: none;
}

/* BOTÓN TOP */

#botontop {
	display: block;
	position: fixed;
	z-index: 100;
	width: 3em;
	height: 3em;
	border-radius: 50%;
	text-align: center;
	font-size: 2em;
	font-weight: bold;
	background: none;
	color: inherit;
	border: 2px solid black;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
	background-color: #d2a24c;
}

#botontop:active {
	background-color: #e3b76d;
}

/* =================================================================================================== */

/* VERSIÓN TABLET */

@media (min-width:768px) {
	
	/* ESTILOS DE PÁGINA */
	
	#cabecero h1 {
		color: black;
		background-image: url("graficos/webtitle.png");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}

	#contenido {
		background-size: contain;
	}
	
}


/* =================================================================================================== */

/* VERSIÓN ESCRITORIO */

@media (min-width:1024px) {
	
	/* ESTILOS GENERALES */
	
	body {
		display: flex;
	}
	
	/* ESTILOS MENÚ */
	
	#menu {
	padding-right: 0;
	flex-direction: column;
	position: fixed;
	height: 60%;
	}
	
	#mascota {
	margin-left: 0;
	margin-top: 5em;
	}
	
	#pestanas {
	transform: none;
	margin-right: 0;
	}
	
	/* ESTILOS DE PÁGINA */
	
	#cabecero {
		position: fixed;
	}
	
	#contenido {
		margin-top: 4.4em;
		background-size: cover;
	}
	
	.home #contenido {
		flex-direction: row;
		justify-content: space-around;
	}
	
	#contenido div {
		width: 80%;
	}
	
	#notas {
		width: 50%;
	}

	#escaparate {
		flex-direction: row;
		justify-content: space-around;
		max-width: 100%;
	}
	
	#pie {
		flex-direction: row;
		justify-content: space-around;
	}
	
	/* BOTÓN TOP */
	
	#botontop {
		display: none;
	}

}