/*
	color palette
	pale cream	#F5ECE5 / 245, 236, 229		#E8D4C5 / 232, 212, 197
	grey		#7D7873 / 125, 120, 115		#7D7373 / 125, 115, 115
	dark grey	#363839 / 54, 56, 57		#EBEBEB / 235, 235, 235
	pink		#F5C6D0 / 245, 198, 208
	pink-orange	#C29584 / 194, 149, 132		#D8BBB0 / 216, 187, 176		#AF8677 / 175, 134, 119		#654F47 / 101, 79, 71		#896A5F / 137, 106, 95
	background	#F2F0EB / 242, 240, 235		#E1DCD1	/ 225, 220, 209		#E6E4E0 / 230, 228, 224		#B8B6B3 / 184, 182, 179
*/

@font-face {
	font-family: 'Satoshi';
	src: url(Satoshi_Complete/Fonts/OTF/Satoshi-Medium.otf);
	font-weight: normal;
}

@font-face {
	font-family: 'Satoshi';
	src: url(Satoshi_Complete/Fonts/OTF/Satoshi-Bold.otf);
	font-weight: bold;
}

@font-face {
	font-family: 'Satoshi';
	src: url(Satoshi_Complete/Fonts/OTF/Satoshi-MediumItalic.otf);
	font-style: italic;
}

/*hamburger menu hidden on desktop/large screens*/
.menu-toggle {
	display: none
}

html {
	scroll-behavior: smooth
}

section {
	padding: 20px 0;
	scroll-margin: 81px
}

body {
	font-family: 'Satoshi', Arial, sans-serif;
	background-color: #F2F0EB;
	color: #363839;
	font-size: 14px;
}

h1 {
	font-size: 48px;
	margin: 20px 0;
	font-weight: bold;
	text-align: center
}

h2 {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 20px;
}

h3 {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px
}

h4 {
	color: #896A5F;
	font-style: italic;
	margin-bottom: 10px
}

p {
	line-height: 1.25;
}

header {
	height: 60px;
	background-color: #F2F0EB;
	position: sticky;
	top: 0;
	z-index: 1;
	font-size: 16px;
	margin-bottom: 20px;
	border-bottom: 1px solid #B8B6B3;
	box-shadow: 0 0 25px rgba(184, 182, 179, 0.5);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 40px;
}

header a {
	color: #373738;
	position: relative;
	text-decoration: none;
}

em,
.nav-left a {
	background: linear-gradient(135deg, #896A5F, #C29584);
	background-clip: text;
	color: transparent;
}

.nav-left,
.nav-center,
.nav-right {
	display: flex;
	align-items: center;
	font-weight: bold;
}

.nav-left a {
	font-size: 24px;
	font-style: italic;
	text-shadow: 0 0 5px rgba(194, 149, 132, 0.5);
}

.nav-center a::after,
.nav-right a::after,
.menu-toggle a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -3px;
	width: 100%;
	height: 1px;
	background: #896A5F;
	transform: translateX(-50%) scaleX(0);
	transform-origin: center;
	transition: transform 0.15s ease;
}

.nav-center a:hover::after,
.nav-right a:hover::after,
.menu-toggle a:hover::after {
	transform: translateX(-50%) scaleX(1)
}

.nav-center {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	gap: 50px;
}

.container {
	margin: 0 auto;
	width: 940px;
}

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

.photo {
	border-radius: 50%;
	height: 175px;
	margin-bottom: 20px;
	box-shadow: 0 0 5px rgba(184, 182, 179, 0.5);
	transition: 0.15s ease;
}

.photo:hover {
	transform: scale(1.05);
}

.cv {
	display: flex;
	color: #896A5F;
	background: rgba(194, 149, 132, 0.1);
	border: 1px solid #C29584;
	border-radius: 999px;
	padding: 8px 10px;
	margin-bottom: 20px;
	transition: 0.15s ease;
	text-decoration: none;
	align-items: center
}

.cv:hover {
	transform: scale(1.05);
	box-shadow: 0 0 5px rgba(194, 149, 132, 0.5);
}

.cv img {
	width: 20px;
	margin-right: 5px;
}

.description {
	display: flex;
	align-items: stretch;
	text-align: justify;
	margin: 20px 0;
}

.desc-left,
.desc-right {
	flex: 1;
}

.desc-right {
	display: flex;
	align-items: center; /*vertical*/
	justify-content: center; /*horizontal*/
}

.desc-right img {
	width: 175px;
	height: auto;
    object-fit: contain;
}

.profile-table {
	background: #E6E4E0;
	border: 1px solid #B8B6B3;
	border-radius: 20px;
	border-collapse: separate;
	overflow: hidden;
	transition: 0.15s ease;
}

.profile-table td {
	padding: 10px;
	width: 313px;
}

.profile-table:hover,
.skill-card:hover,
.project-card:hover,
.timeline-item:hover {
	border: 1px solid #C29584;
	box-shadow: 0 0 5px rgba(194, 149, 132, 0.5);
}

.project-card {
	min-width: 275px;
	max-width: 275px;
}

.project-card img {
	width: 100%;
	border-radius: 10px;
	margin-bottom: 10px;
}

.project-card p {
	margin-bottom: 10px;
	text-align: justify;
}

.card-actions {
	margin-top: 10px;
	gap: 10px;
}

.tags,
.card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	align-content: flex-start;
}

.card-actions {
	gap: 10px
}

.card-actions a {
	color: #896A5F;
	display: inline-block;
}

.skill-grid,
.project-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.skill-card,
.project-card,
.timeline-item {
	flex: 1;
	padding: 15px;
	background: #E6E4E0;
	border: 1px solid #B8B6B3;
	border-radius: 20px;
	transition: 0.15s ease;
}

.skill-card span,
.project-card span {
	color: #896A5F;
	background: rgba(194, 149, 132, 0.1);
	border: 1px solid #C29584;
	border-radius: 999px;
	padding: 8px 10px;
	display: inline-block;
	white-space: nowrap;
	transition: 0.15s ease;
}

.skill-card span:hover,
.project-card span:hover {
	transform: scale(1.05);
	box-shadow: 0 0 5px rgba(194, 149, 132, 0.5);
}

.timeline {
	padding-left: 15px;
	margin-left: 15px;
	border-left: 2px solid #C29584;
	display: flex;
	flex-direction: column;
	gap: 10px
}

.timeline-item {
	position: relative;
}

/*dot for each timeline item*/
.timeline-item::before {
	content: "";
	position: absolute;
	left: -24.25px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: linear-gradient(135deg, #896A5F, #C29584);
	box-shadow: 0 0 5px rgba(194, 149, 132, 0.5);
}

.info {
	margin-left: 15px
}

footer {
	position: relative;
	height: 60px;
	margin-top: 20px;
	border-top: 1px solid #B8B6B3;
	box-shadow: 0 0 25px rgba(184, 182, 179, 0.5);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 40px
}

.social {
	display: flex;
	gap: 15px
}

.social a img {
	height: 35px;
	width: auto;
	transition: 0.15s ease;
}

.social a:hover img {
	transform: scale(1.05);
}

/*MEDIA QUERIES*/
@media (max-width: 1024px) {
	header,
	footer {
		padding: 0 30px;
	}

	.container {
		width: 93%;
	}

	.nav-center {
		gap: 25px;
	}

	.desc-right img {
		width: 175px;
		height: auto;
		object-fit: contain;
	}

	.skill-grid,
	.project-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		width: 100%;
	}

	.skill-card,
	.project-card {
		min-width: 0;
		max-width: none;
	}
}

@media (max-width: 768px) {
	.menu-toggle {
		display: block;
		position: relative;
		height: 22px;
		width: 20px;
		z-index: 1;
	}

	.menu-toggle em {
		color: #363839;
	}

	.menu-toggle a {
		color: #F2F0EB;
	}

	.menu-toggle a::after {
		background: #363839;
	}

	/*hamburger bars*/
    .menu-toggle span {
		position: absolute;
        display: block;
		left: 0;
        width: 25px;
        height: 3px;
		position: relative;
		z-index: 1;
        background: #363839;
        border-radius: 5px;
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
					background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
					opacity 0.5s ease;
		transform-origin: 2px 2px
	}

	.menu-toggle span:nth-child(2) {
		top: 0;
		transform-origin: right center;
	}

	.menu-toggle span:nth-child(3) {
		top: 6px;
	}

	.menu-toggle span:nth-child(4) {
		top: 12px;
		transform-origin: right center;
	}

	.menu-toggle input {
		display: block;
		position: absolute;
		width: 25px;
		height: 25px;
		top: -5px;
		left: -3px;
		opacity: 0;
		z-index: 2;
		cursor: pointer;
		-webkit-touch-callout: none;
	}

	.menu-toggle input:checked ~ .menu {
		transform: translateX(0);
	}

    /*X animation*/
	.menu-toggle input:checked ~ span:nth-child(4) {
		transform: rotate(45deg) translate(0px, 0);
		background: #F2F0EB;
	}

	.menu-toggle input:checked ~ span:nth-child(3) {
		opacity: 0;
		transform: scale(0.2)
	}

	.menu-toggle input:checked ~ span:nth-child(2) {
		transform: rotate(-45deg) translate(0px, 0);
		background: #F2F0EB;
	}

	.menu {
		position: fixed;
		top: 0;
		right: 0;
		width: 40vw;
		max-width: 200px;
		height: 100vh;
		background: #C29584;
		padding: 50px 20px 20px 20px;
		box-sizing: border-box;
		list-style: none;
		transform: translateX(100%);
		transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
		-webkit-font-smoothing: antialiased;
	}

	.menu li {
		margin: 20px 0;
		text-align: right;
	}

	.menu li label {
		cursor: pointer;
	}

	.nav-center,
	.nav-right {
		display: none
	}

	header,
	footer {
		padding: 0 20px;
		display: flex;
		justify-content: space-between;
		align-items: center
	}

	.description {
		flex-direction: column;
		gap: 20px;
	}
}

@media (max-width: 640px) {
	h1 {
		font-size: 40px;
	}

	h2 {
		font-size: 20px;
	}

	.profile-table {
		width: 100%;
	}

	/* Make each row a flex container */
	.profile-table tr {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}

	/* Base: each cell full width */
	.profile-table tr > td {
		flex: 0 0 100%;
		max-width: 50%;
		box-sizing: border-box;
	}

	/* First two cells share the row */
	.profile-table tr > td:nth-child(1),
	.profile-table tr > td:nth-child(2) {
		flex: 0 0 50%;
	}

	.skill-grid,
	.project-grid {
		display: grid;
		grid-template-columns: 1fr;
	}

	.skill-card,
	.project-card {
		min-width: 0;
		max-width: none;
	}

	footer {
		flex-direction: column;
		gap: 10px;
		padding: 20px 0;
		align-items: center; /*vertical*/
		justify-content: center; /*horizontal*/
	}
}

@media (max-width: 480px) {
	.profile-table,
	.profile-table tr,
	.profile-table td {
		display: block;
		min-width: 100%
	}

	.profile-table td {
		max-width: none;
	}
}