/* Css general | Solo para uso interno | No copieis mi código ;D */

/* CSS Reset */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
}
input,
textarea,
button,
select,
a,
img,
div,
span,
li {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* Load Roboto font family */
@font-face {
	font-family: 'Roboto';
	src: url(/font/roboto-v18-latin_latin-ext-regular.woff2) format('woff2');
	font-display: swap;
}
@font-face {
	font-family: 'Roboto Mono';
	src: url(/font/RobotoMono-Regular.woff2) format('woff2');
	font-display: swap;
}

/* General elements */
html, body {
	min-height: 100%;
	min-width: 100%;
	background-color: #Fdfdfd;
	font-family: 'Roboto', sans-serif;
}
a {
	cursor: pointer;
	text-decoration: none;
}
::selection {
	background: #ffea00;
}

/* Website header */
header {
	position: relative;
	display: block;
	width: 100%;
	height: 120px;
	user-select: none; -webkit-user-select: none;
	background: #fff;
	box-shadow: 0 0 16px rgba(0,0,0,.24);
}
header > div {
	position: relative;
	display: block;
	width: calc(100% - 32px);
	height: 72px;
	max-width: 1248px;
	margin: 0 auto;
	padding: 24px 16px;
}
header > div > a.avatar {
	position: relative;
	display: inline-block;
    width: 72px;
    height: 72px;
	margin: 0 16px 0 0;
	background-color: #000000;
	animation: bcolor-animation infinite 60s; -webkit-animation: -bcolor-animation infinite 60s;
	border-radius: 64px;
}
header > div > a.avatar > img {
	position: relative;
	display: block;
	width: 72px;
	height: 72px;
}
header > div > div.headerTitle {
	position: relative;
	display: inline-block;
	height: 72px;
	vertical-align: top;
}
header > div > div.headerTitle > div {
	display: flex;
	height: 36px;
	align-items: center;
}
header > div > div.headerTitle > div > h1 > a,
header > div > div.headerTitle > div > span > a {
	font-size: 32px;
	font-weight: 300;
	letter-spacing: 1px;
	color: #000;
	animation: color-animation infinite 60s; -webkit-animation: -color-animation infinite 60s;
}
header > div > div.headerTitle > div > h1 > a:active,
header > div > div.headerTitle > div > h1 > a:focus,
header > div > div.headerTitle > div > span > a:active,
header > div > div.headerTitle > div > span > a:focus {
	color: #000;
}
header > div > div.headerTitle > div > h2,
header > div > div.headerTitle > div > p {
	font-size: 16px;
	font-weight: 300;
	color: #666;
}
header > div > nav#desktopNav {
	position: relative;
	display: block;
	float: right;
	height: 24px;
	padding: 26px 0;
}
header > div > nav#desktopNav > a {
	font-size: 24px;
	margin-left: 24px;
	text-align: right;
	font-weight: 300;
	letter-spacing: 1px;
	color: #000;
}
header > div > nav#desktopNav > a:hover {
	text-decoration: underline;
}
header > div > button.hamburger {
	position: relative;
	display: block;
	float: right;
	padding: 14px 0;
	visibility: hidden;
	outline: unset;
	user-select: none; -webkit-user-select: none;
}
header > nav {
	background-color: #161616;
	animation: bcolor-animation infinite 60s; -webkit-animation: -bcolor-animation infinite 60s;
	height: 0;
	position: absolute;
	top: 118px;
	left: 0;
	width: 100%;
	overflow: hidden;
	transition: all 400ms;
	z-index: 1000;
}
header > nav.open {
	height: 96px;
}
header > nav > ul {
	text-align: center;
	display: block;
	user-select: none;
	list-style: none;
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap;
}
header > nav > ul > li {
	display: inline-block;
	width: auto;
	padding: 20px 16px 0 16px;
	text-align: center;
	cursor: pointer;
}
header > nav > ul > li > a {
	text-decoration: none;
}
header > nav > ul > li > a > svg {
	width: 32px;
	height: 32px;
	display: inline-block;
	fill: #ffffff;
}
header > nav > ul > li > a > span {
	display: block;
	line-height: 32px;
	font-size: 16px;
	color: #ffffff;
}
header > nav > ul > li:hover>a>svg {
	fill: #000000;
}
header > nav > ul > li:hover > a > span {
	color: #000000;
}

@media screen and (max-width:800px){
	header {
		height: 72px;
	}
	header > div {
		height: 56px;
		padding: 8px 16px;
	}
	header > div > a.avatar {
		width: 56px;
		height: 56px;
	}
	header > div > a.avatar > img {
		width: 56px;
		height: 56px;
	}
	header > div > div.headerTitle {
		height: 56px;
	}
	header > div > div.headerTitle > div {
		height: 28px;
	}
	header > div > div.headerTitle > div > h1 > a,
	header > div > div.headerTitle > div > span > a {
		font-size: 24px;
	}
	header > div > div.headerTitle > div > h2,
	header > div > div.headerTitle > div > p {
		font-size: 14px;
	}
	header > div > nav#desktopNav {
		display: none;
	}
	header > div > button.hamburger {
		visibility: visible;
	}
	header > nav {
		top: 71px;
	}
}

/* Website footer */
footer {
	position: relative;
	width: 100%;
	height: 96px;
	background: #010101;
	user-select: none; -webkit-user-select: none;
}
footer > div {
	position: relative;
	display: block;
	width: calc(100% - 32px);
	height: 48px;
	max-width: 1248px;
	margin: 0 auto;
	padding: 24px 16px;
}
footer > div > div.social {
	position: relative;
	display: inline-block;
	height: 48px;
}
footer > div > div.social > a { 
	position: relative;
	display: inline-block;
	width: 48px;
	height: 48px;
	margin-right: 24px;
}
footer > div > div.social > a:last-child {
	margin-right: 0;
}
footer > div > div.social > a > svg {  
	position: relative;
	display: block;
	width: 48px;
	height: 48px;
	fill: currentColor;
	animation: fill-animation infinite 60s; -webkit-animation: -fill-animation infinite 60s;
}
footer > div > div.copyright {
	position: relative;
	display: block;
	float: right;
	height: 48px;
}
footer > div > div.copyright > p {
	font-size: 16px;
	color: #fff;
	padding: 16px 0;
}

div.container {
	max-width: 1248px;
	padding: 0 16px;
	width: calc(100% - 32px);
	margin: 0 auto;
}
p > a {
	font-size: 16px;
}
h1 > a:visited {
	color: rgb(0,0,0);
}

/* Google captcha hidden */
.grecaptcha-badge { 
    visibility: hidden;
}

/* Main website */
main {
	width: 100%;
	min-height: calc(100% - 210px);
}
main .container{
	padding: 48px 16px 24px 16px;
}
main article:not(:first-child) {
	padding: 24px 0;
}
main article:first-child {
	padding-bottom: 24px;
}
main article:last-child {
	border: none;
}
main article {
	border-bottom: 1px solid #d6d6d6;
	display: block;
}
main h1, main h2, main > div.container > h3, main h4{
	margin: 0 0 24px 0;
	padding: 0;
	color: rgb(0,0,0);
}
main h1 {
	font-size: 40px;
}
main h2 {
	font-size: 32px;
}
main > div.container > h3 {
	font-size: 24px;
}
main h4 {
	font-size: 16px;
}
main p {
	font-size: 16px;
	margin: 0 0 24px 0;
	text-align: left;
	color: rgb(0,0,0);
	line-height: 24px;
}
main div.container ul {
	font-size: 16px;
	margin: 0 0 24px 0;
	text-align: justify;
	color: rgb(0,0,0);
	padding: 0 0 0 16px;
}
main div.container li {
	margin: 0 0 8px 0;
	line-height: 24px;
}
main p > a {
	color: #000000;
	animation: color-animation infinite 60s;
	-webkit-animation: -color-animation infinite 60s;
}
main a:hover{
	text-decoration: underline;
}
main > div.container > img,
main > div.container > svg {
	width: 100%;
	height: auto;
	margin: 0 0 24px 0;
}
main h2 a, main h2 {
	padding: 0;
	font-weight: 700;
	font-size: 32px;
	color: rgb(0,0,0);
}
main h2 a:hover, article h3 a:hover {
	color: #000000;
}

main table {
	border: 2px solid #000; /* agrega un borde de 2px a toda la tabla */
	width: 100%; /* hace que la tabla ocupe todo el ancho disponible */
	border-collapse: collapse; /* elimina los bordes entre celdas */
	margin: 0 0 24px 0;
	animation: border-animation infinite 60s;
	-webkit-animation: -border-animation infinite 60s;
}
main table td {
	border: 1px solid #000; /* agrega un borde de 1px a las celdas */
	padding: 8px; /* agrega espacio dentro de las celdas */
	animation: border-animation infinite 60s;
	-webkit-animation: -border-animation infinite 60s;
  }
  
main table th {
	border: 2px solid #000; /* agrega un borde de 1px a las celdas */
	text-align: center; /* alinea el texto en el centro de las celdas */
	padding: 8px; /* agrega espacio dentro de las celdas */
	animation: border-animation infinite 60s;
	-webkit-animation: -border-animation infinite 60s;
}

/* Hovers with colors transformations */
/* a#mywebsite::after{
	content: "MyWebsite";
}
a#contactForm::after {
	content: "Building a contact form with AWS API Gateway, Lambda, and SNS";
} */
main h2 a,
main h3 a {
	position: relative;
	z-index: 1;
}
main h2 a:hover,
main h3 a:hover {
	text-decoration: underline;
}
/* main h2 a::after,
main h3 a::after {
	position: absolute;
	transform: translate(-100%, 0);
	z-index: -1;
	color: #000000;
	animation: color-animation infinite 60s;
	-webkit-animation: -color-animation infinite 60s;
	white-space: normal;
} */

/* Main Home page */
article > p{
	margin: 24px 0;
	font-size: 16px;
	text-align: left;
}
article > a{
	font-size: 16px;
	color: #000000;
	animation: color-animation infinite 60s;
	-webkit-animation: -color-animation infinite 60s;
}
article > span {
	font-size: 16px;
	color: #666;
	float: right;
}

/* Main especific post */
main div.index {
	position: absolute;
	left: calc(50% + 648px);
	top: 177px;
}
main div.index.onMove {
	position: fixed;
	top: 34px;
}
main div.index.dis {
	display: none;
}
main div.index a {
	color: #000;
}
main div.index > ul {
	border-left: 1px solid #d6d6d6;
}
main div.index ul {
	list-style: none;
	
	padding-left: 16px;
}
main div.index > ul li{
	line-height: 1.7;
}

b {
	font-size: 16px;
}

/* Footer Page */

/* CSS for small devices */
@media screen and (max-width: 800px) {
	
	
	/* Main */
	main {
		min-height: calc(100% - 164px);
	}
	main .container {
		padding-top: 16px;
		padding-bottom: 16px; 
	}
	main h1, 
	main h2, 
	main h3, 
	main p, 
	main > div.container > img,
	main > div.container > svg {
		margin-bottom: 16px;
	}
	main table {
		font-size: 12px;
	}
	/* Footer */
	div.footer {
		text-align: center;
	}
	footer > div > div.social {
		float: none;
		display: flex;
		justify-content: center;
		margin: 0 auto;
	}
	footer > div > div.copyright {
		display: none;
	}
	div.creditos {
		display: none;
	}

	main > div.container > article > h3 {
		line-height: 24px!important;
		font-size: 20px!important;
	}
}
@media screen and (max-width: 1736px) {
	main div.index {
		display: none;
	}
}

/* ABOUT */
div.skills {
	display: block;
	margin: 24px 0 0 0;
}

div.skills span {
	display: inline-block;
	border-radius: 8px;
	padding: 16px;
	font-size: 24px;
	background-color: #000000;
	color: #fff;
	margin-right: 24px;
	margin-bottom: 24px;
	animation: bcolor-animation infinite 60s;
	-webkit-animation: -bcolor-animation infinite 60s;
}

img.budges {
	width: 152px;
	height: 152px;
}

@media screen and (max-width: 640px) {
	div.skills span {
		display: inline-block;
		padding: 8px;
		font-size: 16px;
		background-color: #000000;
		color: #fff;
		margin-right: 16px;
		margin-bottom: 16px;
	}

	img.budges {
		width: 80px;
		height: 80px;
	}
}
/* Animaciones */

.shake-horizontal {
	-webkit-animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

@-webkit-keyframes shake-horizontal {
	0%,
	100% {
	  -webkit-transform: translateX(0);
			  transform: translateX(0);
	}
	10%,
	30%,
	50%,
	70% {
	  -webkit-transform: translateX(-10px);
			  transform: translateX(-10px);
	}
	20%,
	40%,
	60% {
	  -webkit-transform: translateX(10px);
			  transform: translateX(10px);
	}
	80% {
	  -webkit-transform: translateX(8px);
			  transform: translateX(8px);
	}
	90% {
	  -webkit-transform: translateX(-8px);
			  transform: translateX(-8px);
	}
  }
  @keyframes shake-horizontal {
	0%,
	100% {
	  -webkit-transform: translateX(0);
			  transform: translateX(0);
	}
	10%,
	30%,
	50%,
	70% {
	  -webkit-transform: translateX(-10px);
			  transform: translateX(-10px);
	}
	20%,
	40%,
	60% {
	  -webkit-transform: translateX(10px);
			  transform: translateX(10px);
	}
	80% {
	  -webkit-transform: translateX(8px);
			  transform: translateX(8px);
	}
	90% {
	  -webkit-transform: translateX(-8px);
			  transform: translateX(-8px);
	}
  }
  
  /* Hamburgers made by Jonathan Suh @jonsuh website: https://jonsuh.com/hamburgers */
.hamburger {
    padding: 15px 15px;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
}
.hamburger:hover {
    opacity: 0.7;
}
.hamburger.is-active:hover {
    opacity: 0.7;
}
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after {
    background-color: #000;
    animation: bcolor-animation infinite 60s;
}
.hamburger-box {
    width: 40px;
    height: 24px;
    display: inline-block;
    position: relative;
}
.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 40px;
    height: 4px;
    background-color: #000;
    animation: bcolor-animation infinite 60s;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}
.hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block;
}
.hamburger-inner::before {
    top: -10px;
}
.hamburger-inner::after {
    bottom: -10px;
}
.hamburger--spin .hamburger-inner {
    transition-duration: 0.22s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spin .hamburger-inner::before {
    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}
.hamburger--spin .hamburger-inner::after {
    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spin.is-active .hamburger-inner {
    transform: rotate(225deg);
    transition-delay: 0.12s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--spin.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}
.hamburger--spin.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}


/* Title sections */
main > div.container > article > h3 {
	padding: 0;
	font-weight: 600;
	line-height: 40px;
	font-size: 32px;
	color: rgb(0,0,0);
}

main > div.container > article > h3 > a {
	color: rgb(0,0,0);
}

pre code.hljs {
	font-family: 'Roboto Mono', monospace!important;
}


::view-transition-old(root) {
	animation: 10s transition-out 0s ease;
}

::view-transition-new(root) {
	animation: 10s transition-in 0s ease;
}

@keyframes transition-out {
	from {
		opacity: 1;
		translate: 0;
		rotate: 0;
	}
	to {
		opacity: 0;
		translate: -3rem -5rem;
		rotate: -10deg;
	}
}

@keyframes transition-in {
	from {
		opacity: 0;
		translate: 3rem 5rem;
		rotate: -10deg;
	}
	to {
		opacity: 1;
		translate: 0;
		rotate: 0;
	}
}

/* Animate on scroll */
main div.container > h1, main div.container > h2, main div.container > h3, main div.container > h4, main div.container > h5, main div.container > p, main div.container > ul, main div.container > ol, main div.container > img, main div.container > svg, main div.container > table, main div.container > div.code, article {
	animation: fadeInUp linear both;
	-webkit-animation: fadeInUp linear both;
	animation-timeline: view();
	-webkit-animation-timeline: view();
	animation-range: entry 20% cover 20%;
	-webkit-animation-range: entry 40% cover 20%;
}
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translate3d(0, 50px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
} 

/* Testing Blob */
/* #blob {
	background-color: white;
	background: linear-gradient(
		to right,
		aquamarine,
		mediumpurple
	);
	animation: rotate 20s infinite;
	height: 500px;
	aspect-ratio: 1;
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	border-radius: 50%;
	filter: blur(200px);
}

@keyframes rotate {
	from {
		rotate: 0;
	}
	50% {
		scale: 1 1.5;
	}
	to {
		rotate: 360deg;
	}
} */

div.player {
	height: 32px;
	display: block;
	margin: 0 0 24px 0;
}

div.player > svg {
	margin: 0 16px 0 0;
}

div.player > audio {
	max-width: 420px;
	width: calc(100% - 52px);
	height: 32px;
}

.coffe__svg {
	height: 32px !important;
	margin-bottom: 0px !important;
	box-shadow: none !important;
	border: none !important;
	vertical-align: middle !important;
	transform: scale(0.9);
	flex-shrink: 0;
}

.coffe__a {
	min-width: 210px;
	color: #ffffff;
	background-color: #FFDD00;
	-webkit-animation: -bcolor-animation infinite 60s;
	animation: bcolor-animation infinite 60s;
	height: 60px;
	border-radius: 12px;
	font-size: 28px;
	font-weight: Normal;
	border: none;
	padding: 0px 24px;
	line-height: 27px;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center;
	font-family: 'Cookie', cursive !important;
	-webkit-box-sizing: border-box !important;
	box-sizing: border-box !important;
}

.coffe__a:hover, .coffe__a:active, .coffe__a:focus {
	text-decoration: none !important;
	cursor: pointer;
}

.coffe__span {
   margin-left: 8px;
   display: inline-block;
   line-height: 0;
   width: 100%;
   flex-shrink: 0;
}

.coffe__logo,
.coffe__outline {
	fill: #ffffff;
}