@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. */

body {
	background-color: var(--white);
	color: var(--black);
}

/* //////////////////// Header ///////////////// */
header {
	color: var(--black);
	background-color: var(--white);
}
.site-header {
	padding: 4px 20px;
	border-bottom: 3px solid var(--black);
}
/* using variables keeps colour consistent across website and makes potential future tweaks easier */
/* ----------Style the navigation----------- */

section {
	color: var(--black);
}
#sec-five {
	padding: 40px 0;
}
#sec-five h2 {
	margin-top: 0;
	margin-bottom: 25px;
}
/* //////////////////// Footer ///////////////// */

/* footer {
} */
/* /////////////////////////////// CLASSES ////////////////// */
.m-container {
	margin-left: 40px;
	margin-right: 40px;
}

.logo {
	width: 100px;
	height: auto;
	margin: 1rem;
}

/* .homepage {
} */
.row {
	padding: 1em 40px;
	border-bottom: 3px solid var(--black);
}

/* .hero-section {
	background-image: url(/portfolioimages/Home.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 100px;
} */
.contact-link:hover {
	transform: scale(1.1);
}
.work-title {
	margin-bottom: 25px;
	margin-top: 0;
}
.work-media {
	width: 100%;
	height: auto;
	display: block;
	padding: 30px;
	z-index: 2;
}
.work-number {
	position: absolute;
	left: -110px;
	top: -80px;
	font-size: clamp(1100px, 40vw 800px);
	font-weight: 200;
	line-height: 0.85;
	color: var(--gray);
	z-index: 0;
	pointer-events: none;
}
/* this number acts like a bg element, z-index keeps it behind the content */
.project-hero {
	border-bottom: 3px solid var(--black);
}
.work-pages {
	padding: 40px;
}
.see-more-link {
	font-size: 40px;
}
.preview-label {
	font-family: "Jost", "Open Sans", Arial, Helvetica, sans-serif;
	font-size: 40px;
	line-height: 1.3;
	font-weight: 400;
	color: var(--black);
	transition: color 400ms ease;
}

.projects-preview-bar:hover .preview-label {
	color: var(--red);
}

.hero-section {
	background-image: url(../portfolioimages/bg_3.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.hero-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-top: 60px;
	margin-left: 40px;
	margin-right: 40px;
	width: calc(100%-40px);
}
.hero-greeting {
	margin-top: 0;
}
.hero-handwriting {
	display: block;
	width: 100%;
	max-width: 1000px;
	height: auto;
	margin-top: 20px;
}

/* this class sets style for on-page navigation buttons */
/* //////////////----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) {
	/* anything you only want applied at mobile sizes can go here */
	.contact-icons {
		gap: 24px;
	}
	.contact-icon {
		width: 50px;
		height: 50px;
	}
	.m-container {
		margin-left: 20px;
		margin-right: 20px;
	}
	.row {
		padding: 1em 20px;
	}
	.hero-content {
		margin-left: 20px;
		margin-right: 20px;
	}
	.work-media {
		margin-left: -20px;
		margin-right: -20px;
	}
}

@media (min-width: 700px) {
	.hero-handwriting {
		width: 100vw;
		max-width: 1000px;
		margin-left: 0;
	}
	/* 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 */
}

/* ========== LOGO FLIP ANIMATION ========== */
.logo {
	perspective: 600px;
}
.logo-flip {
	position: relative;
	transform-style: preserve-3d;
	transition: transform 700ms ease;
}
.logo:hover .logo-flip {
	transform: rotateY(180deg);
}
.logo-front,
.logo-back {
	width: 100%;
	height: auto;
	display: block;
	backface-visibility: hidden;
}
.logo-front {
	position: relative;
	z-index: 2;
}
.logo-back {
	position: absolute;
	top: 0;
	left: 0;
	transform: rotateY(180deg);
}

/* ========== WHITE TITLE ON SPECIFIC PROJECT CARDS ========== */
.project-card.white-title .project-title {
	color: var(--white);
}
.project-card:hover .project-title,
.project-card:focus .project-title,
.project-card:focus-visible .project-title {
	color: var(--black);
}

/* ========== NAV LINK FRAME ========== */
.nav-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-image: url(../portfolioimages/lines.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
	padding: 12px 24px;
}