@import url("reset.css");
@import url("layout.css");
@import url("variables.css");
@import url("typography.css");
/* DO NOT EDIT THESE IMPORTS
In order to keep our CSS as manageable as possible, we're starting with multiple separate stylesheets. They are all imported into style.css.

    Do not edit reset.css at all.
    You can minimally edit layout.css to match your specific column/row grid rules. Try to keep all basic structural rules here.
    Optionally, you can set colour variables in variables.css.
    Use typography.css stylesheet to set your general text styles.
    Use style.css for all general UI styles, or anything that you want to overwrite from other stylesheets, because it's loaded last. */

/* Use this stylesheet to add your UI details, and to overwrite layout details for specific instances. */

html {
	scroll-behavior: smooth;
	/* adds a scrolling factor when the contact button is active */
}

body {
	color: beige;
	/* sets default text colour for the whole page */
}

body,
html {
	margin: 0;
	/* sets space around the content */
	padding: 0;
	/* sets space within the content contianer */
	width: 100%;
	/* the width percetage that the contents inside can take up */
}

/* //////////////////// Header ///////////////// */
header {
	display: flex;
	/* wraps the content in a flexible contianer*/
	justify-content: space-between;
	/* equally spreads to the right and left tof the page */
	align-items: center;
	/* vertically aligns items to the center */
	padding: 20px 50px;
	/* space within the container */
	background-color: var(--cobalt);
	/* background colour of the header */
}

/* //////////////////// Header And Footer Logo ///////////////// */

.nav-link {
	text-decoration: none;
	color: beige;
	transition: box-shadow 0.3s ease;
}

.nav {
	display: flex;
	gap: 30px;
}

.nav-link:hover {
	/* hover glow state for the navigation buttons */
	text-shadow: 0 4px 10px var(--beige);
}

.nav-link:active {
	/* active shadow state for navigation buttons */
	text-shadow: 0 2px 5px var(--coal);
}

.header a:hover img,
.footer a:hover img {
	/* logo scaled up hover state */
	transform: scale(1.03);
	transition: transform 0.2s ease;
}

.header a:active img,
.footer a:active img {
	/* logo scaled down active state */
	transform: scale(1);
}

/* //////////////////// hero ///////////////// */
.hero-img {
	width: 100%;
	height: auto;
	/* the img will expand based on the web page's size */
	display: block;
	/* places img on a new line that pushes all content after it, and takes up the full width, this element take up an entire block on the page */
}

/* ----------Style the navigation----------- */

/* //////////////////// ABOUT PAGE ///////////////// */
.about-page-content {
	padding: 80px 0 140px;
	color: var(--coal);
	text-align: center;
	/* text aligns to the center of the page */
}

.headshot {
	/* image frame glow effect */
	margin-bottom: 40px;
	/* adjusts the bottom margin */
	text-decoration: none;
	/* removes link decor */
	color: beige;
	border-radius: 28px;
	/* round corners */
	/* hides content that may show past the container */
	overflow: hidden; /* THIS is what you're missing */
	box-shadow: 0 0 60px var(--cobalt);
}

.display-font {
	/* more about leighna title */
	font-size: 2.5rem;
	letter-spacing: 2px;
	margin-bottom: 30px;
	color: var(--coal);
}

.profile-photo {
	width: 300px;
	height: auto;
	box-shadow: 0 0 50px var(--cobalt);
}

.about-text {
	line-height: 1.6;
	/* text leading */
	max-width: 900px;
	padding: 0 1em;
	margin-left: auto;
	margin-right: auto;
}

/* //////////////////// PROJECTS PAGE ///////////////// */
.project-row {
	padding: 0;
	margin: 0;
	padding: 0;
	width: 100%;
}

.project-row:has(.projects-img) + .project-row:has(.projects-img) {
	margin-top: 20px;
}

.full-img {
	/* image will take up the whole page */
	width: 100%;
	height: auto;
	display: block;
}

.project-title {
	margin-bottom: 10px;
	line-height: 1;
}

.project-copy {
	line-height: 1.5;
	color: var(--coal);
	margin-bottom: 3em;
}

.cobalt {
	color: var(--cobalt);
}

/* ////////////PROJECT CARDS ON HOMEPAGE//////////// */

.beige-bg {
	background-color: beige;
	padding-top: 60px;
}

.portfolio {
	padding: 80px 50px;
}

.portfolio-title {
	text-align: center;
	margin-bottom: 50px;
	font-size: 1.2em;
	margin-bottom: 4em;
}

.projects-container {
	/* container for projects */
	display: flex;
	flex-direction: column;
	/* stacks content vertically */
	gap: 30px;
	/* sets the space/gutters between columns or rows */
}

.project-card {
	position: relative;
	text-decoration: none;
	/* removes link decor */
	color: beige;
	border-radius: 28px;
	/* round corners */
	overflow: hidden;
	/* hides content that may show past the container */
}

/* Project image */
.project-card img {
	width: 100%;
	display: block;
}

/* Gradient overlay */
.project-overlay {
	position: absolute;
	/* gives control over the positioning of this specific element outside of other rules */
	top: 0;
	left: 0;
	/* the content will fill up the rest of the available space in the contianer */
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, var(--coal), transparent);
	/* blue gradient from top */
	padding: 0px 30px;
}

.project-card:hover {
	/* Hover coal shadow */
	box-shadow: 0 10px 25px var(--coal);
}

.project-card:active {
	/* normal active state */
	box-shadow: none;
}

/* ////////PROJECT PAGE//////// */

.projects-img {
	position: relative;
	text-decoration: none;
	/* removes link decor */
	color: beige;
	border-radius: 28px;
	/* round corners */
	overflow: hidden;
	/* hides content that may show past the container */
	width: 100%;
	display: block;
	margin: 0;
	box-shadow: 10px 10px 8px grey;
}

.project-copy.text-centred {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 60px;
}

.project-nav {
	padding-top: 2em;
	padding-bottom: 2em;
	width: 100%;
}

.project-nav-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 40px;
}

.project-btn {
	text-decoration: none;
	color: var(--cobalt);
	border: 2px solid var(--cobalt);
	padding: 12px 10px;
	border-radius: 30px;
	transition: all 0.3s ease;
	font-weight: 500;
	font-size: 25px;
}

/* Hover */
.project-btn:hover {
	background-color: var(--cobalt);
	color: beige;
}

/* Active click */
.project-btn:active {
	transform: scale(0.97);
}

/* ////////FOOTER//////// */

.footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	padding: 60px 20px;
	background: linear-gradient(to top, var(--cobalt), var(--beige));
	/* backround gradient starting from the bottom to the top */
	color: var(--beige);
	text-align: center;
	line-height: 3em;
}

.copyright {
	margin-bottom: 2px;
}

.cobalt {
	color: var(--cobalt);
}

.footer a {
	text-decoration: none;
	color: var(--beige);
}

.copyright {
	font-size: 12px;
	opacity: 0.8;
}

/* //////////////----Responsive layout - Media queries--------//////////// */

/* //////////// Media queries //////////// */
/* Add and/or edit. */

/* You can edit the rules inside of these media queries, but you can also edit the breakpoints to work for your own content and design. For example, if you want your text rules to change at 600px instead of 768, you can edit the min-width. You can also add more "breakpoints" - more conditions where the rules will change. */

@media (max-width: 600px) {
	.project-nav-container {
		flex-direction: column;
		gap: 15px;
		align-items: center;
	}

	.project-btn {
		font-size: 18px;
		text-align: center;
		width: 100%;
		display: block;
	}

	header {
		flex-wrap: wrap;
		justify-content: center;
		gap: 25px;
		padding: 15px 20px;
	}

	header img {
		max-width: 80px;
	}

	.nav {
		gap: 15px;
	}

	.nav-link {
		font-size: 14px;
	}
	/* anything you only want applied at mobile sizes can go here */
}

@media (min-width: 768px) {
	/* anything you want to kick in at small tablet and above can go here */
}

@media (min-width: 1080px) {
	/* anything you want to kick in at large tablet and above can go here */
}

@media (min-width: 1300px) {
	/* anything you want to kick in at desktop and above can go here */
}