@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;
	/* scroll-behaviour allow you to set a smooth scroll animation */
	/* cursor: url("/images/spark-cursor.png"), auto; */
}

/* body {
	cursor: none;
}
.cursor {
	width: 2em;
	height: 2em;
	position: absolute;
} */

.background-black {
	background-color: black;
	/* background-color allows you to adjust the colour of the background */
}
.header-right {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.5em;
	/* display is the property for which layout setting you want to apply */
	/* justify-content allows you to adjust the contents alignment */
	/* align-items allows you to align items in the x-axis  */
	/* padding adjusts the space around elements */
}

.round-corners {
	border-radius: 20px;
	border: solid black 1.5px;
}

.text-wrap-sm {
	margin-left: 2vw;
}

body-right {
	display: flex;
	justify-content: flex-start;
}
.header-left {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.header-text {
	font-size: 16px;
	padding: 1em;
	/* font-size adjusts the font size */
}

.footer-text {
	font-size: 16px;
	margin-top: 1em;
	margin-top: 1em;
}

.black-text {
	color: var(--black);
}
.white-text {
	color: var(--white);
	/* color adjusts the colour */
}

.card-link {
	position: relative;
	display: block;
}
.overlay2 {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	transition: all 400ms ease-in-out;
	opacity: 0;

	/* Optionally centre content using flexbox */
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* center items vertically */
	align-items: center;
	/* center items horizontally */
}

.card-link:hover .overlay2,
.card-link:focus .overlay2 {
	opacity: 1;
}

/* The purpose of this part is to darken the image behind the 
	text - it can be done other ways as well. */
.overlay-filter {
	transition: all 400ms ease-in-out;
}

.card-link:hover .overlay-filter,
.card-link:focus .overlay-filter {
	filter: brightness(0.2);
}

@media not all and (pointer: coarse) {
	/* This media query will only take effect if a device is not a touch screen. */
}

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

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

/* 
For example, you can add classes to the body tag on any page, and make rules specific to that page:
.homepage {
	background: red;
} */

/* //////////////////// Footer ///////////////// */

footer {
	background-color: black;
}

.header-start {
	display: flex;
	justify-content: start;
}

.align {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.margin-top {
	margin-top: 0.5em;
	/* margin-top changes the top space of an object */
}

.margin-top-hero {
	margin-top: 3em;
}
.margin-bottom {
	margin-bottom: 1em;
	/* margin-bottom changes the bottom space of an object */
}

.margin-bottom-project {
	margin-bottom: 1.5em;
}

.center-alignment {
	display: flex;
	justify-content: center;
	align-items: center;
}
.flex-end {
	display: flex;
	justify-content: end;
}

.margin-right {
	margin-right: 1em;
	/* margin-right allows you to change the space on the right side of an object */
}

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

.about-margin {
	margin-top: 2.5em;
	margin-bottom: 2.5em;
}

/* //////////////----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 */
	.secondary-menu {
		display: none;
	}
	.hamburger {
		position: absolute;
		z-index: 100;
		top: -0.5rem;
		right: 0;
		cursor: pointer;
		font-size: 16px;
		padding: 10px;
		border: 0 none;
		background-color: transparent;
		color: white;
	}

	.closeIcon {
		display: none;
	}

	.menu {
		position: fixed;
		transform: translateY(-100%);
		transition: transform 200ms;
		z-index: 99;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		text-align: left;
		background: black;
		color: white;
		list-style: none;
		padding-top: 4rem;
	}

	.showMenu {
		transform: translateY(0);
	}
	.showMenu,
	.hamburger {
		position: fixed;
		top: 1rem;
		right: 1rem;
	}
	.menuItem {
		display: block;
	}
	.material-icons {
		font-size: 60px;
	}
}

@media (min-width: 601px) {
	.primary-menu {
		display: none;
	}
}

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

@media (min-width: 390px) and (max-width: 900px) {
	.text-wrap-sm {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.margin-bottom {
		display: flex;
		justify-content: center;
		align-items: center;
		/* margin-bottom changes the bottom space of an object */
	}

	.footer-text {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 12px;
		margin-top: 1em;
		margin-top: 1em;
	}
}