/* ========== MOBILE FIRST DESIGN ==========
- My base design is on 360x800px and will cover Extra small devices (phones, 600px and down)
- This design will be made responsive with media breakpoints implemented at bottom of CSS to adjust to larger phones, tablets and desktop/laptops */

/* ========== IMPORTED FONT STYLES ==========
- From Google fonts (Poppins, Inter & Roboto */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

/* ========== GLOBAL STYLE DEFAULT FOR BOX PROPERTIES ========== */
* {
	box-sizing: border-box;
	margin: 0;
}

/* BASE FONT STYLING - For body */
body {
	font-family: Inter, Roboto, Poppins, Arial, Helvetica, sans-serif;		/* Default will be Poppins + fall back fonts added */
	font-size: 1rem;		/* 1rem = 16px */
}

/* ========== VARIABLES (For my customised properties) ========== */
:root {
	/* Background colour */
	--color-background-light: #98b9f233;

	/* Primary colours */
	--color-primary-dark: #141b41;
	--color-primary: #306bac;

	/* Secondary colours */
	--color-secondary: #6f9ceb;
	--color-secondary-light: #92b8ef;

	/* Accent colours */
	--color-accent: #918ef4;
	--color-accent-bright: #00ecae;

	/* Button state colours */
	--btn-default: #98b9f2;
	--btn-hover: #6f9ceb;
	--btn-cta: #00ecae;

	/* Colours for different link states (for burger menu nav dropdown) */
	--menu-current: #918ef4;
	--menu-link: #e0dfff;
}

/* ==================== LAYOUT BLOCKS ==================== */
.responsive-container {			/* REUSABLE RESPONSIVE CONTAINER */
	width: 100%;
	min-width: 350px;
	max-width: 1200px;
	margin: 0 auto;			
	padding: 0 1rem;
}

header {			/* HEADER */
	position: sticky;
	top: 0;
	width: 100%;
	min-width: 360px;
	height: 5rem;
	background-color: var(--color-primary-dark);
	border-bottom: ridge 2px var(--color-primary);
	z-index: 1000;
	margin: 0 auto;
}

.header__container {		/* HEADER CONTAINER: For components = site brand (logo + title) + navigation menu/links */
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-width: 360px;
	width: 100%;
	padding: 1rem 1.5rem;
	margin: 0 auto;
}

/* ==================== COMPONENTS + ELEMENTS STYLING ==================== */

.header__brand-wrapper {		/* HEADER BRAND WRAPPER = for logo + title */
	display: flex;
	align-items: center;
	min-width: fit-content;
	gap: 1rem;
}

.site-logo {
	width: 44px;
	height: 44px;
}

.portfolio-title {
	font-size: 1rem;
	text-transform: uppercase;
	color: white;
}

nav {
	display: flex;
	justify-content: flex-end;
	align-items: baseline;
	max-width: fit-content;
	position: relative;
}

.checkbox-toggle {
	position: absolute;
	opacity: 0;
	min-width: 50px;
	min-height: 50px;
	z-index: 3;
}

.toggle-icons {
	position: relative;
	width: 50px;
	height: 50px;
}

.menu-icon,
.close-icon {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	z-index: 2;
	color: white;
	transition: 0.5s;
}

#checkbox-toggle:not(:checked) ~ .toggle-icons .menu-icon {			/* By default, when the burger menu toggle is NOT CHECKED, it will display the burger menu 'menu icon' */
	opacity: 1;
}

#checkbox-toggle:checked ~ .toggle-icons .close-icon {			/* When the burger menu toggle is CHECKED, it will display the burger menu 'close icon' */
	opacity: 1;
}

.burger-menu__list {		/* The burger menu list acts as a nav menu, when the 'checkbox/burger menu toggle' is pressed then the nav menu will appear */
	display: flex;
	flex-direction: column;
	position: absolute;
	min-width: 280px;
	top: 100%;
	right: 0;
	list-style-type: none;
}

.burger-menu__list li:first-child {		/* Burger menu list label 'Explore my portfolio' styling */
	padding: 1rem;
	margin-top: 0.75rem;
	background-color: black;
	color: white;
	text-transform: uppercase;
	text-align: center;
}

.menu__link {
	display: flex;
	align-self: center;
	gap: 1rem;	
	padding: 1rem;
	width: 100%;
	color: black;
	text-transform: uppercase;
	border: solid 1px black;
	text-decoration: none;
}

.menu__link[aria-current="page"] {
	background-color: var(--menu-current);
	font-weight: 800;
	text-decoration: underline;
	font-size: 1.1rem;
}

.menu__link:link {
	background-color: var(--menu-link);
}

.nav__list-item i {
	margin-right: 0.5rem;
}

#checkbox-toggle:not(:checked) ~ .burger-menu__list {		/* By default, when the burger menu toggle is NOT CHECKED, it will not display the menu */
	display: none;
}

#checkbox-toggle:checked ~ .burger-menu__list {			/* When the burger menu toggle (in disguise of a checkbox) is pressed, it will show menu in top right below header */
	display: flex;
}


.skills__icon-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: fit-content;
}


.section__link-btn,
.submit-form-btn {
	display: flex;
	max-width: 280px;
	height: 50px;
	font-size: 1.1rem;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
	border-radius: 2rem;
	border-style: outset;
	border-color: var(--color-primary);
	border-width: 4px;
	font-weight: 700;
	background-color: var(--color-secondary-light);
	color: black;
	text-decoration: none;
	font-family: Poppins, Inter, Roboto, sans-serif;
	margin: 2rem auto 2rem auto;
	i {
		margin-left: 0.5rem;
	}
}

.footer-contact-btn,
.hero__btn--cta,
.download-cv-btn {
	display: flex;
	width: 280px;
	height: 50px;
	font-size: 1.1rem;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
	border-radius: 2rem;
	border-style: outset;
	font-family: Poppins, Inter, Roboto, sans-serif;
	color: black;
	font-weight: 700;
	text-decoration: none;
	margin: 2rem auto 2rem auto;
	background-color: var(--btn-cta);
	border-color: var(--btn-cta);
	border-width: 5px;
	i {
		margin-left: 0.5rem;
	}
}


section {
	padding-top: 3rem;
	padding-bottom: 3rem;
	i {						/* spacing for heading icons in sections titles */
		margin-right: 1rem;
	}
}

main > section:nth-child(2n) {			/* 2nd sections background colour */
	background-color: var(--color-background-light);
}

.hero__intro {
	font-size: 2rem;
	font-weight: 600;
	text-align: center;
	.hero__intro--bold {
		color: var(--color-secondary);
		font-weight: 800;
	}
}

.hero__sub-text {
	display: block;
	text-align: center;
	color: var(--color-primary-dark);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5rem;
		b {
			color: var(--color-primary);
			font-weight: 700;
		}
}

.hero__image-wrapper,
.about__image-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1rem;
}

.hero__profile-photo,
.about__profile-photo {
	width: 50%;
	max-width: 240px;
	object-fit: contain;
	/* BORDER STYLING + box shadow */
	border: 2px solid var(--color-accent);
	border-radius: 2rem;
	box-shadow: 0.5rem 0.5rem 0.5rem var(--color-accent);
}

.section__title-heading {		/* section title headings styling */
	font-family: Poppins, Inter, Arial, Helvetica, sans-serif;
	font-size: 2rem;
	font-weight: bold;
	color: var(--color-primary-dark);
	text-transform: uppercase;
	display: block;
	text-align: center;
	padding: 1rem 0;
}

/* Icons used from Font Awesome */
.section__title-heading > i {
	display: inline;
	color: var(--color-primary-dark);
	text-shadow: 0 0 3px var(--color-accent-bright), 0 0 4px var(--color-primary);
}

section h3 {		
	display: block;
	text-align: center;
	padding: 1rem;
	text-transform: uppercase;
	color: var(--color-primary);
	font-size: 1.2rem;
}

.about__list {
	list-style-type: none;
	line-height: 2rem;
	margin: 0 auto;
}

.skills__content > p {
	text-align: center;
}

.skills__languages {
	display: flex;
	flex-direction: row;
	flex-flow: wrap;
	justify-content: space-evenly;
	align-content: space-evenly;
	margin: 1rem auto 2rem auto;
	gap: 1rem;
	width: auto;
	max-width: 1200px;
}

.skills__item {
	height: 100px;
	padding: 0.5rem;
	justify-items: center;
}

.skills__item > img {
	max-width: 3rem;
	height: 3rem;
	padding: 0.25rem;
	background-color: var(--color-primary-dark);
	border-radius: 0.5em;
	border-style: outset;
	border-color: var(--color-primary-dark);

}

.skills__item--javascript > img {
	background-color: #F7DF1E;
	border-color: #F7DF1E;
}

.skills__label {
	font-family: Inter, Roboto, Poppins, sans-serif;
	font-weight: 600;
	color: var(--color-black);
	text-transform: uppercase;
	padding-top: 0.5rem;
}

.project__card-wrapper,
.career__card-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	gap: 1rem;
}

.project__card,
.career__card {
	border: solid 3px var(--color-primary-dark);
	border-style: ridge;
	border-radius: 1rem;
	display: block;
	justify-items: center;
	width: 100%;
	max-width: 280px;
	background-color: white;
	h3 {
		background-color: var(--color-accent-bright);
		border-top-left-radius: 1rem;
		border-top-right-radius: 1rem;
		color: var(--color-primary-dark);
		width: 100%;
	}
	img {
		object-fit: contain;
		border: solid 2px var(--color-primary-dark);
		width: 100%;
	}
	h4 {
		padding: 0.5rem;
		color: var(--color-primary);
	} 
	p {
		padding: 1rem;
	}
}

.bankwest-photo {
	border-radius: 50%;
	width: 100px;
}

.career__skills-tags {
	display: flex;
	flex-wrap: wrap;
	span {
		background-color: var(--color-secondary-light);
		border: solid 1px var(--color-primary);
		border-radius: 1rem;
		padding: 0.2rem;
		margin: 0.2rem;
		display: flex;
		flex-wrap: wrap;
		font-size: 0.8rem;
	}
}

.contact-landing-section p {
	text-align: center;
}

.socials-icons {
	display: flex;
	justify-content: center;
}

.socials-icons i {
	color: var(--color-primary-dark);
}

.copyright {
	padding: 1rem;
	margin: 0 auto;
	display: flex;
	justify-content: center;
}

.about-me__content h3 {
	font-size: 2rem;
}

.fun-fact-box-wrapper,
.hobby-box-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
}

.hobby-box {
	display: inline-block;
	border: solid 2px var(--color-primary);
	margin: 1rem;
	justify-content: space-evenly;
	align-items: center;
	box-shadow: 0 4px 8px 0 var(--color-secondary), 0 6px 20px 0 var(--color-secondary-light);
	img {
		object-fit: contain;
		width: 240px;
	}
}

.contact__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 2em;
	p {
		text-align: center;
	}
}

.contact__form-wrapper {
	border: solid 2px var(--color-primary-dark);
	background-color: var(--color-background-light);
	border-radius: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: fit-content;
	min-width: 250px;
	gap: 2rem;
	padding: 1rem;
	margin: 0 auto;
}

.contact-form {
	input {
		width: 100%;
		height: 44px;
		margin: 0 auto 2rem auto;
	}

	textarea {
		height: fit-content;
		width: 100%;
		margin-bottom: 3rem;
	}

	label {
	font-family: Inter, Poppins, Roboto, sans-serif;
	font-size: 1rem;
	}

	.required {
		color: red;
	}
}

/* ==================== MEDIA QUERIES ==================== */
/*- Breakpoints referenced from Ed Content resource - https://www.browserstack.com/guide/what-are-css-and-media-query-breakpoints */
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	.footer__socials {
		padding-bottom: 0;
	}
 
	.footer__socials > .responsive-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.socials-icons a {
		padding: 1rem;
		text-decoration: none;
		i {
		color: var(--color-primary-dark);
		}
	}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {


/* ==================== ANIMATIONS AND TRANSITIONS STYLES ==================== */

.wave-emoji {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 1rem;
}

.wave-emoji img {
	animation: wave 4s ease infinite;
}

@keyframes wave {
	0% { transform: rotate(0deg); }
	10% { transform: rotate(20deg); }
	20% { transform: rotate(-10deg); }
	30% { transform: rotate(20deg); }
	40% { transform: rotate(-10deg); }
	50% { transform: rotate(20deg); }
	60% { transform: rotate(-10deg); }
	70% { transform: rotate(20deg); }
	80% { transform: rotate(-10deg); }
	90% { transform: rotate(20deg); }
	100% { transform: rotate(0deg); }
}

@keyframes zoom-in {
	from {
		transform: scale(0.25);
	}
	to {
		transform: scale(1);
	}
}

.skydiving-photo {
	border: solid 2px var(--color-primary);
	box-shadow: 0 4px 8px 0 var(--color-secondary), 0 6px 20px 0 var(--color-secondary-light);
	animation: zoom-in 15s ease-in-out;
	max-width: 240px;
}
}