@import url("reset.css");
@import url("layout.css");
@import url("variables.css");
@import url("typography.css");

html {
	scroll-behavior: smooth;
	/* adjusts how the scroll moves */
}

body {
	background-color: var(--white);
	/* sets background colour */
}

header {
	background-color: var(--white);
	/* sets header colour */
}

hr {
	/* default line style */
	margin-left: 40px;
	margin-right: 40px;
	margin-top: 12px;
	/* margins around the line */
	height: 2px;
	/* line thickness */
	background-color: var(--purple);
	/* changes colour */
	border: none;
	/* removes border */
	max-width: 94vw;
}

.line {
	/* footer line divider style */
	height: 2px;
	background-color: var(--white);
	border: none;
	margin: 0%;
	/* https://www.w3schools.com/howto/howto_css_style_hr.asp */
}

.icon-container {
	/* image conatiner */
	position: relative;
	/* position */
	height: 30px;
	/* icon height */
	margin-right: 3.5em;
}

.icon-image {
	display: block;
	height: 30px;
}

.nav {
	/* navigation bar style on home page */
	margin: 0.5em;
	font-family: "arvo", "bree serif", Georgia, "Times New Roman", Times, serif;
	/* font stack */
	background-color: var(--white);
	/* nav background colour*/
	height: 50px;
	/* nav bar height */
	align-items: center;
	/* how the items are aligned */
}

.project-nav {
	/* navigation bar style on project pages */
	margin: 0.5em;
	font-family: "arvo", "bree serif", Georgia, "Times New Roman", Times, serif;
	/* font stack */
	background-color: var(--white);
	/* nav background colour*/
	height: 50px;
	/* nav bar height */
	align-items: center;
	/* how the items are aligned */
	margin-bottom: 1.5em;
}

ul {
	/* how the buttons on the navigatio bar are styled */
	list-style-type: none;
	margin: 0;
	overflow: hidden;
	background-color: var(--white);
	display: block;
	text-align: center;
	margin-right: 3.5em;
}

ul li {
	float: left;
	/* moves content to the right side */
}

ul li a {
	/* default state */
	display: block;
	color: var(--darkpurple);
	/* changes colour*/
	text-align: center;
	padding: 15px 15px 10px 15px;
	text-decoration: none;
	font-weight: bold;
	/* changes font weight to bold */
	font-size: 16px;
	cursor: pointer;
	/* changes the cursor to pointer */
	transition: 0.5s ease;
	/* transition animation while hovering */
}

ul li a:hover {
	/* hover state */
	background-color: var(--white);
	text-decoration: underline;
	font-weight: bold;
}
/* https://www.w3schools.com/css/css_navbar.asp */

.hero-bg {
	/* changes the hero background colour to a gradient */
	background-image: linear-gradient(
		to bottom right,
		var(--darkpurple),
		var(--purple)
	);
	display: grid;
	/* hero display */
	justify-content: start;
	padding: 2em;
	align-items: center;
	/* how the content is placed on the hero */
}

.heroimg {
	/* style for the hero image */
	display: grid;
	place-items: center;
	max-width: 500px;
	padding: 2em;
	text-align: center;
	padding-left: 4em;
}

footer {
	background-image: linear-gradient(to right, var(--darkpurple), var(--purple));
	/* sets footer background colour gradient */
	color: var(--white);
	/* text colour */
	padding: 20px;
	margin-top: 2em;
	/* changes padding */
}

.wrapper {
	/* wrapper that gose around the second row on the project pages to fix the padding and margins */
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	/* how many times the columns are repeated */
	gap: 1em;
	/* column gaps */
	padding: 1em;
	width: 100%;
	margin: auto;
	align-items: center;
}

.grid {
	/* grid alignment style */
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* how many times the columns are repeated */
	gap: 1em;
	/* the gap between the columns */
	padding: 1em;
	width: 100%;
	margin: auto;
	align-items: center;
}

.card {
	/* container for overlay */
	position: relative;
	overflow: hidden;
}

.card img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transition: 0.5s ease;
}

.card:hover img {
	/* changes the size of the image well hovering */
	transform: scale(1.15);
}

.overlay {
	/* image overlay style while hovering */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--white);
	backdrop-filter: blur(2px);
	/* blurs the image under the overlay */
	color: var(--black);
	display: grid;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: 0.5s ease;
	/* hover tranistion style */
	/* overlay text style */
	font-family: "arvo", "bree serif", Georgia, "Times New Roman", Times, serif;
	font-size: 2.5em;
	text-align: center;
	font-weight: bold;
	padding: 10px;
}

.card:hover .overlay {
	opacity: 0.65;
	/* changes the overlay opacity */
}

/* icon btn */
.icon-btn {
	background-color: var(--darkpurple);
	color: var(--white);
	border: none;
	/* removes border */
	cursor: pointer;
	font-size: 50px;
	/* icon size */
	transition: 0.5s ease;
	/* transition */
	line-height: 2em;
}

.icon-btn:hover {
	color: var(--greyishpurple);
	/* changes to dark purple while hovering */
}

/* icon btn */

.adobe-icon {
	/* how the images for the adobe icons are styled in the design projects pages */
	padding-top: 1.5em;
	padding-left: 20px;
	display: grid;
	justify-content: left;
	align-items: center;
}

.icon-grid {
	/* grid style for the program icons */
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	width: 100%;
	justify-content: left;
	align-items: center;
}

@media (max-width: 850px) {
	/* anything you only want applied at mobile sizes can go here */

	.grid {
		/* changes the grid to 1 column at smaller screen size */
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 1em;
		padding: 1em;
		width: 100%;
		margin: auto;
		align-items: center;
	}

	.card {
		position: relative;
		overflow: hidden;
	}

	.card img {
		width: 100%;
		height: 100%;
		display: block;
		object-fit: cover;
		transition: 0.5s ease;
	}

	.card:hover img {
		transform: scale(1.15);
	}

	.overlay {
		/* adjusting the overlay for smaller screen size */
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: var(--white);
		backdrop-filter: blur(2px);
		color: var(--black);
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transition: 0.5s ease;
		font-family: "arvo", "bree serif", Georgia, "Times New Roman", Times, serif;
		font-size: 2.5em;
		text-align: center;
		font-weight: bold;
		padding: 10px;
	}

	.card:hover .overlay {
		opacity: 0.65;
	}

	.heroimg {
		/* adjusting hero settings for smaller size */
		display: grid;
		place-items: center;
		max-width: 500px;
		padding: 2em;
		text-align: center;
	}
}

/* MOBILE */

@media (max-width: 390px) {
	/* anything you only want applied at mobile sizes can go here */

	.grid {
		/* changes the grid to 1 column at smaller screen size */
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 1em;
		padding: 1em;
		width: 100%;
		margin: auto;
		align-items: center;
	}

	.card {
		position: relative;
		overflow: hidden;
	}

	.card img {
		width: 100%;
		height: 100%;
		display: block;
		object-fit: cover;
		transition: 0.5s ease;
	}

	.card:hover img {
		transform: scale(1.15);
	}

	.overlay {
		/* adjusting the overlay for smaller screen size */
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: var(--white);
		backdrop-filter: blur(2px);
		color: var(--black);
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transition: 0.5s ease;
		font-family: "arvo", "bree serif", Georgia, "Times New Roman", Times, serif;
		font-size: 2em;
		text-align: center;
		font-weight: bold;
		padding: 10px;
	}

	.card:hover .overlay {
		opacity: 0.65;
	}

	.heroimg {
		/* adjusting hero settings for smaller size */
		display: grid;
		place-items: center;
		max-width: 500px;
		padding: 1em;
		text-align: center;
	}

	.nav {
		/* navigation bar style on home page */
		margin: 0.5em;
		font-family: "arvo", "bree serif", Georgia, "Times New Roman", Times, serif;
		/* font stack */
		background-color: var(--white);
		/* nav background colour*/
		height: 50px;
		/* nav bar height */
		align-items: center;
		/* how the items are aligned */
	}

	ul {
		/* how the buttons on the navigatio bar are styled */
		list-style-type: none;
		margin: 0;
		overflow: hidden;
		background-color: var(--white);
		display: block;
		text-align: center;
		margin-right: 2em;
	}

	.project-nav {
		/* navigation bar style on project pages */
		margin: 0.5em;
		font-family: "arvo", "bree serif", Georgia, "Times New Roman", Times, serif;
		/* font stack */
		background-color: var(--white);
		/* nav background colour*/
		height: 50px;
		/* nav bar height */
		align-items: center;
		/* how the items are aligned */
		margin-bottom: 1.5em;
	}

	ul li a {
		/* default state */
		display: block;
		color: var(--darkpurple);
		/* changes colour*/
		text-align: center;
		padding: 10px;
		text-decoration: none;
		font-weight: bold;
		/* changes font weight to bold */
		font-size: 16px;
		cursor: pointer;
		/* changes the cursor to pointer */
		transition: 0.5s ease;
		/* transition animation while hovering */
	}

	.adobe-icon {
		/* how the images for the adobe icons are styled in the design projects pages */
		padding-top: 1.5em;
		padding-left: 10px;
		display: grid;
		justify-content: left;
		align-items: center;
	}

	footer {
		background-color: var(--darkpurple);
		/* sets footer background colour */
		color: var(--white);
		/* text colour */
		padding: 20px;
		margin-top: 2em;
		/* changes padding */
	}
}