:root {
	--font-size-large: 1.2em;
	--content-width: 680px;
	--border-radius: 8px;
	--blur-radius: 4px;
	--mobile-blur-radius: calc(var(--blur-radius) / 2);

	--spacing-base: 16px;
	--spacing-xs: calc(var(--spacing-base) / 4);
	--spacing-sm: calc(var(--spacing-base) / 2);
	--spacing-md: var(--spacing-base);
	--spacing-lg: calc(var(--spacing-base) * 1.5);
	--spacing-xl: calc(var(--spacing-base) * 2);
	--spacing-xxl: calc(var(--spacing-base) * 4);
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;

	height: 100%;
	width: 100%;
}

body {
	color: white;
	background-image:
		linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0) 0%,
			rgba(0, 0, 0, 0) 80%,
			black 100%
		),
		url("/images/colombia_cover.jpg");
	background-color: black;
	background-repeat: no-repeat;
	background-position: left;
	background-size: auto 100%;

	@media (min-width: 680px) {
		background-size: cover;
	}

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;

	font-family: "Roboto", "Arial", sans-serif;
	font-size: 16px;

	::selection {
		background: white;
		color: black;
		text-shadow: none;
	}
}

header {
	display: flex;
	justify-content: center;
	margin: var(--spacing-xl) 0;
}

nav {
	color: #333;
	font-size: 1.4em;

	& ul {
		list-style-type: none;

		margin: 0;
		padding: 0;

		display: flex;
		justify-content: space-around;
		gap: 10px;

		& a {
			color: white;
			text-decoration: none;
		}

		& a:hover {
			color: #333;
		}
	}

	& li {
		user-select: none;
	}

	& .bullet {
		color: white;
	}
}

main {
	width: var(--content-width);
	max-width: 100vw;

	display: flex;
	flex-direction: column;
	align-items: center;

	& h2 {
		visibility: hidden;
		font-size: 0.1em;
	}

	& a {
		color: white;
		text-decoration: underline dotted;
		text-underline-offset: 2px;
	}

	& a:hover {
		text-decoration: underline;
	}
}

section {
	width: 100%;

	background: rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(var(--mobile-blur-radius));

	padding: var(--spacing-xl);

	@media (min-width: 680px) {
		backdrop-filter: blur(var(--blur-radius));
		border-radius: var(--border-radius);
		padding: var(--spacing-lg);
	}

	& h3 {
		margin: 0;
		color: white;
		font-style: italic;
		font-size: var(--font-size-large);
		font-weight: 400;
	}
}

footer {
	& h1 {
		font-size: 2em;
		font-family: "Orbitron", serif;
		font-optical-sizing: auto;
		font-weight: 400;
		font-style: normal;

		margin: var(--spacing-xl) 0;
	}
}

#intro {
	font-size: var(--font-size-large);

	& p {
		margin: var(--spacing-md);
	}

	& .hello,
	& .sig {
		user-select: none;

		& img {
			height: 50px;
			margin: var(--spacing-sm) 0;
		}
	}

	& .hello {
		margin-left: var(--spacing-sm);
	}

	& .sig {
		display: flex;
		margin-left: var(--spacing-xxl);
	}
}

#apps {
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	gap: var(--spacing-xxl);

	@media (min-width: 680px) {
		flex-direction: row;
		gap: var(--spacing-lg);
	}

	& .project {
		margin: var(--spacing-md) 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--spacing-sm);
	}

	& .screenshot {
		width: 256px;
		border-radius: var(--border-radius);
		margin: var(--spacing-md) 0;
	}

	& .links {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--spacing-sm);

		& a {
			display: flex;
			align-items: center;
			gap: var(--spacing-xs);
		}
	}
}

#skills {
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	gap: var(--spacing-xl);

	@media (min-width: 680px) {
		flex-direction: row;
		gap: var(--spacing-lg);
	}

	& ul,
	& .col {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	& .col {
		flex: 1;
		margin: var(--spacing-md) 0;
		gap: var(--spacing-sm);
	}

	& ul {
		list-style-type: none;

		margin: 0;
		padding: 0;

		gap: var(--spacing-sm);
	}
}

#links {
	font-size: var(--font-size-large);

	display: flex;
	justify-content: center;

	padding: var(--spacing-xxl) 0;

	& .container {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-lg);

		& a {
			text-decoration: none;
			display: flex;
			align-items: center;
			gap: var(--spacing-sm);
		}

		& a:hover {
			text-decoration: underline;
			text-underline-offset: 2px;
		}
	}
}