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

/* //////////////////// Header ///////////////// */
header {
	background-color: var(--dark-blue);
	padding: 1em;
	font-family: "Bai Jamjuree", "Orbitron", sans-serif;
	font-weight: 500;
	position: relative;
	font-weight: bold;

	/* The background colour of the header uses the blue variable and padding adjusts the space for elements.
	The fonts used are Bai Jamjuree and have an increased weight. 
	The position keeps the header at the top of the pag for document flow. */
}
body {
	background-color: #d3e2ed;
}
/* ----------Style the navigation----------- */

nav a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* links for navigation are displayed in a flex box to appear beside each other. 
	They are aligned at the center and spacing distributes items evenly in the line  */
	padding: 1em;
	margin-right: 25px;
	/* The space around the text is increased and are have slighly more space along the right. 
	Ensures that they are not too close to the edge. */
	text-transform: uppercase;
	/* Text casing is changed to all caps */
}
nav ul {
	list-style-type: none;
	/* removes bullet points from lists */
}
.menuItem a {
	/* class for links on the header */
	color: white;
	text-decoration: none;
	/* Changes the color to white and removes the underline */
	gap: 25px;
	/* Adds a gap/space between each link */
	list-style: none;
	/* applies no style for links */
	display: flex;
	position: relative;
	flex-grow: unset;
	height: 100%;
	flex: 1 1 auto;
	/* Links are displayed in a flex box fto appear beside each other. Their position ensures that they
	stay together when the page width changes and their size does not change. */
}
.menuItem:hover,
.menuItem:focus {
	transform: scale(1.05);
	transition-duration: 300ms;
	transition: all 100ms ease-in-out;
	background-color: var(--blue);
	border-radius: 5px;
	/* during hover/active state, the font weight changes to bold with a background colour appearing
	behind text and the border radius rounds the corners. The time elements allow the actionsto happen smoothly */
}
.menuItem:active {
	background-color: var(--blue);
	/* background color changes to header color to allow text to be visible  */
	color: var(--dark-blue);
	/* during active state, the text colour changes to dark blue */
}

.menu li {
	display: inline-block;
	/* listed items inside menu class are displayed on a line with block properties such as width and padding */
}

.menu ul {
	justify-content: flex-end;
	/* listed items are  moved toward the end of the flex direction */
}
.primary-nav {
	display: flex;
	/* conatins items inside primary navigation in a flex box */
}
.push-outwards {
	justify-content: space-between;
	/* items are evenly distrubuted on a line*/
}

.logo {
	min-width: 250px;
	/* margin: 1rem; */
	/*flex-shrink: 0; */
	/* The size of the logo is changed to have a minimum width of 250px and spacing is increased so
	that it does not clash with menuItems. The logo also does not change size when between mobile and desktop */
}

.arrow {
	color: var(--dark-blue);
	text-decoration: none;
	vertical-align: text-top;
	/* changes the colour of arrow icons to dark blue and removes underlines appearing with linked text */
}

scroll-btn {
	scroll-behavior: smooth;
	/* allows for smooth scrolling to bottom of page when button is clicked. */
}

.material-symbols-outlined {
	font-variation-settings:
		"FILL" 0,
		"wght" 400,
		"GRAD" 0,
		"opsz" 24;
	/* styling for Google Icons */
}

/* Arranges three blocks of content to occupy a third of the width */

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

.hero {
	margin: 0.5rem 5vw 5rem 5vw;
	/* adjsusts the margin size for sections using class "hero" */
}
.about {
	margin: 2rem 5vw 5rem 5vw;
	display: flex;
	flex-wrap: wrap;
	/* adjusts marging for the about page and contains items in a flex box, allowing elements to appear beside each other
	on desktop and stacked for mobile */
}
.projects {
	margin: 0px 50px 50px 50px;
	/* margin values for sections using "projects" class */
}
.project-page {
	margin: 2rem 5vw 5rem 5vw;
	/* margin values for the project pages */
}
.project-section {
	margin-bottom: 75px;
	/* bottom marigin value for classes using "project-section" */
}
.project-nav {
	display: block;

	/* navigation for the project pages. Displays items on the same line, but spaced to appear
	on opposite ends. */

	/* ///////////////Hamburger Menu////////////////// */
}
.hamburger {
	/* position: fixed; */
	font-size: 24px;
	padding: 10px;
	/* font size and spacing is adjusted for mobile devices */
	border: 0 none;
	/* no border applied to menu, fills up the entire screen */
	background: none;
	color: white;
	/* text color is changed to white with no background */
	cursor: pointer;
	display: none;
	/* menu is turned off when page is opened */
	position: relative;
	/*keeps the menu in its original position  */
	z-index: 101;
	/* displays the menu over the page */
}
.hamburger .menuIcon {
	display: inline;
	/* displays hamburger menu */
}
.hamburger .closeIcon {
	display: none;
	/* makes the  the closeIcon (X) invisible */
}
.hamburger .menuIcon.hidden {
	display: none;
	/* hides the menuIcon when the hamburger menu is clicked  */
}
.hamburger .closeIcon.visible {
	display: inline;
	/* shows the closeIcon when the menu is opened */
}

.menu li {
	display: inline-block;
	/* listed items inside the menu appear inline with block properties */
}

.menu.showMenu {
	transform: translateY(0);
	/* Keeps the menu hidden until opened */
}

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

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

footer {
	background-color: black;
	padding: 4em;
	padding-top: 1em;
	color: white;
	text-align: center;
	/* Changes the background colour of the footer to dark blue variable and
	 increases the spacing for all sides. Text colour is changed to white and text is aligned at the center */
}
.social-media {
	display: flex;
	justify-content: center;
	gap: 1rem;
	/* class for social media section of footer. displays the items beside each other and aligns them 
	on the center */
}
.social-btn {
	align-content: center;
	width: 110px;
	height: auto;
	/* styling for the icons, size is decreased and is aligned in the center */
}

/* ///////////// Image Propertires ///////////// */
.icons {
	width: 110px;
	height: auto;
}
.portrait {
	border-radius: 10%;
}
img {
	width: 100%;
	height: auto;
	position: relative;

	/* for image, tags, allows them to scale proportionally and occupies their original positons when changing
	between devices  */
}
.img-button {
	display: block;
	position: relative;
	flex-shrink: 0;
	/* for linked iamges, allows them to scale proportionally when changing between devices */
}

.content-image {
	width: 100%;
	height: auto;
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	margin-bottom: -20%;
	/* properties for hero image below header on homepage.
	Allows to to scale proportionally when chagning window sizes */
}
project-image-centred {
	width: 100%;
	height: auto;
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	margin-bottom: -20%;
	/* allows images to scale proportionally and aligned in the center */
}
.end-logo {
	width: 150px;
	height: 150px;
	display: block;
	margin: 0 auto;
	margin-bottom: -2em;
	/* for the logo at the bottom of index.html. Decreases orginal size to fit the page and adjusts 
	spacing from the bottom */
}
.about-me-img {
	max-width: 100%;
	height: auto;
	border-radius: 5%;
}
.support-image {
	margin-top: 1.5em;
}
/* //////////Overlays/////////////// */
.overlay {
	display: none;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0;
	transition: 0.5s ease;
	/* container class for color overlays over images so that they appear directly on top, and is displayed during hover state. */
}
.overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(39, 121, 170, 1);
	/* applies a blue overlay over the images. */
	opacity: 0.75;
	/* opacity is set to 0.75 so that the image is still visible. */
}

.container:hover .overlay {
	opacity: 1;
	/* Ensures that the overlay is displayed during hover state */
}

.text {
	/* text styling for overlays */
	font-family: "Bai Jamjuree", "Orbitron", sans-serif;
	color: white;
	font-size: 64px;
	position: relative;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
	/* Displays the text on the center of the image overlay */
}
/* //////////////----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: 700px) {
	.hamburger {
		display: block;
		/* displays the hamburger menu as a block that takes up full width */
	}

	.menu {
		position: fixed;
		inset: 0;

		background: var(--dark-blue);
		/* applis a dark blue background to the menu */
		transform: translateY(-100%);
		/* the menu is displayed from the y axis after menuIcon is clicked */
		display: block;
		/* starts each item on a new line */
		padding-top: 5rem;
		/* the space around the top of the is increased to 5rem.
		seperates the space between the text and icon */
		z-index: 100;
		/* displays menu over the page */
	}
	.menu li {
		display: block;
	}

	.menu.showMenu {
		transform: translateY(0);
		transition: transform 200ms;
		/* controls the speed of when the menu is opened.
		Stopped it from suddenly flashing when window changed sizes */
	}

	/* anything you only want applied at mobile sizes can go here */
}

@media (min-width: 701px) {
	.menu {
		transform: none;
		transition: none;
		position: static;
		display: flex;
		/* changes the header to the hamburger menu after reaching its minimum width */
	}
	.primary-nav {
		display: flex;
		margin-right: 1em;
		/* Adjusts the spacing of the header text for desktop view */
	}
	.content-image {
		width: 100%;
		height: auto;
		position: relative;
		background-repeat: no-repeat;
		background-size: cover;
		margin-bottom: -10%;
		/* Adjusts the spacing of hero image on homepage for desktop and mobile */
	}
	.overlay {
		/* image overlays only appear at desktop view and are disabled at mobile view */
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		opacity: 0;
		transition: 0.5s ease;
	}
	.overlay::before {
		content: "";
		position: absolute;
		inset: 0;
		background-color: var(--dark-blue);
		opacity: 0.75;
	}

	.container:hover .overlay {
		opacity: 1;
	}

	.logo {
		min-width: 250px;
		margin-left: 3em;
		/* adjusts the spacing for the logo at the header for desktop and mobile views */
	}
	.projects {
		margin: 0px 5vw 100px 5vw;
		/* margin values for sections using "projects" class */
	}
	.project-page {
		margin: 100px 50px 100px 50px;
		/* spacing adjustment for project pages for desktop and mobile */
	}
	.project-nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1rem;
		margin-top: -3em;
		/* spacing for navigation buttons for project page are adjusted for desktop and mobile */
	}
	/* navigation for the project pages. Displays items on the same line, but spaced to appear
	on opposite ends. */
	.about {
		margin: 100px 50px 100px 50px;
		/* spacing for about page is adjusted for desktop and mobile */
	}
}

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