:root {
  --primary: #226ce0;
  --primary-hover: rgb(27.9738095238, 94.75, 199.4261904762);
  --on-primary: #fbfcff;
  --accent: #ed254e;
  --on-accent: #fbfcff;
  --decor: #8390fa;
  --gradient: linear-gradient(90deg, #226ce0, #8390fa);
  --tech-dx11: #439b6a;
  --tech-opengl: #22e097;
  --tech-ue5: #e04e22;
  --tech-custom-engine: #e047ff;
  --tech-d3d12: #5bc0eb;
  --tech-vulkan: #a41e22;
  --tech-cpp: #0f73c0;
  --tech-hlsl: #884cd8;
  --tech-glsl: #5586a4;
  --tech-niagara: #ff00bf;
  --tech-python: #e0b423;
  --tech-rust: #dea584;
  --surface: rgb(20, 20, 22);
  --surface-raised: rgb(29.7142857143, 29.7142857143, 32.6857142857);
  --surface-overlay: rgb(39.4285714286, 39.4285714286, 43.3714285714);
  --text: #fbfcff;
  --text-muted: rgb(181.7, 182.4, 185.1);
  --text-faint: rgb(130.88, 131.36, 133.84);
  --border: rgb(34.5714285714, 34.5714285714, 38.0285714286);
  --border-strong: rgb(49.1428571429, 49.1428571429, 54.0571428571);
  --box-shadow: rgb(13.9285714286, 13.9285714286, 15.3214285714);
  --box-shadow-strong: rgb(7.8571428571, 7.8571428571, 8.6428571429);
  --link: #8390fa;
  --font-sans: Lato, sans-serif;
  --weight-thin: 100;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-bold: 700;
  --weight-black: 900;
}

.lato-black, .lato-black-italic, .lato-bold, .lato-bold-italic, .lato-regular, .lato-regular-italic, .lato-light, .lato-light-italic, .lato-thin, .lato-thin-italic {
  font-family: var(--font-sans);
  font-style: normal;
}

.lato-thin, .lato-thin-italic {
  font-weight: var(--weight-thin);
}

.lato-light, .lato-light-italic {
  font-weight: var(--weight-light);
}

.lato-regular, .lato-regular-italic {
  font-weight: var(--weight-regular);
}

.lato-bold, .lato-bold-italic {
  font-weight: var(--weight-bold);
}

.lato-black, .lato-black-italic {
  font-weight: var(--weight-black);
}

.lato-thin-italic {
  font-style: italic;
}

.lato-light-italic {
  font-style: italic;
}

.lato-regular-italic {
  font-style: italic;
}

.lato-bold-italic {
  font-style: italic;
}

.lato-black-italic {
  font-style: italic;
}

[data-theme=light] {
  --surface: rgb(230.6, 236.7, 255);
  --surface-raised: #fbfcff;
  --surface-overlay: #fbfcff;
  --text: rgb(20, 20, 22);
  --text-muted: rgb(89.3, 89.6, 91.9);
  --text-faint: rgb(147.05, 147.6, 150.15);
  --border: rgb(205.1, 217.575, 255);
  --border-strong: rgb(169.4, 190.8, 255);
  --box-shadow: rgb(196.8571428571, 196.8571428571, 202.1428571429);
  --box-shadow-strong: rgb(196.8571428571, 196.8571428571, 202.1428571429);
  --link: #226ce0;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --surface: rgb(230.6, 236.7, 255);
    --surface-raised: #fbfcff;
    --surface-overlay: #fbfcff;
    --text: rgb(20, 20, 22);
    --text-muted: rgb(89.3, 89.6, 91.9);
    --text-faint: rgb(147.05, 147.6, 150.15);
    --border: rgb(205.1, 217.575, 255);
    --border-strong: rgb(169.4, 190.8, 255);
    --box-shadow: rgb(196.8571428571, 196.8571428571, 202.1428571429);
    --box-shadow-strong: rgb(196.8571428571, 196.8571428571, 202.1428571429);
    --link: #226ce0;
  }
}
html {
  scrollbar-color: var(--border-strong) transparent;
  scrollbar-width: thin;
}

body {
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.scroll-area {
  position: absolute;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 90%;
  width: 70em;
  margin-inline: auto;
  padding-inline: 2em;
}

.section {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}

.section#projects {
  flex-wrap: wrap;
}

h1 {
  font-weight: var(--weight-light);
  text-align: center;
}

#welcome {
  flex-direction: column;
  align-items: center;
}
#welcome h1 {
  font-weight: var(--weight-light);
  font-size: 3em;
}
#welcome img {
  width: 300px;
  max-width: 80%;
  border-radius: 50%;
  box-shadow: 0px 0px 24px var(--box-shadow);
}
#welcome .sub {
  font-weight: var(--weight-regular);
  font-size: 24px;
  text-align: center;
  margin-top: 0;
  color: var(--text-muted);
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
}
#welcome .sub .kw {
  font-weight: var(--weight-black);
  color: transparent;
  -webkit-text-fill-color: transparent;
}
#welcome .sub .conj {
  font-style: italic;
}
#welcome .current {
  margin: 6px 0 36px;
  font-size: 15px;
  font-weight: var(--weight-light);
  text-align: center;
  color: var(--text-muted);
}
#welcome .current .kw {
  color: var(--text);
  font-weight: var(--weight-regular);
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background: var(--surface-raised);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  margin: 20px 20px;
  max-width: 80%;
  width: 17em;
  height: auto;
  min-height: 22em;
  padding: 18px;
  box-shadow: 0px 0px 6px var(--box-shadow-strong);
  transition: background-color 0.25s;
}
.card .image {
  display: block;
  justify-content: center;
  width: 100%;
  height: 10em;
}
.card .image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  cursor: zoom-in;
  transition: all 0.25s ease;
}
.card .image img.expanded {
  position: fixed;
  inset: 0;
  margin: auto;
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  z-index: 1000;
  cursor: zoom-out;
}
.card .info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  padding: 0;
  margin: 0;
}
.card .info h4 {
  font-weight: var(--weight-bold);
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 30px;
  padding: 0;
  margin: 0;
}
.card .info h3 {
  font-weight: var(--weight-regular);
  margin: 18px 0px;
}
.card .info p {
  color: var(--text-muted);
  font-weight: var(--weight-light);
}
.card .info p:last-child {
  margin-top: auto;
}

.card:hover {
  background-color: var(--surface-overlay);
}
.card:hover .info h4 {
  padding: 6px;
}

.tech_labels {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 8px;
  margin-top: 18px;
}

.tech {
  display: inline-flex;
  width: -moz-fit-content;
  width: fit-content;
  transition: 0.25s;
  white-space: nowrap;
}

.card:hover .tech[data-tech=dx11] {
  background: #439b6a;
  color: var(--surface-overlay);
}

.card:hover .tech[data-tech=opengl] {
  background: #22e097;
  color: var(--surface-overlay);
}

.card:hover .tech[data-tech=ue5] {
  background: #e04e22;
  color: var(--surface-overlay);
}

.card:hover .tech[data-tech=custom-engine] {
  background: #e047ff;
  color: var(--surface-overlay);
}

.card:hover .tech[data-tech=d3d12] {
  background: #5bc0eb;
  color: var(--surface-overlay);
}

.card:hover .tech[data-tech=vulkan] {
  background: #a41e22;
  color: var(--surface-overlay);
}

.card:hover .tech[data-tech=cpp] {
  background: #0f73c0;
  color: var(--surface-overlay);
}

.card:hover .tech[data-tech=hlsl] {
  background: #884cd8;
  color: var(--surface-overlay);
}

.card:hover .tech[data-tech=glsl] {
  background: #5586a4;
  color: var(--surface-overlay);
}

.card:hover .tech[data-tech=niagara] {
  background: #ff00bf;
  color: var(--surface-overlay);
}

.card:hover .tech[data-tech=python] {
  background: #e0b423;
  color: var(--surface-overlay);
}

.card:hover .tech[data-tech=rust] {
  background: #dea584;
  color: var(--surface-overlay);
}

a,
.label {
  color: var(--link);
}

.muted {
  color: var(--text-muted);
}

.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
}
.btn-primary:hover {
  background: var(--primary-hover);
}

.btn-secondary {
  background: transparent;
  color: var(--link);
  border: 0.5px solid var(--link);
}

.badge--building {
  background: var(--accent);
  color: var(--on-accent);
}

.headline span {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tech[data-tech=dx11] {
  color: var(--tech-dx11);
}

.tech[data-tech=opengl] {
  color: var(--tech-opengl);
}

.tech[data-tech=ue5] {
  color: var(--tech-ue5);
}

.tech[data-tech=custom-engine] {
  color: var(--tech-custom-engine);
}

.tech[data-tech=d3d12] {
  color: var(--tech-d3d12);
}

.tech[data-tech=vulkan] {
  color: var(--tech-vulkan);
}

.tech[data-tech=cpp] {
  color: var(--tech-cpp);
}

.tech[data-tech=hlsl] {
  color: var(--tech-hlsl);
}

.tech[data-tech=glsl] {
  color: var(--tech-glsl);
}

.tech[data-tech=niagara] {
  color: var(--tech-niagara);
}

.tech[data-tech=python] {
  color: var(--tech-python);
}

.tech[data-tech=rust] {
  color: var(--tech-rust);
}

@media (max-width: 1100px) {
  .main {
    max-width: 70%;
  }
  .card {
    min-height: auto;
    max-width: -moz-fit-content;
    max-width: fit-content;
  }
  .card .image {
    height: auto;
  }
}/*# sourceMappingURL=palette.css.map */