portfolio.css

:root {
	--c-bg: #363436;
	--c-highlight: #a9abaf;
	--c-main: #fff39e;
}

* {
	box-sizing: border-box;
}

html {
	background-color: var(--c-bg);
	overflow-y: scroll;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	transition: 0.2s;
}

canvas {
	display: block;
}

table {
	border: none;
	table-layout: fixed;
    width: 100%;
}

/* these text styles are set using divs */
h1, h2, h3, h4, p {
	font-style: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	font-size: inherit;
	margin: 0;
	padding: 0;
	font-family: "adobe-garamond-pro", "Times New Roman", serif;
	color: var(--c-main);
}

h1 {
	font-size: 6rem;
	font-weight: 400;
	font-style: normal;
}

h2 {
	font-size: 3rem;
	font-weight: 400;
	font-style: normal;
	color: var(--c-highlight);
}

p {
	font-size: 1.5rem;
	font-weight: 400;
	font-style: normal;
	color: var(--c-highlight);
}

.main {
	display: flex;
	flex-direction: row;
}

.left {
	margin: 2rem;
	flex: 1;
}

.left-text {
	margin-top: 2rem;
}

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

.right {
	flex: 4;
	margin: 5rem 2rem 2rem;
}

.projects-header {
	margin-left: 0rem;
}

.projects-wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.project {
	overflow: hidden;
}

.project img {
	width: 100%;
	border-radius: 2rem;
	padding: 1rem;
	object-fit: cover;
}

.project-closeup {
	width: 90%;
	aspect-ratio: 1/1;
	margin: 1rem;
	max-width: 800px;
	overflow: hidden;
	height: fit-content;
}

.project-closeup a {
	height: fit-content;
	width: fit-content;
}

.project-closeup img, .project-closeup canvas {
	width: 100%;
	border-radius: 1.5rem;
}