* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Segoe UI', sans-serif;
	text-decoration: none;
	list-style-type: none;
	scroll-behavior: smooth;
}

a {
	color: rgb(47, 112, 25);
}

body {
	position: relative;
	width: 100%;
	height: 100vh;
	background: rgba(40, 40, 40, 0.1);
}

#logo {
	width: 3rem;
	padding-top: 3rem;
	transition: 0.5s;
	filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(247deg)
		brightness(104%) contrast(101%);
}

@keyframes logoHoverColor {
	from {
		filter: invert(83%) sepia(40%) saturate(3422%) hue-rotate(1deg)
			brightness(105%) contrast(89%);
	}

	to {
		filter: invert(83%) sepia(40%) saturate(3422%) hue-rotate(1deg)
			brightness(105%) contrast(89%);
	}
}

#logo:hover {
	animation: 0.5s ease-in-out forwards logoHoverColor;
	transform: scale(130%);
}

/* HAMBURGER */
.hamburger {
	position: absolute;
	top: 50vh;
	right: -2.3125rem;
	z-index: -1;
	background-color: rgba(65, 65, 65, 0.9);
	height: 2.1875rem;
	width: 2.3rem;
	border-radius: 0 0.5rem 0.5rem 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.3125rem;
	cursor: pointer;
	padding: 0.3125rem;
	transition: 0.5s;
}

.hamburger:hover {
	transform: scale(120%) translateX(0.2rem);
}

.toggle-function-sb {
	transform: translate(13.75rem, 0);
	transition: ease-out 0.5s;
}

/* MENU */
nav {
	width: 13.75rem;
	height: 100vh;
	background-color: rgba(88, 88, 88, 0.9);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	transition: 0.5s;
	z-index: 10;
	position: fixed;
	left: -13.75rem;
	color: rgb(255, 255, 255);
}

nav ul {
	list-style-type: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}

li {
	width: auto;
}

li a {
	font-size: 1.1rem;
	cursor: pointer;
	padding: 1.25rem 0.9375rem;
	transition: ease-in-out 0.5s;
	color: rgb(255, 255, 255);
}

li a:hover {
	color: rgb(241, 196, 15);
	padding-bottom: 0.5rem;
	border-bottom: 0.25rem rgb(241, 196, 15) solid;
	transition: 0.5s;
	letter-spacing: 0.1rem;
	font-weight: 600;
}

/* SOCIAL MEDIA */
.social-media-icons {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.25rem;
	padding: 1.25rem 0;
}

.social-media-icons a {
	color: rgb(255, 255, 255);
	font-size: 1.5rem;
	transition: 0.5s;
}

.social-media-icons a:hover {
	color: rgb(241, 196, 15);
	transform: scale(135%);
}

/* HEADER */
header {
	width: 100vw;
	height: 100vh;
	display: grid;
	justify-content: space-between;
	align-items: end;
	overflow: hidden;
	z-index: 2;
}

.header-clone {
	position: absolute;
	z-index: 1;
	top: 0rem;
}

.jumbotron {
	padding: 2rem;
	width: 100vw;
	height: 100vh;
	background-image: url(../Images/Profile_picture.jpeg),
		linear-gradient(to top, rgb(40, 40, 40), rgb(40, 40, 40));
	background-blend-mode: lighten;
	background-position: right;
	background-repeat: no-repeat;
	background-size: auto 100vh;
	z-index: 3;
	animation: 1s ease-in-out fade-in;
}

.header-clone .jumbotron {
	background-color: rgb(40, 40, 40);
	background-image: url(../Images/Profile_picture.jpeg),
		linear-gradient(to top, rgba(241, 196, 15, 0.1), rgba(241, 196, 15, 0.1));
}

.greetings {
	position: relative;
	bottom: 11rem;
	padding-left: 12.5vw;
	display: flex;
	flex-direction: column;
	color: rgb(255, 255, 255);
	z-index: 4;
	opacity: 0;
	animation: 1s ease-in-out 1s forwards slide-in-left;
}

.greetings span:first-child {
	font-size: 1.2rem;
}

.greetings span:nth-child(2) {
	font-size: 3.25rem;
}

.greetings span:nth-child(3) {
	font-size: 2.25rem;
}

/* ABOUT */

#about {
	padding: 7rem 2rem 15rem 2rem;
	width: 100vw;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* font-size: 1.2rem; */
	background: rgba(40, 40, 40, 0.5);
	color: rgb(255, 255, 255);
}

#about div {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	/* align-items: center; */
	align-self: center;
	gap: 0.25rem;
	width: 75vw;
	padding-bottom: 1rem;
	/* font-size: 1.2rem; */
}

#about div p {
	font-size: 1.2rem;
}

/* .accent {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1.35rem;
  color: rgb(112, 25, 25);
} */

/* SERVICES */

#services {
	position: relative;
	bottom: 9rem;
	background-color: rgb(255, 255, 255);
	border-radius: 2rem;
	display: grid;
	grid-template:
		'des hr1 dev hr2 ia' auto
		'desdt hr1 devdt hr2 iadt' auto
		'desst hr1 devst hr2 iast' auto / 1fr auto 1fr auto 1fr;
	border: 2px solid rgb(25, 25, 25);
	margin: 0 1rem;
	padding: 0 2rem;
	gap: 0.75rem 2rem;
	text-align: center;
	box-shadow: 7.5px 7.5px 5px rgba(40, 40, 40, 0.5);
}

#des {
	grid-area: des;
}

#desdt {
	grid-area: desdt;
}

#desst {
	grid-area: desst;
}

#dev {
	grid-area: dev;
}

#devdt {
	grid-area: devdt;
}

#devst {
	grid-area: devst;
}

#ia {
	grid-area: ia;
}

#iadt {
	grid-area: iadt;
}

#iast {
	grid-area: iast;
}

.hr1 {
	grid-area: hr1;
}

.hr2 {
	grid-area: hr2;
}

.info-container i {
	display: flex;
	margin-bottom: 1.75rem;
	font-size: 2.5rem;
}

.info-container > * {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0.5rem 0;
}

.info-container h1 {
	font-size: 1.7rem;
}

.info-container p {
	font-size: 1.2rem;
}

.skill-tools {
	padding-bottom: 2rem;
}

.skill-tools p {
	margin: 0;
}

.summary {
	padding-top: 1.5rem;
}

/* MY WORKS */

.section-title {
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: space-between;
	flex-wrap: wrap;
	text-align: center;
	gap: 0.5rem;
	padding-bottom: 1.5rem;
}

.section-title h1 {
	text-transform: capitalize;
	font-size: 1.7rem;
}

.section-title p {
	font-size: 1.2rem;
}

.section-title p a:hover {
	font-size: 1.3rem;
	transition: 0.25s;
}

#my-works {
	position: relative;
	display: flex;
	transform: translateY(-3rem);
	height: auto;
	width: 100vw;
	flex-direction: column;
	gap: 5rem;
	padding: 0 1.5rem;
	z-index: 1;
}

.card-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* 2 cards per row */
	gap: 1.5rem; /* Adjust gap between cards */
}

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: rgb(40, 40, 40);
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	border: 2px solid rgb(25, 25, 25);
	border-radius: 1rem;
	box-shadow: 7.5px 7.5px 5px rgba(40, 40, 40, 0.5);
}

.card-image {
	object-fit: contain;
	object-position: center;
	width: 100%;
	scale: 1.15;
	transition: opacity 0.25s, scale 0.35s;
	border-radius: 1rem;
}

.card:hover .card-image {
	opacity: 0.45;
	scale: 1;
}

.card-body {
	width: 85%;
	aspect-ratio: inherit;
	position: absolute;
	padding: 3.125rem;
	color: rgb(255, 255, 255);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 1rem;
	justify-content: space-around;
	border-radius: 1rem;
	transition: 0.25s;
}

.card-body a {
	color: inherit;
	align-self: flex-end;
	justify-self: baseline;
	transition: 0.25s;
}

.card-body a:hover {
	font-size: 1.3rem;
}

.fa-arrow-right {
	transform: translateY(0.2rem) rotate(-45deg);
}

.card-body::before {
	content: '';
	position: absolute;
	inset: 20px;
	border: 2px solid rgb(255, 255, 255);
	opacity: 0;
	scale: 1.25;
	transition: opacity 0.25s, scale 0.25s;
	border-radius: 0.75rem;
}

.card:hover .card-body::before {
	opacity: 1;
	scale: 1;
}

.card-title {
	font-size: 1.7rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-shadow: 1px 1px 10px rgba(40, 40, 40, 0.5);
	opacity: 0;
	transition: opacity 0.5s, scale 0.5s;
}

.card-description {
	font-size: 1.2rem;
	opacity: 0;
	transition: opacity 0.5s, scale 0.5s;
}

.card:hover :is(.card-description, .card-title) {
	opacity: 1;
	translate: 0;
}

/* GET IN TOUCH */

#get-in-touch {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 15rem 2rem 7rem 2rem;
	background: rgba(40, 40, 40, 0.5);
	color: rgb(255, 255, 255);
	margin-top: -10rem;
}

#get-in-touch h1 {
	font-size: 1.7rem;
	letter-spacing: 1px;
	text-transform: capitalize;
	text-shadow: 1px 1px 10px rgba(40, 40, 40, 0.5);
}

#get-in-touch p {
	font-size: 1.2rem;
	width: 75vw;
}

.mail-button {
	background-color: rgba(40, 40, 40, 0.1);
	border-radius: 3px;
	border: 1px solid rgba(40, 40, 40, 0.5);
	box-shadow: rgba(40, 40, 40, 0.75) 2px 2px 1px 0 /* inset */;
	color: rgb(255, 255, 255);
	cursor: pointer;
	display: inline-block;
	font-family: -apple-system, system-ui, 'Segoe UI', 'Liberation Sans',
		sans-serif;
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.15385;
	margin: 2rem 0 0 0;
	outline: none;
	padding: 8px 0.8em;
	position: relative;
	text-align: center;
	text-decoration: none;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	vertical-align: baseline;
	white-space: nowrap;
	transition: 0.15s;
}

.mail-button:hover,
.mail-button:focus {
	background-color: rgba(47, 112, 25, 0.95);
	color: rgb(255, 255, 255);
	scale: 1.05;
	box-shadow: rgba(40, 40, 40, 0.75) 5px 5px 3px 0 /* inset */;
}

.mail-button:focus {
	box-shadow: 0 0 0 2px rgba(40, 40, 40, 0.75);
}

.mail-button:active {
	background-color: rgba(47, 112, 25, 0.5);
	box-shadow: none;
	color: rgb(255, 255, 255);
}

/* FOOTER */

footer {
	position: relative;
	background-color: rgb(40, 40, 40);
	color: rgb(255, 255, 255);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 2rem;
	gap: 1.5rem;
	align-items: center;
}

footer a {
	color: rgb(255, 255, 255);
	font-size: 1.5rem;
	transition: 0.5s;
}

.social-media-icons a:hover {
	color: rgb(241, 196, 15);
	transform: scale(135%);
}

/* MEDIA BREAKPOINT */

/* CONTAINERS */

/* COMPUTER */
@media screen and (min-width: 851px) {
	.greetings {
		bottom: calc(5rem + 12.5vw);
	}

	.card-body {
		width: 100%;
	}
}

@media screen and (max-width: 670px) {
	/* HEADER */
	.greetings {
		bottom: 11rem;
		padding-right: 2rem;
	}
}

/* PHONES */
@media screen and (max-width: 850px) {
	html {
		font-size: 12px;
	}
}

/* PHONES */
@media screen and (orientation: portrait) and (max-width: 650px) {
	html {
		font-size: 12px;
	}

	#logo {
		width: 2rem;
		padding: 1.25rem 0rem;
	}

	/* HAMBURGER */
	.hamburger {
		top: 25.6875rem;
		left: 80%;
		border-radius: 0 0 0.5rem 0.5rem;
	}

	.hamburger:hover {
		transform: scale(120%) translateY(0.2rem);
	}

	.toggle-function-dd {
		transform: translate(0, 25.6875rem);
		transition: 0.5s;
	}

	/* MENU */
	nav {
		height: 25.6875rem;
		width: 100vw;
		gap: 1.25rem;
		padding: 0.9375rem 1.25rem;
		left: 0;
		top: -25.6875rem;
	}

	nav ul {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 1.25rem 0;
		border-radius: 0 0 1.25rem 1.25rem;
	}

	li {
		text-align: center;
		width: 90vw;
	}

	/* HEADER */
	.jumbotron {
		background-color: rgb(40, 40, 40);
		background-image: url(../Images/Profile_picture_circle.png),
			linear-gradient(to top, rgb(40, 40, 40), rgb(40, 40, 40));
		background-position: center;
		background-position-y: max(10vh);
		background-repeat: no-repeat;
		background-size: contain;
	}

	.greetings {
		bottom: calc(13rem + 12.5vw);
		padding-right: 2rem;
	}

	/* ABOUT */

	#about {
		padding: 5rem 2rem 13rem 2rem;
	}

	#about div {
		width: auto;
	}

	/* SERVICES */
	#services {
		grid-template:
			'des' auto
			'desdt' auto
			'desst' auto
			'hr1' auto
			'dev' auto
			'devdt' auto
			'devst' auto
			'hr2' auto
			'ia' auto
			'iadt' auto
			'iast' auto / 1fr;
	}

	/* MY WORKS */

	.card-body {
		width: 100%;
	}

	.card-container {
		grid-template-columns: 1fr;
	}

	/* GET IN TOUCH */
	#get-in-touch p {
		width: auto;
		text-align: justify;
	}

	/* FOOTER */
	footer {
		flex-direction: column;
	}

	footer .social-media-icons {
		padding: 0 0 0 0;
	}
}

/* TABLETS */
@media screen and (orientation: portrait) and (min-width: 700px) and (max-width: 800px) {
	/* HEADER */
	.jumbotron {
		padding: 2rem;
		background-color: rgb(40, 40, 40);
		background-image: url(../Images/Profile_picture_circle.png),
			linear-gradient(to top, rgb(40, 40, 40), rgb(40, 40, 40));
		background-position: center;
		background-position-y: max(10vh);
		background-repeat: no-repeat;
		background-size: contain;
	}

	.greetings {
		bottom: 17rem;
		padding-right: 2rem;
	}

	/* GET IN TOUCH */
	#get-in-touch p {
		width: 70vw;
	}
}

/* Reduced Motion Media Query */
@media (prefers-reduced-motion) {
	.js-scroll {
		opacity: 1;
	}
	.scrolled {
		animation: none !important;
	}
}

/**Styling scrollable elements*/

.js-scroll {
	opacity: 0;
	transition: opacity 500ms;
}

.js-scroll.scrolled {
	opacity: 1;
}

.scrolled.fade-in {
	animation: fade-in 1s ease-in-out both;
}

.scrolled.fade-in-bottom {
	animation: fade-in-bottom 1s ease-in-out both;
}

.scrolled.slide-left {
	animation: slide-in-left 1s ease-in-out both;
}

.scrolled.slide-right {
	animation: slide-in-right 1s ease-in-out both;
}

@keyframes slide-in-left {
	0% {
		-webkit-transform: translateX(-100px);
		transform: translateX(-100px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slide-in-right {
	0% {
		-webkit-transform: translateX(100px);
		transform: translateX(100px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes fade-in-bottom {
	0% {
		-webkit-transform: translateY(50px);
		transform: translateY(50px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}