@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 {
	margin: 0;
}

html {
	scroll-behavior: smooth;
}

/* ------------------Style the header---------------- */

header {
	border-bottom: 1px solid black;
	margin-bottom: 100px;
}

.logo {
	width: 200px;
	padding: 30px;
	margin-top: 15px;

	/* Limit the size of your logo. Is often a good place to use a fixed width (the "width" property, with a pixel value, not a percentage). */
}

ul {
	padding-left: 0;
	/* By default, lists have padding-left of 40px to make room for bullet points or numbers. I'm overwriting because I have no bullet points to make room for. */
}

.main-header {
	margin-bottom: 0;
	display: flex;
	/* Display: flex; on parent makes children behave like flex children */
	/* Pushes children to fill full horizontal width, and distributes all children evenly horizontally */
	align-items: center;
	/* for vertical alignment of flex children */
	position: sticky;
	top: 0;
	background-color: white;
	padding-bottom: 10px;
	z-index: 1200;
	padding-right: 15px;
}

/* This selector is called a "combinator", and the space means descendant */
.primary-nav li {
	display: inline;
	/* Removes the bullet (or number) and puts all <li>s in line with each other */
}

/* This selector below is a "combinator". It selects all <a> tags that are a descendant of any element that has the class "primary-nav". */
.primary-nav a {
	margin-right: 30px;
	margin-bottom: 20px;
	display: inline-block;
	padding: 0.75em;
	/* Very important for building accessible links - large enough tap space */
}

.header-button {
	display: inline-block;
	padding: 0.75em 1em;
	text-decoration: none;
	color: black;
}

/* rules that both buttons share for their hover state  */
.header-button:hover,
.header-button:focus {
	transform: translate(1px, -2px);
	color: blue;
}

.primary-button,
.secondary-button {
	display: inline-block;
	padding: 0.75em 1em;
	text-decoration: none;
	color: black;
}

/* rules that both buttons share for their hover state  */
.primary-button:hover,
.secondary-button:hover,
.primary-button:focus,
.secondary-button:focus {
	transform: translate(1px, -2px);
	color: blue;
}

.primary-button-project {
	display: inline-block;
	padding: 0.75em 1em;
	text-decoration: none;
	color: black;
}

/* rules that both buttons share for their hover state  */
.primary-button-project:hover,
.primary-button-project:focus {
	transform: translate(1px, -2px);
	color: blue;
}

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

.main-header {
	border-top: 1px solid black;
	/* padding-top: 1em; */
	display: flex;
	justify-content: flex-start;
	/* Display: flex; on parent makes children behave like flex children */
	position: fixed;
	top: 0;
	background-color: white;
	/* padding: 15px; */
	z-index: 1200;
	width: 100%;
}

.home-link {
	display: flex;
}

.navigation {
	display: flex;
	align-items: baseline;
	position: fixed;
	right: 0;
	padding-right: 1em;
	padding-top: 1em;
	background-color: white;
}

nav ul {
	list-style-type: none;
	padding: 0;
}

nav li {
	display: inline;
}

nav a {
	text-decoration: none;
	display: inline-block;
	padding-right: 30px;
}

.dropbtn {
	background-color: white;
	padding: 20px 16px;
	font-size: 20px;
	border: none;
	cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
	position: relative;
	display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
	display: none;
	position: absolute;
	background-color: white;
	border: 1px solid black;
	min-width: 520px;
	min-height: 5em;
	z-index: 1;
	right: 0;
	padding: 30px 0px 16px 16px;
}

/* Links inside the dropdown */
.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

/* Show the dropdown menu on hover */
.dropdown:active .dropdown-content {
	display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropdown:focus .dropbtn {
	background-color: white;
	border-color: black;
}
.show {
	display: block;
}

/* ------------------Sections and pages------------------ */
/* Style any specific sections or pages here */

/*----------------Hero-------------*/

#hero {
	background-image: url("images/hero-portfolio.png");
	background-size: 100%;
	width: 100vw;
	height: 80vh;
	background-repeat: no-repeat;
	margin-top: 3.5em;
}

.hero-fullbg .text-wrap {
	padding-top: 400px;
	padding-left: 1000px;
	margin: 0 auto;
	text-align: left;
}

.flex-bottom-right {
	display: flex;
	flex-wrap: wrap;
	flex-grow: unset;
	max-width: 350px;
}

.bottom-right-text {
	position: absolute;
	right: 15%;
	padding-top: 3em;
	padding-right: 30px;
	font-size: 1.2rem;
	text-align: left;
	max-width: 300px;
}

.material-symbols-outlined {
	padding-top: 1em;
	font-size: 1.5em;
}

.arrow-up-btn {
	width: 15%;
	height: 15%;
	padding-bottom: 1em;
	margin-left: 2.7em;
}

/*-----------Projects------------*/

.top {
	margin-top: 6em;
}

.bottom-scroll {
	margin-top: 1em;
}

#project-left {
	background-image: url("images/typedirectors-poster-1.png");
	background-size: 100%;
	width: 100%;
	height: 100%;
}

.bubble {
	max-width: 70%;
	margin-left: 5em;
	margin-top: 1em;
}

.inner-wrapper-text-wrap {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 100px;
}

.row .project-list-flex {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-left: 20px;
	margin-right: 40px;
	margin-top: -40px;
	gap: 310px;
}

.flex-item .bordered .one-half .right img {
	width: 782px;
	height: 752px;
	object-fit: cover;
	margin-top: 40px;
}

.row .flex-gap-lg {
	display: flex;
	flex-direction: row;
	flex-grow: 1;
	flex-wrap: wrap;
}

.flex-item .bordered .one-half {
	display: flex;
	flex-direction: row;
	flex-grow: 1;
	flex-wrap: wrap;
	width: 100%;
}

.flex-item .bordered .one-half .right img {
	max-width: 700px;
	max-height: 700px;
	object-fit: cover;
}

.flex-item .bordered .one-half .right {
	max-width: 700px;
	max-height: 700px;
}

.project-transition {
	transition: transform 250ms;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.project-transition:hover {
	transform: translateY(-10px);
}

.row {
	display: flex;
	flex-direction: row;
	flex-grow: 1;
	flex-wrap: wrap;
}

.column {
	flex: 50%;
	padding-right: 12em;
}

.primary-button .flex-more-projects {
	padding: 1em;
	/* margin-right: 3em; */
}

/*-------FOOTER-------------*/

footer {
	border-top: 1px solid black;
	padding-top: 1em;
	display: flex;
	justify-content: flex-end;
	/* Display: flex; on parent makes children behave like flex children */
	position: sticky;
	bottom: 0;
	background-color: white;
	padding: 15px;
	z-index: 1200;
}

.inner-wrapper-footer {
	font-size: 16px;
	padding: 20px;
}

.email {
	font-size: 18px;
}

.row .flex-gap-lg .contact {
	justify-content: space-between;
	display: flex;
	flex-direction: row;
	flex-grow: 1;
	flex-wrap: wrap;
}

/*-------CONTACT PAGE---------*/

.container {
	max-width: 1920px;
	margin: 0 auto;
	width: 100%;
	margin: 0 auto;
	display: flex;
	margin-bottom: 3%;
	margin-top: 8em;
}

.right-side {
	width: 25%;
}

.left-side {
	width: 75%;
	font-size: 8em;
}

.contact-title {
	max-width: 900px;
	margin-left: 1em;
}

.contact-one-half {
	padding: 0.75em 1em 0 1em;
	justify-content: left;
}

.contact-info {
	margin-left: 8em;
}

.subtitle {
	margin-left: 9em;
}

.arrow-contact {
	max-width: 1em;
	margin-left: 5em;
	margin-top: 0.5em;
}

/*--------PROJECT 1 PAGE------------*/

.flex-gap-lg .project {
	display: flex;
	gap: 2em;
	flex-direction: row;
	justify-content: space-between;
}

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

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

@media (max-width: 390px) {
	.logo {
		width: 150px;
		padding: 30px;
		margin-top: 15px;

		/* Limit the size of your logo. Is often a good place to use a fixed width (the "width" property, with a pixel value, not a percentage). */
	}

	#hero {
		background-image: url("images/hero-portfolio.png");
		background-size: 100%;
		width: 100vw;
		height: 80vh;
		background-repeat: no-repeat;
		margin-top: 6em;
	}
	.lead {
		font-size: 0.9em;
		max-width: 420px;
		justify-content: center;
		font-weight: 600;
		padding-left: 0.5em;
	}
	.bottom-right-text {
		position: absolute;
		right: 15%;
		padding-top: 3em;
		padding-right: 30px;
		font-size: 1.2rem;
		text-align: center;
		max-width: 300px;
	}
	.material-symbols-outlined {
		padding-top: 1em;

		font-size: 1.5em;
	}
	.column {
		flex: 100%;
		padding-right: 2em;
	}
	.contact-title {
		max-width: 900px;
		margin-left: 0.6em;
	}
	.arrow-contact {
		max-width: 1em;
		margin-left: 2.3em;
		margin-top: 0.3em;
	}
	#contact-body {
		margin-right: 0.5em;
	}
}

@media (max-width: 600px) {
	/* stuff that will only show on mobile happens in here */

	.dropdown-content {
		/* display: none; */
		position: absolute;
		background-color: white;
		border: 1px solid black;
		max-width: 1em;
		min-height: 5em;
		right: -8rem;
	}

	.bottom-right-text {
		position: absolute;
		right: 12%;
		padding-bottom: 2em;
		padding-left: 5em;
		font-size: 1.2rem;
		text-align: left;
		justify-content: center;
		padding-top: 0px;
		max-width: 400px;
	}

	.lead {
		margin-top: 5px;
	}

	.contact-flex-half .image {
		max-width: 100%;
		max-height: 600px;
		display: flex;
		padding: 1em;
		margin-left: 1em;
	}

	.container {
		max-width: 600px;
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-bottom: 3%;
	}

	#hero {
		background-image: url("images/hero-portfolio.png");
		background-size: 100%;
		width: 100vw;
		height: 40vh;
		background-repeat: no-repeat;
	}

	#project-left {
		background-image: url("images/typedirectors-poster-1.png");
		background-size: 100%;
		width: 100vw;
		height: 50vh;
	}

	.contact-one-half {
		padding: 0.75em 1em 0 1em;
		justify-content: left;
	}

	.contact-info {
		margin-left: 1em;
	}

	.subtitle {
		margin-left: 2em;
	}

	.left-side {
		width: 90%;
		font-size: 4em;
	}

	.right-side {
		width: 50%;
		position: relative;
		left: 25%;
	}

	.arrow-contact {
		max-width: 1em;
		margin-left: 2.5em;
		margin-bottom: 1em;
	}

	.main-header {
		padding-right: 10px;
	}

	.material-symbols-outlined {
		padding-top: 5px;
		padding-bottom: 0px;
		padding-left: 3em;
	}

	.dropbtn {
		font-size: 16px;
	}
}

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

	.bottom-right-text {
		position: absolute;
		right: 12%;
		padding-bottom: 6em;
		padding-left: 5em;
		font-size: 1.2rem;
		text-align: left;
		justify-content: center;
		padding-top: 0;
		max-width: 400px;
	}

	#project-left {
		background-image: url("images/typedirectors-poster-1.png");
		background-size: 100%;
		width: 90vw;
		height: 50vh;
	}

	.left-side {
		width: 90%;
		font-size: 4em;
	}

	.right-side {
		width: 25%;
	}

	.left-side {
		width: 75%;
		font-size: 7em;
	}

	.contact-title {
		max-width: 900px;
		margin-left: 1em;
	}
}

@media (min-width: 810px) {
	.dropbtn {
		font-size: 17px;
	}
	#hero {
		background-image: url("images/hero-portfolio.png");
		background-size: 100%;
		width: 100vw;
		height: 60vh;
		background-repeat: no-repeat;
	}
	.lead {
		font-size: 1.1em;
		max-width: 800px;
		justify-content: center;
		font-weight: 600;
		padding-left: 0.5em;
	}
	.bottom-right-text {
		position: absolute;
		right: 27%;
		font-size: 1.2rem;
		text-align: left;
		max-width: 400px;
		top: 420px;
	}

	.material-symbols-outlined {
		padding-top: 1em;
		font-size: 1.5em;
	}
	.column {
		flex: 50%;
		padding-right: 2em;
	}
	.contact-title {
		max-width: 1000px;
		margin-left: 0.8em;
		font-size: 0.8em;
	}

	.contact-one-half {
		padding: 0.75em 1em 0 1em;
		justify-content: left;
	}

	.contact-info {
		margin-left: 4em;
	}

	.subtitle {
		margin-left: 5em;
	}
	.arrow-contact {
		max-width: 0.8em;
		margin-left: 3.8em;
		margin-top: 0;
	}
	.left-side {
		margin-top: 11%;
		margin-bottom: 8%;
	}
}

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

	#project-left {
		background-image: url("images/typedirectors-poster-1.png");
		background-size: 100%;
		width: 80vw;
		height: 65vh;
	}

	.large-text {
		font-size: 700%;
	}

	.right-side {
		width: 25%;
	}

	.left-side {
		width: 75%;
		font-size: 8em;
	}

	.contact-title {
		max-width: 900px;
		margin-left: 1em;
	}
	.left-side {
		width: 75%;
		font-size: 8em;
		margin-top: 1em;
	}
}

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

	.dropbtn {
		font-size: 20px;
	}

	#project-left {
		background-image: url("images/typedirectors-poster-1.png");
		background-size: 100%;
		width: 100%;
		height: 90vh;
	}

	.large-text {
		font-size: 900%;
	}
	.right-side {
		width: 25%;
	}

	.left-side {
		width: 75%;
		font-size: 8em;
		margin-top: 1em;
	}

	.contact-title {
		max-width: 900px;
		margin-left: 1.3em;
	}

	.contact-one-half {
		padding: 0.75em 1em 0 1em;
		justify-content: left;
	}

	.contact-info {
		margin-left: 8em;
	}

	.subtitle {
		margin-left: 9em;
	}
	#hero {
		background-image: url("images/hero-portfolio.png");
		background-size: 100%;
		width: 100vw;
		height: 80vh;
		background-repeat: no-repeat;
		margin-top: 3.5em;
	}
	.lead {
		font-size: 1.3em;
		max-width: 1000px;
		justify-content: left;
		font-weight: 600;
		padding-left: 0.5em;
	}
	.bottom-right-text {
		position: absolute;
		right: 15%;
		padding-top: 3em;
		padding-right: 30px;
		font-size: 1.2rem;
		text-align: left;
		max-width: 400px;
	}
	.material-symbols-outlined {
		padding-top: 1em;

		font-size: 1.5em;
	}
	.column {
		flex: 50%;
		padding-right: 12em;
	}
}
