/* Typography: we need JetBrains Mono Regular and Extra-Bold for the content of the site */

/* 400 Regular */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('JetBrains Mono Regular'), local('JetBrainsMono-Regular'), local('JetBrains Mono'),
       url(https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 800 Extra-Bold */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local('JetBrains Mono ExtraBold'), local('JetBrainsMono-ExtraBold'),
       url(https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Paleta Gruvbox con variables CSS */
:root {
	/* Gruvbox Dark */
	--gb-bg: #282828;
	--gb-bg-soft: #1d2021;
	--gb-fg: #ebdbb2;
	--gb-muted: #928374;
	--gb-red: #fb4934;
	--gb-green: #b8bb26;
	--gb-yellow: #fabd2f;
	--gb-blue: #83a598;
	--gb-purple: #d3869b;
	--gb-aqua: #8ec07c;
	--gb-orange: #fe8019;
}

/* Preferencias de esquema claro automáticamente */
@media (prefers-color-scheme: light) {
	:root {
		/* Gruvbox Light */
		--gb-bg: #fbf1c7;
		--gb-bg-soft: #f2e5bc;
		--gb-fg: #3c3836;
		--gb-muted: #7c6f64;
		--gb-red: #9d0006;
		--gb-green: #79740e;
		--gb-yellow: #b57614;
		--gb-blue: #076678;
		--gb-purple: #8f3f71;
		--gb-aqua: #427b58;
		--gb-orange: #af3a03;
	}
}

/* Estilos base */
html, body {
	min-height: 100dvh;
}

body {
	margin: 0;
	background: var(--gb-bg);
	color: var(--gb-fg);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	padding: 2rem 1.5rem;
}

/* Tipografía */
h1, h2, h3, h4, h5, h6 {
	color: var(--gb-yellow);
	margin: 0 0 0.75rem;
    text-align:center;
}

p { 
	margin: 1rem 0 1rem; 
}

/* Enlaces con colores Gruvbox */
a {
	color: var(--gb-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

a:hover { 
	color: var(--gb-aqua); 
}

a:visited { 
	color: var(--gb-purple); 
}


.tmp-welcome-cards {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    align-items: stretch;
    text-align: left;
    max-width: 100%;
    justify-content: center;
}

.card {
	max-width: 62ch;
	background: var(--gb-bg-soft);
	padding: 1.25rem 1rem;
	border-radius: 8px;
}

/* Sección de redes sociales */
.social-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: 1.5rem;
}

.social-container h2 {
	margin: 0 0 0.5rem;
	color: var(--gb-yellow);
	font-size: 1.25rem;
}

.social-container p {
	margin: 0.5rem 0 1rem;
	font-size: 0.875rem;
	color: var(--gb-muted);
}

.social-links {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	align-items: center;
}

.social-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--gb-bg);
	color: var(--gb-fg);
	border: 2px solid var(--gb-blue);
	text-decoration: none;
	transition: all 0.3s ease;
	padding: 0;
}

.social-btn svg {
	width: 1.2rem;
	height: 1.2rem;
	fill: currentColor;
}

.social-btn:hover {
	background: var(--gb-blue);
	color: var(--gb-bg);
	transform: scale(1.1);
	border-color: var(--gb-aqua);
}

.social-btn:visited {
	color: var(--gb-fg);
	border-color: var(--gb-purple);
}

/* Pie de página */
footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--gb-muted);
	text-align: center;
	color: var(--gb-muted);
	font-size: 0.875rem;
}

footer > p {
	margin: 0.5rem 0;
}

figure {
    color: var(--gb-muted);
    font-size: 0.875rem;
    text-align: center;
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

@keyframes panX {
	from {
		background-position-x: 0%;
	}
	to {
		background-position-x: 100%;
	}
}

#title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 4rem;
	font-weight: 800;
	background-color: var(--gb-bg-soft);
	display: block;
	width: max-content;
	margin: 0 auto 1.5rem;
	padding: 0.1em 0.4em;
}

#title-text {
	text-align: center;
	-webkit-text-stroke: 0.5px var(--gb-fg);
	text-stroke: 0.5px var(--gb-fg);

    animation: panX 60s linear infinite;
	animation-direction: alternate;

	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	background-image: url(carina-nebula.webp);
	background-size: auto 120%;
	background-position-y: 50%;
	background-repeat: repeat;
}