:root {
	--oxford-blue-color-h: 217;
	--oxford-blue-color-s: 96%;
	--oxford-blue-color-l: 11%;

	--charcoal-color-h: 219;
	--charcoal-color-s: 23%;
	--charcoal-color-l: 27%;

	--lavender-blush-color-hsl: 333, 21%, 92%;
	--indian-yellow-color-hsl: 35, 67%, 57%;
	--cool-gray-color-hsl: 219, 18%, 60%;

	--bg-primary-color: hsl(var(--oxford-blue-color-h), var(--oxford-blue-color-s), var(--oxford-blue-color-l));
	--bg-secondary-color: hsl(var(--charcoal-color-h), var(--charcoal-color-s), var(--charcoal-color-l));
	--txt-primary-color: hsl(var(--cool-gray-color-hsl));
	--txt-secondary-color: hsl(var(--lavender-blush-color-hsl));
	--accent-color: hsl(var(--indian-yellow-color-hsl));

	--font-sans-serif: 'Poppins', sans-serif;
	--font-mono: 'Roboto Mono', monospace;
	--font-size: 1.2em;

	--body-bg-color: var(--bg-primary-color);
	--body-txt-color: var(--txt-primary-color);

	--box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
	--box-shadow-light: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;

	--app-padding: 400px;
	
	--section-padding: 8rem 0;
	--section-title-gap: 3rem;
	--section-title-size: clamp(26px,5vw,32px);

	--list-item-padding: 1.6rem;
	--rounded-radius: 5px;
	--list-item-gap: 1.7rem;
	--list-icon-gap: .7rem;
}

* {
	margin: 0;
	padding: 0;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {
	width: 100%;
	height: 100%;
	background-color: var(--body-bg-color);
	color: var(--body-txt-color);
	font-family: var(--font-sans-serif);
	font-size: var(--font-size);
	position: relative;
	overflow-x: hidden;
}

img {
	max-width: 100%;
}

a {
	text-decoration: none;
	color: inherit;
}

a:hover,
a:focus,
a:active {
	transition: color 1.2s;
	color: var(--accent-color);
}

a,
a:hover,
a:focus,
a:active {
	outline: none;
}

ul {
	list-style: none;
}

section {
	padding: var(--section-padding);
}
section,
footer {
	width: 100%;
	position: relative;
}
footer {
	padding: 4rem 0;
}

.highlight,
h1,h2,h3,h4,h5,h6 {
	color: var(--txt-secondary-color);
}

section > .section-title {
	text-align: center;
	font-size: var(--section-title-size);
	cursor: pointer;
	margin-bottom: var(--section-title-gap);
	position: relative;
}
section > .section-title::after {
	content: '#';
	margin-left: 10px;
	color: var(--txt-primary-color);
	position: absolute;
}

.image-bg {
	max-width: 100%;
	width: 100%;
	height: auto;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.button {
	display: inline-block;
	padding: .8rem 1.4rem;
	color: var(--accent-color);
	background-color: transparent;
	border: 1.5px solid var(--accent-color);
	border-radius: var(--rounded-radius);
}
.button:hover {
	transition: background-color .5s, border-color .5s;
	color: var(--accent-color);
	background-color: hsla(var(--indian-yellow-color-hsl), .3);
	border-color: hsla(var(--indian-yellow-color-hsl), .3);
}

.tech-stack {
	padding: 0 !important;
	list-style: none !important;
	font-family: var(--font-mono);
	column-gap: 1.3rem !important;
	font-size: smaller;
}
.tech-stack,
.icon-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--list-icon-gap);
}
.icon-links a {
	display: contents;
}

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

.list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--list-item-gap);
	position: relative;
}
.list .item {
	display: list-item;
}

#announcement {
	font-size: .85em;
	color: white;
	width: 100%;
	padding: .4rem 1rem;
	text-align: center;
	background-color: var(--accent-color);
}
#announcement a {
	color: var(--bg-primary-color) !important;
}

/* APP */
#app {
	width: 100%;
	height: 100%;
	padding: 0 var(--app-padding);
}
/* END APP */

#fixed-links {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: .9rem;
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	left: 20px;
	z-index: 1;
}

/* HEADER */
#header {
	padding: 1.6rem 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#header > .logo img {
	width: 60px;
}
#header .menu {
	display: none;
}
#header > .navigation .close {
	display: none;
}
#header > .navigation ul {
	display: flex;
	align-items: center;
	gap: var(--list-item-gap);
}
/* END HEADER */

/* INTRODUCTION */
#introduction {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
#introduction > h1 {
	font-size:  clamp(40px, 7vw, 80px);
	line-height: 1.1;
}
#introduction > h1:nth-child(2) {
	width: 100%;
	max-width: 1000px;
	color: var(--txt-primary-color);
	margin-bottom: 25px;
}
#introduction > p {
	width: 100%;
	max-width: 700px;
	margin-bottom: 40px;
}
#introduction > div {
	display: flex;
	flex-wrap: wrap;
	gap: 25px;
}
/* END INTRODUCTION */

/* ABOUT ME */
#about-me {
	display: flex;
	flex-direction: column;
}
#about-me > .detail {
	display: flex;
	gap: 70px;
}
#about-me > .detail > .description p {
	margin-bottom: 20px;
}
#about-me > .detail > .description ul {
	font-family: var(--font-mono);
	list-style: square;
	padding-left: 20px;
}
#about-me > .detail > .description > div {
	display: flex;
	column-gap: 30px;
}
#about-me #profile-pic {
	height: 420px;
	position: relative;
	display: block;
	border-radius: var(--rounded-radius);
	transform: translateY(-10px);
	box-shadow: var(--box-shadow);
	background-image: url('/assets/images/mr687-pic.webp');
}
#about-me #profile-pic::after {
	content: '';
	width: 100%;
	height: 100%;
	background-color: hsla(var(--indian-yellow-color-hsl), .7);
	border-radius: var(--rounded-radius);
	position: absolute;
	top: 0;
	left: 0;
	transition: background-color .5s;
}
#about-me #profile-pic:hover::after {
	background-color: transparent;
}
/* END ABOUT ME */

/* EXPERIENCE */
#experience > .works {
	display: flex;
	gap: 2rem;
}
#experience .tabs {
	display: flex;
	flex-direction: column;
}
#experience .tabs .item {
	width: 200px;
	padding: .8rem 1rem;
	cursor: pointer;
	border-left: 2.3px solid transparent;
	transition: border-left .5s ease-in-out;
}
#experience .tabs .item:hover {
	border-left: 2.3px solid var(--accent-color);
}
#experience .tabs .item.active {
	border-left: 2.3px solid var(--accent-color);
	background-color: hsl(217, 96%, 9.5%);
}
#experience .detail .item {
	display: none;
}
#experience .detail .item.active {
	display: block;
}
#experience .detail .item ul {
	margin-top: 20px;
	list-style: square;
	padding-left: 20px;
}
/* END EXPERIENCE */

/* PROJECT */
#project > .list {
	display: flex;
	flex-direction: column;
	gap: 130px;
}
#project > .list > .item {
	position: relative;
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(12, 1fr);
}
#project > .list > .item:nth-child(odd) .featured-detail .tech-stack {
	justify-content: end;
}
#project > .list > .item:nth-child(odd) .featured-detail div:nth-child(1) {
	line-height: 10px;
}
#project > .list > .item:nth-child(odd) .featured-detail {
	grid-column: 7 / -1;
	text-align: right;
}
#project > .list > .item:nth-child(odd) .featured-img {
	grid-column: 1 / 8;
}
#project > .list > .item .featured-img {
	min-height: 370px;
	cursor: pointer;
	position: relative;
	box-shadow: var(--box-shadow);
	grid-area: 1 / 6 / -1 / -1;
}
#project > .list > .item .featured-detail .links a {
	display: block;
}
#project > .list > .item:nth-child(odd) .featured-detail .links {
	justify-content: end;
}
#project > .list > .item .featured-detail .links {
	margin-top: 25px;
	display: flex;
	gap: 20px;
}
#project > .list > .item .featured-detail {
	position: relative;
	grid-area: 1 / 1 / -1 / 7;
}
#project .featured-detail p {
	background-color: var(--bg-secondary-color);
	border-radius: var(--rounded-radius);
	padding: var(--list-item-padding);
	margin: 25px 0;
	box-shadow: var(--box-shadow-light);
	transition: transform .5s ease-in-out, box-shadow .5s ease-in-out;
}
#project .featured-detail p:hover {
	transform: translateY(-10px);
	box-shadow: var(--box-shadow);
}
#project .featured-img::after {
	content: '';
	width: 100%;
	height: 100%;
	background-color: hsla(var(--indian-yellow-color-hsl), .7);
	border-radius: var(--rounded-radius);
	top: 0;
	left: 0;
	position: absolute;
	transition: background-color .5s;
}
#project .featured-img:hover::after {
	background-color: transparent;
}
/* END PROJECT */

/* PACKAGES */
#packages .list > .item {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	padding: var(--list-item-padding);
	background-color: var(--bg-secondary-color);
	border-radius: var(--rounded-radius);
	transition: transform .5s, box-shadow .5s;
}
#packages .list > .item:hover {
	transform: translateY(-10px);
	box-shadow: var(--box-shadow);
}
#packages .list > .item > .header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--list-item-gap);
	margin-bottom: 25px;
}
#packages .list > .item > .footer {
	margin-top: 10px;
}
/* END PACKAGES */

/* CONTACT */
#contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
#contact > p {
	width: 100%;
	margin-bottom: 40px;
	max-width: 600px;
}
/* ENDCONTACT */

/* FOOTER */
#footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
#footer > .links {
	display: flex;
	align-items: center;
	gap: 28px;
}
/* END FOOTER */

/* Smartphone screen */
@media (max-width: 768px) {
	body {
		--app-padding: 30px;
		--section-padding: 4rem 0;
		--section-title-gap: 2.4rem;
	}

	.button {
		padding: .6rem 1rem;
	}

	#app {
		padding-top: 140px;
	}

	#announcement {
		font-size: .8em;
		position: absolute;
		top: 100px;
	}

	#header {
		position: fixed;
		top: -1px;
		left: 0;
		right: 0;
		background-color: var(--bg-primary-color);
		z-index: 100;
		padding: 1rem 30px;
		box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
	}

	#header .navigation {
		display: none;
		position: fixed;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background-color: var(--bg-primary-color);
		z-index: 9;
		padding: 35px 50px;
	}
	#header .navigation .close {
		display: block;
		text-align: right;
	}
	#header .navigation ul {
		margin-top: 30px;
		flex-direction: column;
		align-items: flex-end;
		gap: 3rem;
	}
	#header .navigation ul li {
		font-size: 2em;
	}
	#header .menu {
		display: block;
	}

	section .section-title {
		text-align: left;
	}

	#introduction > h1 {
		font-size:  clamp(12px, 7vw, 80px);
	}
	#introduction > div {
		gap: 15px;
	}
	
	#introduction > div,
	#experience > .works{
		flex-direction: column;
	}

	#experience .tabs {
		flex-wrap: nowrap;
		flex-direction: row;
		overflow-x: auto;
	}
	#experience .tabs .item {
		border-left: none !important;
		border-bottom: 2.3px solid transparent;
		width: auto;
	}
	#experience .tabs .item.active {
		border-bottom: 2.3px solid var(--accent-color);
	}

	#project > .list {
		gap: var(--list-item-gap);
	}
	#project > .list > .item .featured-detail .links {
		display: none;
	}
	#project > .list > .item:nth-child(odd) .featured-detail {
		text-align: left;
	}
	#project > .list > .item:nth-child(odd) .featured-detail .tech-stack {
		justify-content: start;
	}
	#project .featured-detail {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 1.2rem;
		grid-column: 1 / -1 !important;
	}
	#project .featured-detail p {
		padding: 0;
		background-color: transparent;
	}
	#project .featured-img {
		opacity: 0.2;
		grid-column: 1 / -1 !important;
	}
}

@media (max-width: 820px) {
	#about-me > .detail {
		flex-direction: column;
	}	
}

/* Tab Screen */
@media (min-width: 769px) {
	body {
		--app-padding: 45px;
		--section-padding: 4rem 0;
		--section-title-gap: 2.4rem;
	}
	#header .navigation {
		display: block !important;
	}
}

/* Laptop Screen */
@media (min-width: 1024px) {
	body {
		--app-padding: 70px;
		--section-padding: 6rem 0;
		--section-title-gap: 3.2rem;
	}
}

/* Desktop Screen */
@media (min-width: 1280px) {
	body {
		--app-padding: 120px;
		--section-padding: 7rem 0;
		--section-title-gap: 4.4rem;
	}
	#fixed-links {
		display: flex;
	}
}

/* Large Desktop Screen */
@media (min-width: 1440px) {
	body {
		--app-padding: 20%;
		--section-padding: 9rem 0;
		--section-title-gap: 5.6rem;
	}
}