/* applies to every single element */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;

	/* border: black solid 1px; */
}

body {
	font-family: "Inter", system-ui;
	font-optical-sizing: auto;
	font-style: normal;

	text-align: center;
	color: #15191a;
	background-color: #fbfcfc;

	width: min(100vw, 1300px);
	margin-left: auto;
	margin-right: auto;

	background-image: url("../img/bg.svg?v=2");
	background-size: 8rem;
}

/* -------------- HEADER SECTION -------------- */

/* the giant Kneesocuk text at the top */
header h1 {
	font-weight: 900;
	font-size: 8rem;
	letter-spacing: -0.03em;

	margin-bottom: -2rem;
}

/* the subtitle under the Kneesocuk text currently this 
says "A portfolio that has nothing to do with kneesocks. */
header h3 {
	font-weight: 150;
	font-size: 2rem;

	margin-bottom: 2rem;
}

header {
	margin-top: 10vh;
}

#sticky-note {
	position: absolute;
	z-index: 1;
	width: 15rem;
	top: 12%;
	left: 55%;
}


/* -------------- NAVIGATION -------------- */

/* the navigation bar at the top of the page */
nav {
	font-weight: 700;
	font-size: 1.5rem;

	margin: 0 auto 3.5rem;

	width: 60%;
}

nav ul {
	list-style: none;
	display: flex;
	justify-content: space-evenly;
}

/* the links in the nav */
nav a {
	color: inherit;

	text-transform: lowercase;
	font-weight: 700;
	letter-spacing: -0.1rem;
	transition: all 0.3s ease-out;
}

/* the links when selected */
nav a.active {
	text-transform: uppercase;
	font-weight: 800;
	letter-spacing: 0.15rem;
}



/* -------------- ARTICLE STYLES -------------- */

/* the footer at the bottom of gallery that 
says "more coming soon..." or something */
h2 {
	font-weight: 800;
}

/* used for promiment text in each article */
h4 {
	font-weight: 300;
}

/* hides all article elements by default */
article {
	display: none;
}

/* shows the gallery article by default if there is no hash in the URL */
#gallery {
	display: block;
}

/* shows the article that matches the hash in the URL */
article:target {
	display: block;
}

/* hides the article if the hash is not in the URL */
article:target ~ #gallery {
	display: none;
}



/* -------------- GALLERY STYLES -------------- */

#gallery ul {
	list-style: none; /* removes the bullets from the list */
	gap: 0.5rem; /* space between items */

	display: flex; /* use flexbox for layout */
	flex-wrap: wrap; /* allows items to wrap to the next line if they don't fit */
}

#gallery ul li {
	/* allows the items to grow and shrink to fit the space */
	flex-grow: 1;
	flex-shrink: 1;
}

#gallery ul li img {
	filter: drop-shadow(0 0 0.2rem rgba(0, 0, 0, 0.2)); /* shadow */
	border-radius: 0.7rem; /* rounded corners */

	width: 100%; /* makes the image take up the entire width of its space */
	height: 20rem; /* limits how tall a row can be */
	object-fit: cover; /* makes the image fill the space without stretching it */
	object-position: center; /* if the image is cropped, center the view */
	display: block; /* removes the space below the image */
}

#gallery aside {
	font-size: 2.2rem;
	letter-spacing: -4.5%;
	word-spacing: 70%;
	padding: 2rem 0;
}

/* This makes the list item a container for the overlay */
#gallery ul li.sensitive {
	position: relative;
	cursor: pointer;
}

/* This is the overlay itself: the blur and the text */
#gallery ul li.sensitive::before {
	content: 'sensitive'; /* The text that appears */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2; /* Ensures it's on top of the image */

	/* Centering the text */
	display: flex;
	justify-content: center;
	align-items: center;

	/* Blur and background effect */
	background-color: rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(25px);
	-webkit-backdrop-filter: blur(25px); /* For Safari support */

	/* Text styling */
	color: white;
	font-size: 2.5rem;
	font-weight: 700;
	letter-spacing: -0.1rem;

	/* Match the image's border radius */
	border-radius: 0.7rem;

	/* Smooth fade-out transition */
	opacity: 1;
	transition: opacity 0.3s ease-out;
}

/* This hides the overlay when the 'revealed' class is added by JS */
#gallery ul li.sensitive.revealed::before {
	opacity: 0;
	pointer-events: none; /* Disables clicking on the hidden overlay */
}



/* -------------- PROJECT STYLES -------------- */

#projects section {
	width: 70%;
	margin-left: auto;
	margin-right: auto;
}

#projects ul {
	list-style: none; /* removes the bullets from the list */
	gap: 1rem; /* space between items */

	display: flex;
	flex-direction: column; /* stack items vertically */
}

#projects ul li {
	background-color: white; /* separates the items from the background for visibility */
	filter: drop-shadow(0 0 0.2rem rgba(0, 0, 0, 0.2)); /* shadow */
	border-radius: 0.7rem; /* rounded corners */
	
	display: flex;
	flex-direction: row; /* stack inner items horizontally */
	overflow: hidden; /* hides overflow from the image */

	height: 12rem;
}

#projects ul li div {
	padding: 2rem; /* space from the border of the item */
	display: flex;
	flex-direction: column; /* stack text vertically */
	width: 60%; /* i do this instead of flex-grow because it prevents text ruining the positioning and properly wraps the text */

	text-align: left;
}

#projects ul li img {
	width: 40%; /* how much of the space the image takes up */
	object-fit: cover; /* makes the image fill the space without stretching it */
	object-position: center; /* if the image is cropped, center the view */
	height: 100%; /* makes the image take up the entire height of its space */
	display: block; /* removes the space below the image */
}

#projects ul li h4 {
	font-weight: 800;
	font-size: 2rem; /* size of the title text */
}

#projects ul li h5 {
	font-weight: 750;
	padding-bottom: 0.5rem;
}



/* -------------- ANIMATIONS STYLES -------------- */

#animations section {
	width: 60%;
	margin-left: auto;
	margin-right: auto;

	padding-bottom: 3rem; /* space from the bottom of the page */
}

#animations ul {
	list-style: none; /* removes the bullets from the list */
	gap: 1rem; /* space between items */

	display: flex;
	flex-direction: column; /* stack items vertically */
}

#animations ul li iframe {
	width: 100%;
	aspect-ratio: 16 / 9; /* keeps the aspect ratio of the video */

	border-radius: 1rem; /* rounded corners */
	filter: drop-shadow(0 0 0.2rem rgba(0, 0, 0, 0.2)); /* shadow */
}



/* -------------- CONTACT STYLES -------------- */

#contact {
	width: 70%;
	margin: 0 auto;
}

#contact > div {
	background-color: white; /* separates the items from the background for visibility */
	filter: drop-shadow(0 0 0.2rem rgba(0, 0, 0, 0.2)); /* shadow */
	border-radius: 0.7rem; /* rounded corners */
	
	display: flex;
	padding: 2rem;
}

#contact section {
	padding: 2rem; /* space from the border of the item */
	display: flex;
	flex-direction: column; /* stack text vertically */
	width: 50%; /* i do this instead of flex-grow because it prevents text ruining the positioning and properly wraps the text */

	text-align: left;
}

#contact section h2 {
	font-weight: 800;
	font-size: 3rem; /* size of the contact header */
	padding-bottom: 1rem;
}

#contact section p {
	letter-spacing: -0.05rem;
	line-height: 1.5;
}

#contact section a {
	color: inherit;
	font-weight: 650;
}

#contact form {
	font-weight: 575;
	display: flex;
	flex-direction: column;
	width: 55%;
	gap: 1.2rem;
}

#contact form .form-group {
	display: flex;
	flex-direction: column;
}

#contact form .name {
	display: flex;
	gap: 0.5rem;
}

#contact form label {
	padding-bottom: 0.3rem;
}

#contact input,
#contact textarea {
	width: 100%;
	font-size: 0.9rem;
	font-family: "Inter", system-ui; /* because the body font doesn't apply to form elements */
	padding: 0.5rem;
	border: none;
	
	border-radius: 0.3rem;
	background-color: rgba(0, 0, 0, 0.05);
	border-bottom: 0.15rem solid #15191a;
}

#contact textarea {
	min-height: 7rem;
	resize: none; /* prevents resizing */
}

#contact form h4 {
	font-size: 0.7rem;
	padding-top: 0.3rem;
	font-weight: 500;
	color: #666;
}

#submit {
	font-family: "Inter", system-ui;
	font-weight: 700;
    background: #15191a;
    border-radius: 0.5rem;
    border: none;

    padding: 0;
    cursor: pointer;
    outline-offset: 0.2rem;

	width: fit-content;
	margin: 0 auto;
}

#submit:focus:not(:focus-visible) {
    outline: none;
}

#submit:active > span {
    transform: translateY(-2px);
}

#submit > span {
    border-radius: 0.5rem;
    font-size: 1.25rem;
    background: #333b3d;
    color: white;

    display: block;
    padding: 0.5rem 1.5rem;

    transform: translateY(-6px);
}