@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter.ttf') format('truetype'),
		url('../fonts/Inter.woff2') format('woff2'),
		url('../fonts/Inter.woff') format('woff');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
:root {
	
	--bg-opacity: 1;
	--color-opacity: 1;

	--white: 255,255,255;
	--black: 0,0,0;

	/* Gun powder */
	--base-50:   245, 246, 249;
	--base-100:  233, 234, 240;
	--base-200:  216, 219, 229;
	--base-300:  189, 193, 211;
	--base-400:  157, 163, 189;
	--base-500:  133, 138, 172;
	--base-600:  115, 117, 157;
	--base-700:  103, 103, 142;
	--base-800:  88, 87, 118;
	--base-900:  76, 76, 100;
	--base-950:  47, 47, 60;

	/* Redes sociales */
	--discord: 88,101,242;
	--github: 11,11,11;
	--linkedin: 0,123,182;
	--twitter: 0,0,0;
	--fuente: system-ui, -apple-system, "Segoe UI", "Inter", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--mode-light: url('../images/icons/moon.svg') no-repeat center / cover;
	--mode-dark: url('../images/icons/sun.svg') no-repeat center / cover;
}
[data-color="red-damask"] {
	--base-50:   253, 245, 239;
	--base-100:  251, 232, 217;
	--base-200:  245, 206, 179;
	--base-300:  239, 172, 130;
	--base-400:  231, 129, 80;
	--base-500:  225, 95, 44;
	--base-600:  211, 72, 35;
	--base-700:  175, 55, 31;
	--base-800:  140, 45, 32;
	--base-900:  113, 39, 29;
	--base-950:  61, 18, 13;
}
[data-color="bastille"] {
	--base-50:   248, 244, 249;
	--base-100:  241, 235, 244;
	--base-200:  230, 219, 234;
	--base-300:  215, 197, 220;
	--base-400:  199, 173, 204;
	--base-500:  186, 151, 189;
	--base-600:  169, 129, 170;
	--base-700:  148, 110, 147;
	--base-800:  121, 90, 121;
	--base-900:  97, 77, 98;
	--base-950:  41, 32, 41;
}

*, *::after, *::before {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	outline: transparent;
	border: transparent;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	scroll-behavior: smooth;
}
:host { 
	display: inline-block;
	min-width: 1rem; 
	min-height: 1rem; 
}
@media (prefers-reduced-motion: no-preference) {
	:root {
		scroll-behavior: smooth;
	}
}
html, body {
	width: 100%;
}

html {
	/** 
	 * Foto de Mo Eid
	 * https://www.pexels.com/es-es/foto/ligero-paisaje-hombre-persona-8347501/
	*/
	background: url('../images/man_door.webp') fixed no-repeat center / cover;
}

body {
	--bg-opacity: .8;
	font: normal normal 500 1rem/1.5rem var(--fuente);
	color: rgba(var(--base-50), var(--color-opacity));
	background: rgba(var(--base-950), var(--bg-opacity));
}

svg { 
	width: 100%; 
	height: 100%; 
	fill: currentColor;
}

a {
	color: rgba(var(--primary-600), var(--color-opacity));
	text-decoration: none;
	&, &:hover, &:visited {
		color: rgb(var(--primary-400));
	}
}
h2 {
	font-size: 3rem;
	margin-bottom: 1rem;
	color: rgb(var(--primary-800));
}
p {
	margin-bottom: 1rem;
	font-size: 1.1rem;
}

section {
	width: 80%;
	margin: 0 auto;
}

.bg\:50  {--bg-opacity: 1;background: rgba(var(--base-50), var(--bg-opacity));}
.bg\:100 {--bg-opacity: 1;background: rgba(var(--base-100), var(--bg-opacity));}
.bg\:200 {--bg-opacity: 1;background: rgba(var(--base-200), var(--bg-opacity));}
.bg\:300 {--bg-opacity: 1;background: rgba(var(--base-300), var(--bg-opacity));}
.bg\:400 {--bg-opacity: 1;background: rgba(var(--base-400), var(--bg-opacity));}
.bg\:500 {--bg-opacity: 1;background: rgba(var(--base-500), var(--bg-opacity));}
.bg\:600 {--bg-opacity: 1;background: rgba(var(--base-600), var(--bg-opacity));}
.bg\:700 {--bg-opacity: 1;background: rgba(var(--base-700), var(--bg-opacity));}
.bg\:800 {--bg-opacity: 1;background: rgba(var(--base-800), var(--bg-opacity));}
.bg\:900 {--bg-opacity: 1;background: rgba(var(--base-900), var(--bg-opacity));}
.bg\:950 {--bg-opacity: 1;background: rgba(var(--base-950), var(--bg-opacity));}
.bg-opacity-1{--bg-opacity:.1!important}
.bg-opacity-2{--bg-opacity:.2!important}
.bg-opacity-3{--bg-opacity:.3!important}
.bg-opacity-4{--bg-opacity:.4!important}
.bg-opacity-5{--bg-opacity:.5!important}
.bg-opacity-6{--bg-opacity:.6!important}
.bg-opacity-7{--bg-opacity:.7!important}
.bg-opacity-8{--bg-opacity:.8!important}
.bg-opacity-9{--bg-opacity:.9!important}
.bg-opacity-10{--bg-opacity:1!important}
.color\:50  {--color-opacity: 1;color: rgba(var(--base-50), var(--color-opacity));}
.color\:100 {--color-opacity: 1;color: rgba(var(--base-100), var(--color-opacity));}
.color\:200 {--color-opacity: 1;color: rgba(var(--base-200), var(--color-opacity));}
.color\:300 {--color-opacity: 1;color: rgba(var(--base-300), var(--color-opacity));}
.color\:400 {--color-opacity: 1;color: rgba(var(--base-400), var(--color-opacity));}
.color\:500 {--color-opacity: 1;color: rgba(var(--base-500), var(--color-opacity));}
.color\:600 {--color-opacity: 1;color: rgba(var(--base-600), var(--color-opacity));}
.color\:700 {--color-opacity: 1;color: rgba(var(--base-700), var(--color-opacity));}
.color\:800 {--color-opacity: 1;color: rgba(var(--base-800), var(--color-opacity));}
.color\:900 {--color-opacity: 1;color: rgba(var(--base-900), var(--color-opacity));}
.color\:950 {--color-opacity: 1;color: rgba(var(--base-950), var(--color-opacity));}
.color-opacity-1{--color-opacity:.1!important}
.color-opacity-2{--color-opacity:.2!important}
.color-opacity-3{--color-opacity:.3!important}
.color-opacity-4{--color-opacity:.4!important}
.color-opacity-5{--color-opacity:.5!important}
.color-opacity-6{--color-opacity:.6!important}
.color-opacity-7{--color-opacity:.7!important}
.color-opacity-8{--color-opacity:.8!important}
.color-opacity-9{--color-opacity:.9!important}
.color-opacity-10{--color-opacity:1!important}

.container {
	width: 80%!important;
	margin: 0 auto;
}
.flex { display: flex; }
.none { display: none; }
.grid { display: grid; }
.block { display: block; }

.fixed { position: fixed!important; }
.relative { position: relative!important; }
.absolute { position: absolute!important; }

.content-start{justify-content: flex-start;}
.content-end{justify-content: flex-end;}
.content-center{justify-content: center;}
.items-start{align-items: flex-start;}
.items-end{align-items: flex-end;}
.items-center{align-items: center;}
.column-gap-8{column-gap: .5rem;}
.column-gap-16{column-gap: 1rem;}
.column-gap-24{column-gap: 1.5rem;}
.column-gap-32{column-gap: 2rem;}
.gap-8{gap: .5rem;}
.gap-16{gap: 1rem;}
.gap-24{gap: 1.5rem;}
.gap-32{gap: 2rem;}
.flex-column{flex-direction: column;}
.flex-wrap{flex-wrap: wrap;}
.pe-none{pointer-events: none;}
.rounded{border-radius: .325rem}
.rounded-md{border-radius: .5rem}
.size-16{width: 1rem;height: 1rem;}
.size-24{width: 1.5rem;height: 1.5rem;}
.size-32{width: 2rem;height: 2rem;}
.size-full{width: 100%;height: 100%;}
.width-16{width: 1rem;}
.width-24{width: 1.5rem;}
.width-32{width: 2rem;}
.width-middle{width: 50%;}
.width-full{width: 100%;}
.height-16{height: 1rem;}
.height-24{height: 1.5rem;}
.height-32{height: 2rem;}
.height-full{height: 100%;}

.aspect-ratio-1x1 {aspect-ratio: 1 / 1;}
.text-left{text-align: left;}
.text-center{text-align: center;}
.text-right{text-align: right;}
.back-to-top {
	bottom: 1rem;
	right: 1rem;
	svg-icon {
		pointer-events: none;
	}
}
.backdrop-blur-2{backdrop-filter: blur(2px);}
.backdrop-blur-4{backdrop-filter: blur(4px);}
.backdrop-blur-6{backdrop-filter: blur(6px);}
.backdrop-blur-8{backdrop-filter: blur(8px);}
.backdrop-blur-10{backdrop-filter: blur(10px);}
.backdrop-blur-12{backdrop-filter: blur(12px);}
.shadow{box-shadow: 0 0 .5rem rgba(var(--black), .1);}
.top-1{top: 1rem!important;}
.active {
	--bg-opacity: .5;
	background: rgba(var(--base-600), var(--bg-opacity));
}
.observer {
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.6s ease;
}
.observer.visible {
	opacity: 1;
	transform: none;
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.button {
	appearance: none;
	background-color: rgb(var(--base-900));
	color: rgb(var(--base-50));
	border: none;
	padding: 0.8rem 1.5rem;
	font-size: 1rem;
	border-radius: .325rem;
	cursor: pointer;
	transition: background-color 0.3s;
	&:hover {
		background-color: rgb(var(--base-950));
	}
}
.badge {
	--bg-opacity: .2;
	background: rgba(var(--base-800), var(--bg-opacity));
	border: 1px solid rgba(var(--base-800), 1);
	font-size: .875rem;
	border-radius: .325rem;
	padding: 0.125rem 0.5rem;
}

.navbar {
	position: sticky;
	top: 0;
	left: 0;
	z-index: 999;
	transition: all .4s ease-in-out;
	padding: .5rem 0;
	height: 56px;
	.menu-link {
		padding: .5rem 1rem;
	}
}
header {
	padding: 3rem 0;
	min-height: calc(100dvh - 56px);
	.box {
		h1 {
			font-size: clamp(1.8rem, 2.5vw, 3rem);
			line-height: clamp(1.8rem, 2.5vw, 3rem);
			color: rgba(var(--base-50), 1);
			strong {
				color: rgba(var(--base-300), 1);
			}
		}
		.categories {
			margin: 1rem 0;
			font-size: clamp(1.325rem, 2.5vw, 2rem);
			line-height: clamp(1.325rem, 2.5vw, 2rem);
		}
		small {
			font-weight: 700;
			color: rgba(var(--base-100), 1);
		}
	}
}

.contenedor {
	min-height: 100dvh;
	max-height: 100%;
	width: 90%;
	margin: 0 auto;
}
.contenedor-sobre-mi {
	img {
		object-fit: cover;
	}
	.info-sobre-mi p {
		line-height: 2rem;
	}
}
.section {
	min-height: 100dvh;
	padding: 2rem;
	.head_section {
		text-align: center;
		padding: 2rem 0;
	}
}
.card, .galeria_item {
	--bg-opacity: .5;
	background: rgba(var(--base-950), var(--bg-opacity));
	backdrop-filter: blur(5px);
	padding: 1rem;
	font-weight: 400;
	font-size: 0.875rem;
	.card-title {
		line-height: 2rem;
		font-size: 1.5rem;
		margin-bottom: 1rem;
	}
	.acceder {
		top: 1rem;
		right: 1rem;
	}
}
.galeria_item {
	padding: 0;
	max-width: calc(calc(100% - 3rem) / 3);
	&[onclick] {
		cursor: pointer;
	}
	picture {
		width: 100%;
	}
	.galeria_info {
		padding: 1rem;
	}
}
.grid-columns {
	grid-template-columns: repeat(3, 1fr);
}
form {
	width: 50%;
	margin: 0 auto;
	.form-group {
		width: 100%;
		padding: 0.5rem;
		margin-bottom: 0.5rem;
		input, textarea {
			padding: .875rem 1rem;
			width: 100%;
			border-radius: .5rem;
		}
		textarea {
			min-height: 100px;
		}
	}
}
footer {
	--bg-opacity: .5;
	background: rgba(var(--base-950), var(--bg-opacity));
	padding: 2rem 0;
	flex-direction: column;
	.footer_socials {
		margin: 1rem 0;
		.social {
			padding-top: 0.325rem;
			&.linkedin {
				color: rgb(var(--linkedin));
				background: rgba(var(--linkedin), .1);
				&:hover {
					color: rgb(var(--white));
					background: rgba(var(--linkedin), 1);
				}
			}
			&.twitter {
				color: rgb(var(--twitter));
				background: rgba(var(--twitter), .1);
				&:hover {
					color: rgb(var(--white));
					background: rgba(var(--twitter), 1);
				}
			}
			&.discord {
				color: rgb(var(--discord));
				background: rgba(var(--discord), .1);
				&:hover {
					color: rgb(var(--white));
					background: rgba(var(--discord), 1);
				}
			}
			&.github {
				color: rgb(var(--github));
				background: rgba(var(--github), .1);
				&:hover {
					color: rgb(var(--white));
					background: rgba(var(--github), 1);
				}
			}
		}
	}
	p, small {
		margin: 0;
	}
}