@font-face {
  font-family: "Julius Sans One";
  src: url("/fonts/julius-sans-one-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Tulpen One";
  src: url("/fonts/tulpen-one-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --page-bg: #161616;
  --surface: #202020;
  --surface-2: #212121;
  --surface-3: #2a2a2a;
  --surface-4: #343434;
  --surface-5: #373737;
  --surface-border: #262626;
  --text: #ffffff;
  --muted: #aaa;
  --accent: #f0782d;
  --container-width: 1440px;
  --title-font: "Tulpen One", "Arial Narrow", sans-serif;
  --display-font: "Julius Sans One", "Segoe UI", sans-serif;
  --ui-font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --card-font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  color: var(--text);
  font-family: var(--ui-font);
  background-color: var(--page-bg);
  background-image: url("/images/background.png");
  background-position: center 140px;
  background-repeat: no-repeat;
}

body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #000;
}

body::-webkit-scrollbar {
  width: 8px;
  scrollbar-width: thin;
  background-color: #000;
}

body::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #333;
  outline: #000 solid 1px;
}

body.is-lightbox-open {
  overflow: hidden;
}

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

button,
input,
textarea {
  font: inherit;
}

*:not(input):not(textarea) {
  caret-color: transparent;
}

[hidden] {
  display: none !important;
}

.page-shell {
  width: min(100%, var(--container-width));
  margin: 0 auto;
}

.showcase,
.about,
.contact {
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
}