/* Define font faces for Quicksand font */
@font-face {
	font-display: swap;
	font-family: "Quicksand";
	font-style: normal;
	font-weight: 400;
	src: url("../fonts/quicksand-v36-latin-regular.woff2") format("woff2");
}
/* Quicksand-500 */
@font-face {
	font-display: swap;
	font-family: "Quicksand";
	font-style: normal;
	font-weight: 500;
	src: url("/fonts/quicksand-v36-latin-500.woff2") format("woff2");
}
/* Quicksand-600 */
@font-face {
	font-display: swap;
	font-family: "Quicksand";
	font-style: normal;
	font-weight: 600;
	src: url("/fonts/quicksand-v36-latin-600.woff2") format("woff2");
}

/* Variables */
:root {
	--primary: #2c3e50;
	--secondary: #202020;
	--tertiary: #ffee32;
	--text: #fff;
	--border: 2px solid var(--tertiary);
	--btn-radius: 0.75rem 0 0.75rem 0;
	--container-radius: 0.5rem;
	--shadow: 0 0 0.5rem #000;
	--glow: 0 0 0.5rem var(--tertiary);
	--transition: all 0.25s ease;
}

/* Global Defaults */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Quicksand", Arial, Helvetica, sans-serif;
	scroll-behavior: smooth;
}

body {
	width: 100dvw;
	color: var(--text);
	background-color: var(--primary);
	overflow-x: clip;
}

section {
	height: fit-content;
	min-height: 100dvh;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding-top: 3.5rem;
}

/* Headings */
h1,
h2,
h3 {
	font-weight: 600;
	text-shadow: var(--shadow);
}

h1 {
	font-size: 2rem;
}

h2,
h3 {
	width: 100%;
	text-align: center;
}

h2 {
	font-size: 1.4rem;
}

h3 {
	margin-bottom: 0.5rem;
	color: var(--tertiary);
}

/* Links */
a {
	text-decoration: none;
	color: var(--text);
	transition: var(--transition);
}

#nav-links a,
#email,
#socials a {
	position: relative;
	z-index: 8;
}

#hero > a,
.project-links a {
	padding: 0.5rem 0.75rem;
	background-color: var(--secondary);
	border: var(--border);
	border-radius: var(--btn-radius);
}

#hero > a:active,
.project-links a:active {
	color: var(--tertiary);
	scale: 0.9;
}

/* Navbar */
nav {
	height: 2.5rem;
	width: 100%;
	padding-left: 0.75rem;
	background-color: var(--secondary);
	border-bottom: var(--border);
	box-shadow: var(--shadow);
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: space-between;
	z-index: 9;
}

nav > img {
	height: 100%;
}

#nav-links {
	height: 100%;
	width: 70%;
	max-width: 600px;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}

#nav-links a.active {
	font-weight: 500;
	color: var(--tertiary);
}

/* Hero / Intro section */
#hero {
	margin-top: 3rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#hero > img {
	height: 225px;
	width: 225px;
	aspect-ratio: 1;
	margin: 4rem 0;
	background-color: var(--secondary);
	border: var(--border);
	border-radius: 50%;
	box-shadow: var(--shadow);
	transition: background-color 0.75s ease, transform 0.75s ease;
}

#hero img:hover {
	background-color: var(--tertiary);
	transform: scale(1.1) rotateZ(360deg);
}

.fa-code {
	color: var(--tertiary);
}

#hero > p {
	width: 80%;
	margin: 2rem 0 3rem 0;
	text-align: center;
	line-height: 1.5rem;
}

#interactive,
#responsive,
#accessible {
	cursor: pointer;
	border-bottom: var(--border);
	transition: var(--transition);
	position: relative;
}

.toggle-interactive {
	font-size: 1.5rem;
	color: var(--tertiary);
}

#responsive-img,
#accessible-img {
	display: none;
	border-radius: var(--container-radius);
	box-shadow: var(--shadow);
	position: absolute;
	bottom: 100%;
	left: -50%;
}

#responsive-img {
	height: 125px;
	width: auto;
	aspect-ratio: 1;
}

#accessible-img {
	height: 175px;
	width: auto;
}

#responsive-img.toggle-img,
#accessible-img.toggle-img {
	display: block;
}

/* Projects section */
.project {
	width: 90%;
	margin: 2rem auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.project-img {
	height: auto;
	width: 90%;
	max-width: 350px;
	aspect-ratio: 1;
	border: var(--border);
	border-radius: var(--container-radius);
	box-shadow: var(--shadow);
}

.project-desc {
	margin-top: -1rem;
	padding: 0.75rem;
	background-color: var(--secondary);
	border-radius: var(--container-radius);
	box-shadow: var(--shadow);
}

.stack-tags {
	list-style-type: none;
	margin: 0.5rem 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-evenly;
}

.stack-tags li {
	margin: 0.25rem;
	padding: 0.25rem 0.5rem;
	font-weight: 500;
	border-radius: var(--container-radius);
}

.react {
	color: #000;
	background-color: #01d9fe;
}

.js {
	color: #000;
	background-color: #dab92c;
}

.css {
	color: var(--text);
	background-color: #0d75ba;
}

.html {
	color: #000;
	background-color: #f4632b;
}

.firebase {
	color: #000;
	background: linear-gradient(45deg, #ffd700 0%, #ff0300 100%);
}

.project-links {
	margin: 0.75rem 0;
	display: flex;
	justify-content: space-around;
}

/* Contact section */
#contact {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-evenly;
}

#contact p:first-of-type {
	width: 90%;
	padding: 2rem;
	line-height: 2rem;
	background-color: var(--secondary);
	border: var(--border);
	border-radius: var(--container-radius);
	box-shadow: var(--shadow);
}

#email {
	font-weight: 600;
	color: var(--tertiary);
	white-space: nowrap;
}

#socials {
	width: 85%;
	padding: 0.5rem 1rem;
	text-align: center;
	border-bottom: var(--border);
}

#socials a {
	margin: 0 0.5rem;
	font-size: 1.6rem;
	color: var(--tertiary);
	display: inline-grid;
	place-items: center;
}

/* Custom highlighting */
::selection {
	color: #000;
	background-color: var(--tertiary);
	text-shadow: none;
}

/* Cursor circle hidden on mobile */
#cursor-circle,
#inner-circle {
	display: none;
}

/* Larger screen sizes */
@media (min-width: 700px) {
	/* Headings */
	h1 {
		font-size: 3rem;
	}

	h2 {
		font-size: 2rem;
	}

	h3 {
		font-size: 1.5rem;
	}

	/* Hero section */
	#hero > img {
		height: 300px;
		width: auto;
	}

	#responsive-img {
		height: 250px;
		width: auto;
		aspect-ratio: 1;
	}

	#accessible-img {
		height: 300px;
		width: auto;
	}

	#responsive-img.toggle-img,
	#accessible-img.toggle-img {
		display: none;
	}

	/* Projects section */
	.project {
		width: 80%;
		flex-direction: row;
	}

	.project-desc {
		width: 50%;
		margin-top: 0;
		margin-left: -1rem;
	}

	/* Contact section */
	#contact p:first-of-type {
		width: 50%;
	}

	/* Cursor circle */
	#cursor-circle {
		height: 40px;
		width: 40px;
		border: var(--border);
		border-radius: 50%;
		display: block;
		position: absolute;
		pointer-events: none;
		z-index: 99;
	}

	#inner-circle {
		height: 6px;
		width: 6px;
		background-color: var(--secondary);
		border-radius: 50%;
		display: block;
		position: relative;
		top: 15px;
		left: 15px;
	}

	/* Hover effects */
	/* Nav & contact links */
	#nav-links a:after,
	#email:after,
	#socials a:after {
		content: "";
		height: 0;
		width: 120%;
		background-color: var(--tertiary);
		border-radius: var(--btn-radius);
		position: absolute;
		top: 110%;
		left: -10%;
		transition: var(--transition);
		z-index: -1;
	}

	#nav-links a:hover,
	#email:hover,
	#socials a:hover {
		font-weight: 500;
		color: #000;
	}

	#nav-links a:hover:after,
	#email:hover:after,
	#socials a:hover:after {
		height: 110%;
		top: -5%;
	}

	/* Intro keywords */
	#responsive:hover #responsive-img,
	#accessible:hover #accessible-img {
		display: block;
	}

	/* "Buttons" */
	#hero > a:hover,
	.project-links a:hover {
		color: #000;
		background-color: var(--tertiary);
		border-color: #000;
		box-shadow: var(--glow);
	}
}