@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&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');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--border-100: #eee;
	--border-200: #ddd;
	--border-500: #555;
	--text-100: #000;
	--text-300: #222;
	--text-500: #444;
	--background-100: #fff;
	--active-control-background-color: #e4eaf5;
	--body-background-color: #f0f3f8;
	--header-background-color: #fff;
	--chip-background: #f5f5f5;
}

@media (prefers-color-scheme: dark) {
	:root {
		--border-100: #2f2d2d;
		--border-200: #2f3035;
		--border-500: #44474c;
		--text-100: #f5f5f5;
		--text-300: #ddd;
		--text-500: #bbb;
		--background-100: #151515;
		--active-control-background-color: #9db9ed;
		--body-background-color: #181c20;
		--header-background-color: #151515;
		--chip-background: #222;
	}
	a {
		color: #5494ee;
	}
}

body {
	font-family: "Inter", sans-serif;
	font-size: 0.95em;
	color: var(--text-100);
	background: var(--body-background-color);
}

#app {
	position: fixed;
	inset: 0;
	overflow-y: auto;

	>header {
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		z-index: 2;
		background: var(--header-background-color);
		border-bottom: 1px solid var(--border-200);

		.titlebar {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 8px;
			text-align: center;
			padding: 16px 8px;
			border-bottom: 1px solid var(--border-100);

			h2 {
				font-size: 0.95em;
				font-weight: 500;
			}

			i.fa-star {
				color: gold;
				cursor: pointer;
			}
		}

		.toolbar {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			gap: 8px;
			padding: 12px 8px;

			.group {
				display: flex;
				align-items: center;
				gap: 8px;

				button {
					width: 24px;
					height: 24px;
					border: none;
					background: transparent;
					font-size: 0.85em;
					border-radius: 8px;
					cursor: pointer;

					i.fa {
						color: var(--text-100);
					}

					&.active {
						background: var(--active-control-background-color);
						i.fa {
							color: #111;
						}
					}
				}
			}

			.seperator {
				width: 1px;
				height: 16px;
				background: var(--border-200);
				margin-inline: 4px;
			}
		}
	}
}

main {
	width: 100%;
	max-width: 800px;
	background: var(--background-100);
	margin-inline: auto;
	padding: 48px 32px;
	border: 1px solid var(--border-200);
	border-top: none;
	border-bottom: none;
}

section {
	margin-bottom: 64px;

	&:last-child {
		margin-bottom: 0;
	}

	>h2 {
		position: relative;
		font-size: 1.45em;
		margin-bottom: 8px;

		&:before {
			content: "#";
			color: var(--text-500);
			display: inline-block;
			margin-right: 4px;
		}
	}

	>p {
		color: var(--text-300);
		margin-bottom: 16px;
	}

	ul,
	ol {
		list-style: none;
	}
}

#hero {
	h1 {
		font-size: calc(1.55em + 0.5vw);
		margin-bottom: 8px;
	}

	ul {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;

		li a {
			border: 1px solid var(--border-500);
			padding: 4px 12px;
			border-radius: 16px;
			font-size: 0.95em;
			text-decoration: none;
			display: flex;
			align-items: center;
			gap: 5px;

			i.fa {
				font-size: 0.85em;
			}
		}
	}
}

#skills {
	ul {
		list-style: none;
		display: flex;
		gap: 8px;
		flex-wrap: wrap;

		li {
			border: 1px solid var(--border-500);
			padding: 4px 12px;
			border-radius: 16px;
			font-size: 0.95em;
			user-select: none;
			background: var(--chip-background);
		}
	}
}

#work-experience,
#education {
	ol {
		li {
			margin-block: 24px;

			&:first-child {
				margin-top: 4px;
			}

			.company-name-and-time {
				margin-bottom: 2px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				gap: 16px;

				h3 {
					font-size: 1.05em;
				}

				p {
					font-style: italic;
					font-size: 0.95em;
				}
			}

			h4 {
				font-size: 0.95em;
				font-weight: 500;
				margin-bottom: 8px;
			}

			ul {
				list-style: disc;
				padding-left: 20px;

				li {
					margin-block: 4px;
				}
			}
		}
	}
}

#projects {
	ul {
		li {
			margin-block: 16px;

			&:first-child {
				margin-top: 4px;
			}

			h3 {
				font-size: 1.05em;
				margin-bottom: 2px;

				i {
					font-weight: 400;
				}
			}

			p {
				margin-bottom: 2px;
			}
		}
	}
}


@media (max-width: 640px) {
	main {
		padding: 32px 16px;
	}

	header {
		.toolbar {
			.group {
				:nth-child(4) {
					display: none;
				}
			}
		}
	}
}