/* Declare variables and color scheme */
:root {
	--black: rgb(26, 26, 26);
	--white: rgb(230, 230, 230);
	--lightgray: rgb(190, 190, 190);
	--gray: rgb(150, 150, 150);
	--pink: rgb(255, 0, 115);
	--darkgray: rgb(70, 70, 70);
	--lightblack: rgb(34, 34, 34);
}

/* Reset some CSS */
* {
	margin: 0;
	padding: 0;
	color: var(--gray);
	font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
}

html {
	scroll-behavior: smooth;
	width: 100%;
}

body {
	background-color: var(--black);
	width: 100%;

	&.mobile-nav-open {
		overflow: hidden;
	}
}

main {
	width: 70%;
	max-width: 1000px;
	margin: auto;
	transition: 1s;
}

.wrapper {
	overflow: hidden;
	position: relative;
	width: 100%;
	margin: auto;
}

header,
footer,
section {
	z-index: 3;
}

/* Generic Classes and stylings */
.pink {
	color: var(--pink);
}

.white {
	color: var(--white);
}

.lightgray {
	color: var(--lightgray);
}

.gray {
	color: var(--gray);
}

span {
	color: var(--pink);
}

p {
	line-height: 1.5;
}

.hide {
	display: none !important;
}

.blur {
	filter: blur(10px) brightness(0.6);
}

/* Header and Nav */
header {
	width: 100%;
	height: 4rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	background-color: rgba(26, 26, 26, 0.8);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	box-shadow: 0px 2px 7px rgb(19, 19, 19);
}

.logo {
	height: 2.7rem;
	width: auto;
}

.logo-link {
	margin-left: 2rem;
	background-image: none;
}

/* Navigation */
.desktop-nav {
	margin-right: 3rem;

	a {
		padding: 10px 3px 10px;
	}

	span {
		margin-left: 10px;
		cursor: default;
	}
}

ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
}

.skill-list {
	gap: 8px;
	flex-direction: row-reverse;

	.skill-list-item {
		margin: 0;
		background-color: var(--darkgray);
		color: var(--lightgray);
		padding: 4px 8px;
		border-radius: 50px;
		line-height: 1;
		box-shadow: 0 0 4px var(--black);
	}
}

li {
	display: flex;
	align-items: baseline;
	margin: 0 5px;
}

a {
	transition: 0.5s;
	text-decoration: none;
	background-image: linear-gradient(var(--pink), var(--pink));
	background-size: 0% 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;

	&:hover {
		color: var(--pink);
		background-size: 100% 2px;
	}
}

.mobile-nav {
	display: none;
	cursor: pointer;

	&.active {
		.bar:nth-child(2) {
			opacity: 0;
		}

		.bar:nth-child(1) {
			transform: translateY(8px) rotate(45deg);
		}

		.bar:nth-child(3) {
			transform: translateY(-8px) rotate(-45deg);
		}
	}
}

.bar {
	display: block;
	width: 25px;
	height: 3px;
	margin: 5px auto;
	transition: 0.5s;
	background-color: var(--pink);
}

.nav-menu {
	&.active {
		right: 0;
	}
}

/* NAV Transition Effect */
nav {
	li:nth-child(1) {
		transition-delay: 0s;
	}

	li:nth-child(2) {
		transition-delay: 0.2s;
	}

	li:nth-child(3) {
		transition-delay: 0.4s;
	}

	li:nth-child(4) {
		transition-delay: 0.6s;
	}

	li:nth-child(5) {
		transition-delay: 0.8s;
	}
}

/* Social Media Links */
.social-media,
.email {
	position: fixed;
	width: 120px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	bottom: 0;
	transition-delay: 500ms;
}

.line {
	height: 100px;
	width: 1px;
	background-color: var(--gray);
}

.social-media {
	left: 0;

	svg {
		width: 20px;
		height: auto;
		fill: var(--gray);
		stroke: var(--gray);
		margin: 2rem;
		position: relative;
		transition: 0.5s;
	}

	a {
		color: var(--gray);
		transition: 0.5s;
		background-image: none;

		&:hover {
			transform: translate(0, -5px);
		}

		&:hover>svg {
			fill: var(--pink);
			stroke: var(--pink);
		}
	}
}

.email {
	right: 0;

	a {
		padding: 5px;
		background-image: none;
		transform: rotate(90deg);
		color: var(--gray);
		margin-bottom: 7.2rem;
		transition: 0.5s;

		&:hover {
			color: var(--pink);
			margin-bottom: 7.5rem;
		}
	}
}

/* Welcome Section */
#welcome-section {
	display: flex;
	align-items: center;
	height: 100svh;
	margin: auto;
}

.intro-text {
	margin-bottom: 3rem;

	h1 {
		font-size: 4.5rem;
		margin: 1rem 0;
		line-height: 1.3;
	}

	.hiddenL {
		&:nth-child(1) {
			transition-delay: 0s;
		}

		&:nth-child(2) {
			transition-delay: 0.2s;
		}

		&:nth-child(3) {
			transition-delay: 0.4s;
		}

		&:nth-child(4) {
			transition-delay: 0.6s;
		}
	}
}

.intro-p1 {
	font-size: 1.2rem;
}

.intro-bio {
	font-size: 1.1rem;
}

/* About Section */
#about-section {
	width: 90%;
	margin: 0 auto;

	h3 {
		text-decoration: underline;
		text-underline-offset: 0.5rem;
		margin-bottom: 0.5rem;
		text-decoration-color: var(--darkgray);
	}
}

h2 {
	font-size: 2rem;
	display: flex;
	align-items: flex-end;

	span {
		font-size: 1.6rem;
		margin-right: 10px;
	}

	.line {
		width: 200px;
		height: 1px;
		align-self: center;
		margin-left: 2rem;
		background-color: var(--darkgray);
	}
}

.about-block {
	margin-top: 3rem;
	display: flex;
	justify-content: center;

	* {
		transition-delay: 600ms;
	}

	a {
		transition-delay: 0ms;
	}
}

.about-text {
	width: 45%;
	margin-right: 5%;
}

/* Show more/less button and text */
.show-btn {
	appearance: none;
	background-color: transparent;
	border: none;
	border-radius: none;
	cursor: pointer;

	img {
		height: 0.8rem;
	}
}

.bio-extended {
	display: block;
}

.about-img {
	max-width: 40%;
	height: auto;

	img {
		max-width: auto;
		max-height: 20rem;
		border-radius: 10px;
		filter: saturate(0);
		transition: 0.5s;

		&:hover {
			filter: saturate(100%);
		}

		&:hover~#img-border {
			transform: translate(2%, -97%);
		}
	}
}

#img-border {
	position: absolute;
	width: 20rem;
	height: 20rem;
	border: 2px solid var(--pink);
	transform: translate(5%, -95%);
	border-radius: 10px;
	transition: 0.5s;
	z-index: -1;
	transition-delay: 0ms;
}

/* Skills Section */
#skills-section {
	width: 90%;
	margin: 7rem auto;
}

.skills-container {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	margin: 5rem auto;
	gap: 28px;

	img {
		height: 4rem;
		width: auto;
		filter: saturate(0) contrast(50%) invert(0) brightness(100%);
		transition: 0.5s;
		padding: 2rem;

		&:hover {
			filter: saturate(100%) contrast(100%) invert(0) brightness(100%);
			transform: scale(1.1);
		}
	}

	.js-icon {
		filter: saturate(0) contrast(50%) invert(0) brightness(80%);
	}

	.github-icon {
		filter: saturate(0) contrast(100%) invert(1) brightness(50%);

		&:hover {
			filter: saturate(100%) contrast(100%) invert(1) brightness(100%);
		}
	}
}

.skill-element {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Project Section */
#project-section {
	width: 100%;
	margin: 10rem auto;

	h2 {
		margin-bottom: 4rem;
	}
}

.featured-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 350px;
	margin-bottom: 7rem;
}

.featured-image {
	width: 60%;
	height: 100%;
	z-index: -1;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		filter: saturate(0) contrast(0.8);
		border-radius: 5px;
		transition: 0.5s;

		&:hover {
			filter: saturate(1) contrast(1);
		}
	}

	a:hover {
		transition: 1s;
	}
}

.featured-text {
	width: 40%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	text-align: end;

	>* {
		margin: 0.5rem 0;
	}

	h3 {
		color: var(--lightgray);
		font-size: 1.5rem;
	}

	li {
		font-family: monospace;
	}
}

.ft-text-left {
	align-items: flex-start;
	text-align: start;
}

.project-description {
	width: 110%;
	background-color: var(--lightblack);
	padding: 1rem;
	border-radius: 5px;
	z-index: 1;
	box-shadow: 0px 3px 7px rgb(19, 19, 19);
}

.project-links {
	display: flex;

	a {
		color: var(--lightgray);
		background-image: none;
		margin-left: 0.7rem;

		&:hover>svg {
			fill: var(--pink);
			stroke: var(--pink);
		}
	}

	svg {
		width: auto;
		height: 1.5rem;
		fill: var(--lightgray);
		stroke: var(--lightgray);
		transition: 0.5s;
	}
}

.btn-a {
	background-image: none;
	margin: 0 auto;
	display: block;
	text-align: center;
	width: fit-content;
}

.btn {
	cursor: pointer;
	border: solid var(--pink) 2px;
	background-color: var(--black);
	color: var(--pink);
	padding: 1rem;
	border-radius: 5px;
	transition: 0.3s;

	&:hover {
		background-color: rgba(255, 0, 115, 0.1);
	}
}

/* Contact Section */
#contact-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: auto;

	h2 {
		font-size: 2.5rem;
		margin: 1.5rem auto;
	}

	p {
		font-size: 1.1rem;
		text-align: center;
		line-height: 1.7;
	}

	a {
		margin: 5rem 5rem 10rem 5rem;
	}
}

/* Footer */
footer {
	text-align: center;
	font-size: 1rem;
	padding: 0.8rem;
}

.social-media-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: auto;
	width: 200px;
	display: none;

	svg {
		width: 20px;
		height: auto;
		fill: var(--gray);
		stroke: var(--gray);
		margin-bottom: 2rem;
		position: relative;
		transition: 0.5s;
	}

	a {
		color: var(--gray);
		transition: 0.5s;
		background-image: none;

		&:hover>svg {
			fill: var(--pink);
			stroke: var(--pink);
		}
	}
}

.footer-small {
	font-size: 0.8rem;
	opacity: 0.7;
	margin: 0.3rem;
}

/* Transition Effect Main Classes */
.hidden {
	opacity: 0;
	transition:
		filter 1s,
		transform 1s,
		opacity 1s,
		color 1s,
		background-size 0.5s,
		background-color 0.5s,
		box-shadow 1s;
	filter: blur(10px);
}

.hiddenL {
	transform: translateX(-90%) translateY(0);
}

.hiddenR {
	transform: translateX(90%) translateY(0);
}

.hiddenT {
	transform: translateX(0) translateY(-100%);
}

.hiddenB {
	transform: translateX(0) translateY(100%);
}

.visible {
	opacity: 1;
	filter: blur(0);
	transform: translateX(0) translateY(0);
}

/* MEDIA QUERIES */
@media screen and (max-width: 1150px) {
	main {
		width: 80%;
	}

	.email,
	.social-media {
		width: 80px;
	}
}

@media screen and (max-width: 1080px) {
	.intro-text h1 {
		font-size: 4rem;
	}

	.skills-container {
		width: 510px;
	}
}

@media screen and (max-width: 950px) {
	.about-text {
		width: 60%;
	}

	.about-img img,
	#img-border {
		width: 15rem;
		height: 15rem;
	}
}

@media screen and (max-width: 920px) {
	.intro-text h1 {
		font-size: 3.5rem;
	}

	#contact-section p {
		width: 25rem;
	}
}

@media screen and (max-width: 800px) {

	.email,
	.social-media {
		display: none;
	}

	.social-media-footer {
		display: flex;
	}

	main {
		width: 90%;
		max-width: 90%;
	}
}

@media screen and (max-width: 700px) {
	.intro-text h1 {
		font-size: 3rem;
	}

	nav li:nth-child(1),
	nav li:nth-child(2),
	nav li:nth-child(3),
	nav li:nth-child(4),
	nav li:nth-child(5) {
		transition-delay: 200ms;
	}

	.mobile-nav {
		display: block;
	}

	.nav-menu {
		position: fixed;
		right: -100%;
		top: 4rem;
		flex-direction: column;
		background-color: rgba(26, 26, 26, 0.8);
		width: 60%;
		height: calc(100svh - 4rem);
		transition: 0.5s;
		box-shadow: 0px 5px 10px rgb(19, 19, 19);
		padding-top: 50%;
		box-sizing: border-box;

		li {
			margin: 16px 3rem;
			justify-content: flex-start;
			width: fit-content;
		}
	}

	.intro-text .hiddenL {
		&:nth-child(1) {
			transition-delay: 200ms;
		}

		&:nth-child(2) {
			transition-delay: 400ms;
		}

		&:nth-child(3) {
			transition-delay: 600ms;
		}

		&:nth-child(4) {
			transition-delay: 800ms;
		}
	}

	.about-block {
		flex-direction: column-reverse;
	}

	.about-text,
	.about-img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}

	.about-img {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 4rem;

		img,
		#img-border {
			width: 20rem;
			height: 20rem;
		}

		img:hover~#img-border {
			transform: translate(3%, 3%);
		}
	}

	#img-border {
		transform: translate(5%, 5%);
	}
}

@media screen and (max-width: 600px) {
	.skills-container {
		width: 100%;
	}

	.intro-text h1 {
		font-size: 2.5rem;
	}

	#contact-section h2 {
		font-size: 2rem;
	}
}

@media screen and (max-width: 650px) {
	:root {
		font-size: 14px;
	}

	h2 .line {
		width: 100px;
		height: 1px;
		margin-left: 2rem;
	}

	.featured-container {
		width: 100%;
		margin-bottom: 5rem;
	}

	.featured-image {
		display: none;
	}

	.featured-text {
		width: 100%;
		align-items: flex-start;
		text-align: start;
		box-sizing: border-box;
		padding: 2rem;
		background-color: rgba(26, 26, 26, 0.8);
		border-radius: 5px;
	}

	.project-description {
		width: fit-content;
	}

	.intro-text h1 {
		font-size: 2rem;
	}
}

@media screen and (max-width: 400px) {
	.intro-text h1 {
		font-size: 1.8rem;
	}

	#contact-section {
		h2 {
			font-size: 1.5rem;
		}

		p {
			width: auto;
		}
	}

	h2 .line {
		display: none;
	}

	.about-img img,
	#img-border {
		width: 17rem;
		height: 17rem;
	}
}