@font-face {
	font-family: "Primera_Signature";
	src: url("/assets/fonts/PrimeraSignature-ALLy7.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	width: 100%;
	min-height: 100%;
	overflow-x: hidden;
}

body {
	background: var(--bg-color);
	color: var(--text-color);
	text-align: center;
}

/* Centering replacement for flex */
.container {
	width: 100%;
	max-width: 420px;
	padding: 24px;
	text-align: center;

	margin: 10vh auto 0;
}

header {
	margin-bottom: 24px;
}

.signature {
	font-family: "Primera_Signature","JetBrains Mono", monospace;
	font-size: clamp(50px, calc(0.32258 * (100vw - 344px) + 80px), 110px);
	font-weight: 400;
	letter-spacing: 1px;
	margin-bottom: 10px;
	user-select: none;
	font-size-adjust: 0.1;
}

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

.links {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 22px;
}

.link {
	display: block;
	padding: 14px 16px;
	background: var(--button-color);
	color: var(--text-color);
	text-decoration: none;
	border-radius: 10px;
	border: 1px solid var(--border-color);
	transition: transform 0.15s ease, background 0.2s ease;
	font-weight: 400;
}

.tooltip {
	position: relative;
	display: inline-block;
}

.tooltip-text {
	position: absolute;
	left: 50%;
	bottom: 140%;
	transform: translateX(-50%);

	visibility: hidden;
	opacity: 0;

	background: var(--bg-color);
	color: var(--text-color);
	border: 1px solid var(--border-color);
	border-radius: 6px;

	padding: 0.5rem 0.75rem;

	white-space: nowrap;
	max-width: 90vw;

	font-size: 0.875rem;
	pointer-events: none;
}

.effect {
	opacity: 0;
}

/* MOBILE NOTICE */
.mobile-notice {
	display: none;
}

@media (hover: none) and (pointer: coarse) {
	.mobile-notice {
		display: block;

		position: fixed;
		top: 0;
		left: 0;
		right: 0;

		padding: 0.75rem;

		background: var(--accent-color);
		color: var(--bg-color);

		text-align: center;
		font-size: clamp(0.65rem, 2.5vw, 0.95rem);
		line-height: 1.4;

		border-bottom: 1px solid var(--border-color);

		overflow-wrap: break-word;
		word-break: break-word;

		animation: hideNotice 11s forwards;
	}

	@keyframes hideNotice {
		0%, 90% {
			opacity: 1;
			pointer-events: auto;
		}
	
		100% {
			opacity: 0;
			visibility: hidden;
			pointer-events: none;
		}
	}
}

/* DESKTOP ONLY FEATURES */
@media (hover: hover) and (pointer: fine) {
	.link:hover {
		background: var(--border-color);
		transform: translateY(-2px);
	}

	.tooltip:hover .tooltip-text {
		visibility: visible;
		opacity: 1;
		transition-delay: 1s;
	}

	.word {
		position: relative;
		display: inline-block;
		transition: color 0.5s ease;
	}

	.effect {
		position: absolute;

		left: 50%;
		top: 50%;

		transform: translate(-50%, -50%) scale(0.8);

		width: 40px;
		height: calc(40px * 662 / 500);

		background-image: url("../images/chirho.png");
		background-size: contain;
		background-repeat: no-repeat;

		opacity: 0;
		z-index: -1;
		pointer-events: none;

		transition: opacity 0.4s ease, transform 0.4s ease;
	}

	@media (prefers-color-scheme: dark) {
		.effect {
			background-image: url("../images/chirho.png");
		}
	}

	.word:hover .effect {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
		transition: transform 1.5s ease 3s, opacity 1.5s ease 3s;
	}

	.word:hover {
		color: var(--text-color);
		transition: color 3s ease;
	}

	.highlight {
		display: inline-block;
		transition: background-color 0.5s ease, color 0.5s ease;
	}

	.highlight:hover {
		background-color: #f7e01d;
		color: #000;
		transition: background-color 1.5s ease 0.5s, color 1.5s ease 0.5s;
	}

	.linkedin,
	.indeed,
	.credly {
		transition: color 0.5s ease-out;
	}

	.linkedin:hover {
		color: #0174b2;
		transition: color 1s ease-in;
	}

	.indeed:hover {
		color: #003a9b;
		transition: color 1s ease-in;
	}

	.credly:hover {
		color: #ff6a00;
		transition: color 1s ease-in;
	}
}