:root {
  --step-0: clamp(0.875rem, 0.6893rem + 0.7619vw, 1.375rem);
  --step-1: calc(1.2 * var(--step-0));
  --step-2: calc(1.44 * var(--step-0));
  --step-3: calc(1.728 * var(--step-0));
  --step-4: calc(2.0736 * var(--step-0));
  --step-5: calc(2.48832 * var(--step-0));
  --step-6: calc(2.985984 * var(--step-0));
}

body {
  /* From https://modernfontstacks.com */
  font-family: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
  font-size: var(--step-0);
}

h1 {
  font-size: var(--step-5);
}

h2 {
  font-size: var(--step-4);
}

h3 {
  font-size: var(--step-3);
}

h4 {
  font-size: var(--step-2);
}

h5 {
  font-size: var(--step-1);
}

h6 {
  font-size: var(--step-0);
}

body > * {
  box-sizing: border-box;
}

body > header {
  width: min(100%, 50em);
  margin: 0 auto 2em;
}

main {
  width: min(100%, 48em);
  margin: 1em auto;
  padding: 0 1rem;
}
main > h1 {
  margin-inline: -1rem;
}

/* Clearfix hack for inner floats */
main::after {
  content: "";
  clear: both;
  display: block;
}

.hero {
  max-width: max-content;
  margin: 0 auto 0.5em;
}
header:has(.hero) {
  background: linear-gradient(to bottom, var(--elite-teal), var(--verdant-forest));
  color: var(--bg);
  padding: 0.5em;
  border-bottom-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
  box-shadow: 0.2rem 0.2rem 0.5rem var(--verdant-forest);
}
.hero .hero-title {
  font-weight: bold;
  font-variant: small-caps;
  font-size: var(--step-6);
}
.hero .hero-subtitle {
  font-size: var(--step-2);
  text-align: center;
}

.topnav ul {
  list-style: none;
  display: flex;
  flex-flow: row nowrap;
  margin: 0 2rem;
  padding: 0;
}
.topnav ul li.right {
  margin-left: auto;
}
.topnav ul a {
  display: inline-block;
  color: currentColor;
  background-color: transparent;
  padding: 0.5em;
  transition: background-color 0.2s;
}
.topnav ul a:hover, .topnav ul a:focus {
  background-color: hsla(from currentColor h s l/25%);
}
.topnav ul a img, .topnav ul a svg {
  height: 1em;
}
.topnav ul li.zoom-icon img, .topnav ul li.zoom-icon svg {
  transform: scale(1.5);
}

body > footer {
  background-color: oklch(92% 0.003 12.1deg);
  width: max-content;
  max-width: 80vw;
  margin: 0.5em auto;
  font-size: 85%;
  padding: 1em 2em;
  border: 3px solid oklch(68.5% 0.003 12.1deg);
  border-radius: 1em;
}
body > footer p {
  margin-block: 0.5em;
}

main {
  background-color: oklch(from var(bg) l c h/20%);
  backdrop-filter: blur(5px);
  border-radius: 1em;
  border: 0.2em solid var(--verdant-forest);
}

a {
  color: var(--deep-navy);
}
a:visited {
  color: var(--verdant-forest);
}

h1, h2, h3, h4, h5 {
  color: transparent;
  background: linear-gradient(in oklch to right, var(--deep-navy), var(--verdant-forest));
  background-clip: text;
  width: fit-content;
  max-width: 90%;
}

h1 {
  --scale: 1.2;
  padding: 0.25em;
  margin: 0.5em 0;
  transform-origin: top left;
  scale: var(--scale) 1;
  max-width: calc(90% / var(--scale));
}

img {
  box-sizing: border-box;
}

.project-header {
  display: flex;
  flex-flow: row nowrap;
  align-items: baseline;
  gap: 0.5em;
}
.project-header h1 {
  flex-grow: 1;
}

.project-technologies {
  float: right;
  margin-left: 0.5em;
  border: 0.2em solid var(--million-grey);
  border-radius: 0.5em;
  padding: 1em;
  box-shadow: 0.25em 0.25em 0.25em var(--million-grey);
}
.project-technologies ul {
  margin: 0;
  padding-inline-start: 1em;
}

.project-screenshots {
  display: flex;
  flex-flow: row nowrap;
  height: 16em;
  gap: 0.5em;
  padding: 0.5em;
  overflow-x: scroll;
}
.project-screenshots a {
  box-sizing: border-box;
  display: block;
  flex: 0 0 auto;
  height: 100%;
  filter: contrast(50%) brightness(90%);
  transition: filter 0.2s;
}
.project-screenshots a:hover, .project-screenshots a:focus {
  filter: none;
}
.project-screenshots img {
  height: 100%;
  width: auto;
}

:root {
  --verdant-forest: oklch(45% 0.06 183deg);
  --elite-teal: oklch(30.6% 0.05 202deg);
  --million-grey: oklch(68.5% 0.003 12.1deg);
  --deep-navy: oklch(25% 0.1 264deg);
  --periwinkle: #ccccff;
  --van-dyke-brown: oklch(34.6% 0.023 48deg);
  --bg: oklch(92% 0.003 12.1deg);
}

body {
  background: url("/assets/images/geometric-leaves.png");
  color: oklch(34.6% 0.023 48deg);
}

/*# sourceMappingURL=style.css.map */