:root {
	font-size: min(3vw, 2vh);
	--pads: 16px;
	--bg-color: #18101f; /* Full opacity background */
	--header-color: rgba(221, 221, 221, 0.87); /* #DDDF */
	--text: rgba(221, 221, 221, 0.87); /* #DDDF */
	--text-secondary: rgba(136, 136, 136, 0.93); /* #888F */
	/*--accent-color: rgba(175, 47, 255, 0.18); /* #AF2F */
	--accent-color: #af2f; /* #AF2F */
	/*--secondary-color: rgba(162, 2, 255, 1); /* #A2FF */
	--secondary-color: #a2ff;
	--tarjeta-color: rgba(0, 0, 0, 0.25); /* #0004 */
	--tarjeta-border-color: rgba(0, 0, 0, 0.25); /* #0004 */
	--shadow: rgba(66, 88, 88, 0.34); /* #4258 */
}

body[data-theme="light"] {
	--bg-color: #afc4bd; /* Full opacity background */
	--header-color: #30203f; /* Full opacity header */
	--text: rgba(34, 34, 34, 0.93); /* #222F */
	--text-secondary: rgba(68, 68, 68, 0.93); /* #444F */
	--accent-color: #a2ff;
	--secondary-color: #af2f;
	--tarjeta-color: rgba(238, 238, 238, 0.93); /* #EEEF */
	--tarjeta-border-color: rgba(66, 34, 102, 0.4); /* #4266 */
	--shadow: rgba(96, 0, 132, 0.52); /* #6084 */
}

html {
	box-sizing: border-box;
	max-width: min(80ch, 90vw);
	margin: auto;
	line-height: 1.6;
	font-family: "Voces", sans-serif;
	font-weight: 200;
	font-style: normal;
	color: var(--text);
}

* {
	box-sizing: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "JetBrains Mono", monospace;
	font-weight: 800;
	margin: 0px;
	color: var(--header-color);
}

h1 {
	font-size: 2.2rem;
}
h2 {
	font-size: 1.7rem;
}
h3 {
	font-size: 1.6rem;
}
h4 {
	font-size: 1.4rem;
}
p {
	font-size: 1.2rem;
	margin: 0px;
}

img {
	max-width: 100%;
	height: auto;
}

a,
.link-style {
	font-family: "JetBrains Mono", monospace;
	font-weight: 500;
	font-size: 1rem;
	text-decoration: none;
	color: var(--text-secondary);
	transition: color 0.5s ease;
}
a:hover {
	color: var(--accent-color);
}

.fa,
.fa-solid {
	font-size: 1.2rem;
}

.nav-link {
	text-decoration: underline;
}

body {
	background: var(--bg-color);
	color: var(--text);
	padding: var(--pads);
	display: flex;
	flex-direction: column;
	gap: 8vh;
}

.decorador {
	color: var(--accent-color);
}

nav {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	/*background: #f0ff;*/
}

.nav-links {
	display: flex;
	flex-direction: row;
	gap: 2rem;
}

#logo {
	width: min(20vw, 20vh);
}

header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

main {
	display: flex;
	flex-direction: column;
	gap: calc(var(--pads) * 8);
}

#titulo {
	text-align: center;
}
#subtitulo {
	text-align: center;
}
#direccion {
	text-align: center;
}

.tarjeta {
	padding: calc(var(--pads) * 2);
	border-radius: var(--pads);
	margin: var(--pads) 0px;
	border-width: 2px;
	border-style: solid;
	background: var(--tarjeta-color);
	border-color: var(--tarjeta-border-color);
	box-shadow: 0rem 0rem 0.5rem 0rem var(--shadow);
	transition: box-shadow 0.5s ease;
}

.tarjeta:hover {
	box-shadow: 0rem 0rem 2rem 0rem var(--shadow);
	/*background: color-mix(in hsl, var(--tarjeta-color), var(--tarjeta-border-color) 25%);*/
}

footer {
	display: flex;
	flex-direction: column;
	align-items: center;
}

#footer-addresses {
	display: flex;
	flex-direction: row;
	min-width: 20%;
	padding: var(--pads);
	justify-content: space-evenly;
}

.gap-section {
	display: flex;
	flex-direction: column;
}

.texto-mono {
	font-family: "JetBrains Mono", monospace;
	font-weight: 200;
}

.grid-items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: 1rem;
	padding: 0px;
	list-style: none;
}

.item-tecno,
.item-social {
	text-align: center;
	padding: var(--pads);
	margin: 0px;
}

.tarjeta-proyecto {
	display: grid;
	grid-template-columns: 1fr 3fr;
	grid-template-rows: 1fr 6fr 1fr;
	grid-template-areas:
		"pimg ptitulo"
		"pimg pdesc"
		"pimg plinks";
	gap: var(--pads);
	justify-items: left;
	align-items: start;
	height: 40vh;
}

.ptitulo {
	grid-area: ptitulo;
}
.plinks {
	grid-area: plinks;
}
.pdesc {
	margin: 0px;
	grid-area: pdesc;
}
.img-proyecto {
	grid-area: pimg;
	justify-self: center;
	align-self: center;
	object-fit: cover;
	height: 100%;
	width: 100%;
	max-height: 40vh;
	border-radius: var(--pads);
}

@media screen and (max-width: 768px) {
	nav {
		flex-direction: column;
		align-items: center;
	}

	.tarjeta-proyecto {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		grid-template-areas: "pimg" "ptitulo" "pdesc" "plinks";
		height: auto;
	}
}