@charset "UTF-8";
html, body {
  font-size: 100%;
}

html {
  line-height: 1.5;
}

body {
  margin: 0;
  padding: 1.25rlh;
}
body[data-grid] {
  background-image: repeating-linear-gradient(rgba(255, 255, 255, 0.1) 0 0.5px, transparent 0.5px 0.5rlh);
}

pre {
  line-height: 1rlh;
  margin: 0.5rlh 0;
}

h1, h2, h3, h4, h5 {
  margin: 1.5rlh 0 0.5rlh;
  line-height: 1rlh;
}

h1 {
  font-size: 1.5rlh;
  line-height: 2rlh;
}

h2 {
  font-size: 1.125rlh;
  padding: 0.5rlh 0;
}

h3 {
  font-size: 1rlh;
  padding: 0.25rlh 0;
}

h4 {
  font-size: 0.875rlh;
  padding: 0.25rlh 0;
}

h5 {
  font-size: 0.625rlh;
  padding: 0.25rlh 0;
}

h6 {
  font-size: 0.5rlh;
  padding: 0.25rlh 0;
}

p, ul, ol {
  margin: 0.5rlh 0;
}

blockquote {
  margin: 0.5rlh 0 0.5rlh 2rlh;
}

p,
li,
dd,
dt {
  font-size: 0.75rlh;
  line-height: 1rlh;
}

blockquote {
  margin: 0.5rlh 0 0.5rlh 1.5rlh;
  opacity: 0.85;
  position: relative;
}
blockquote:before {
  line-height: 1rlh;
  font-size: 2rlh;
  content: "“";
  text-align: center;
  position: absolute;
  left: -1.5rlh;
  top: 0.5rlh;
  opacity: 0.5;
}

.avatar > img {
  display: block;
  float: left;
  width: 3rlh;
  height: 3rlh;
  border-radius: 3rlh;
  margin-right: 1rlh;
  margin-bottom: 0.5rlh;
}

.meta {
  font-size: 0.625rlh;
}

.credit {
  text-align: center;
  font-size: 0.625rlh;
  position: relative;
  top: -1rlh;
}

.project-thumbnail img {
  float: left;
  aspect-ratio: 240/135;
  height: 6rlh;
  margin-right: 1rlh;
  margin-bottom: 0.5rlh;
}
@media (max-width: 35rlh) {
  .project-thumbnail img {
    float: none;
    width: 100%;
    height: auto;
    margin-right: 0;
  }
}

.clear {
  clear: left;
}

:root {
  --color-background: #1a091a;
  --color-text: #f5ddf5;
  --color-heading: #84ddff;
  --color-link: #8356ff;
  --color-link-visited: #652dff;
  --color-link-hover: #ffa484;
  --color-link-active: #ff652d;
  --color-panel-background: #cf2f9728;
  --color-panel-scrollbar-thumb: #cf2f9750;
  --color-panel-scrollbar-thumb-hover: #cf2f97a0;
  --color-panel-scrollbar-thumb-active: #cf2f97ff;
}

body {
  background-color: var(--color-background);
  color: var(--color-text);
  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-heading);
  transition: color 0.3s ease-in-out;
}

@font-face {
  font-family: "Varela Round";
  src: url("../assets/fonts/varelaround-regular-webfont.woff2") format("woff2");
  font-display: swap;
}
body {
  font-family: "Varela Round", Arial, sans-serif;
}

dt {
  font-weight: bold;
}

code {
  font-size: 0.875rlh;
  background: rgba(207, 47, 151, 0.1568627451);
  border-radius: 4px;
  padding: 0 0.125rlh;
}

math {
  font-size: 0.75rlh;
  background: rgba(47, 127, 207, 0.1568627451);
  border-radius: 4px;
  padding: 0.125rlh;
}

pre {
  margin: 1rlh 0;
  font-size: 0.875rlh;
  background: var(--color-panel-background);
  padding: 0.5rlh;
  border-radius: 4px;
}
pre.dweet {
  white-space: pre-wrap;
}
pre > code {
  display: block;
  font-size: inherit;
  background: none;
  padding: 0;
  padding-bottom: 0.5rlh;
  overflow-x: auto;
}
pre > code::-webkit-scrollbar {
  height: 0.5rlh;
}
pre > code::-webkit-scrollbar-track {
  background: var(--color-background);
  border-radius: 0.25rlh;
}
pre > code::-webkit-scrollbar-thumb {
  background: var(--color-panel-scrollbar-thumb);
  border-radius: 0.25rlh;
  cursor: grab;
}
pre > code::-webkit-scrollbar-thumb:hover {
  background: var(--color-panel-scrollbar-thumb-hover);
}
pre > code::-webkit-scrollbar-thumb:active {
  background: var(--color-panel-scrollbar-thumb-active);
  cursor: grabbing;
}
pre > code > span.remove {
  box-sizing: border-box;
  border-bottom: 3px dotted rgb(255, 55, 0);
}
pre > .length {
  position: absolute;
  bottom: -0.5rlh;
  font-size: 0.625rlh;
  right: 0.25rlh;
}
pre > .length.too-long > span {
  color: #ff6600;
}
pre.no-length > .length {
  display: none;
}

pre:has(.language-html), pre:has(.language-js), pre:has(.language-css) {
  position: relative;
  display: block;
}
pre:has(.language-html):before, pre:has(.language-js):before, pre:has(.language-css):before {
  position: absolute;
  top: -0.5rlh;
  font-size: 0.625rlh;
  right: 0.25rlh;
  opacity: 0.5;
}

pre:has(.language-html):before {
  content: "HTML";
}

pre:has(.language-js):before {
  content: "JS";
}

pre:has(.language-css):before {
  content: "CSS";
}

#theme-toggle-label {
  position: absolute;
  top: 1rem;
  right: 1rem;
  cursor: pointer;
  width: 2.5rem;
  height: 1.5rem;
  border-radius: 0.75rem;
  background-color: #84ddff;
  color: transparent;
  user-select: none;
  transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.1);
  text-indent: -9999px;
}
@media (hover: hover) {
  #theme-toggle-label:hover {
    box-shadow: 0 0 10px 2px rgba(255, 164, 132, 0.5);
  }
}
#theme-toggle-label:has(#theme-toggle:checked) {
  background-color: black;
}
#theme-toggle-label > #theme-toggle {
  position: absolute;
  margin: 0;
  top: -2rem;
  left: 0;
  cursor: pointer;
}
#theme-toggle-label > #theme-toggle:before {
  position: absolute;
  top: 2rem;
  left: 0;
  content: "";
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.75rem;
  background: white;
  box-shadow: 0 0 10px 2px rgba(255, 255, 0, 0.1);
  box-sizing: border-box;
  border: 3px solid #84ddff;
  transition: transform 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
#theme-toggle-label > #theme-toggle:after {
  position: absolute;
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 0.5rem;
  box-sizing: border-box;
  border: 3px solid #84ddff;
  background-color: #84ddff;
  top: 2.25rem;
  left: 0;
  transform: translateX(1.5rem);
  transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
#theme-toggle-label > #theme-toggle:checked:before {
  transform: translateX(1rem);
  background-color: white;
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.1);
  border-color: black;
}
#theme-toggle-label > #theme-toggle:checked:after {
  background-color: black;
  border-color: black;
}

.permalink {
  color: #84ddff;
  transition: color 0.3s ease-in-out;
}
.permalink:visited, .permalink:active {
  color: #84ddff;
}

html {
  overflow-y: scroll;
}

ul,
ol {
  padding-left: 0.75rlh;
}

/* Links */
a {
  color: #a484ff;
  text-decoration: none;
  transition: color 0.3s ease-in-out, text-decoration 0.3s ease-in-out, text-shadow 0.3s ease-in-out;
}
a:before {
  background-color: #a484ff;
  transition: background-color 0.3s ease-in-out;
}

a:visited {
  color: #ca84ff;
}
a:visited:before {
  background-color: #ca84ff;
}

a:active {
  color: #ff7543;
  text-shadow: 0 0 5px rgba(255, 117, 67, 0.5);
}
a:active:before {
  background-color: #ff7543;
}

/* Layout */
header,
main,
footer {
  max-width: 32rlh;
  min-width: 320px;
  margin: auto;
}

header nav {
  width: 100%;
  margin: 0.5rlh 0;
  text-transform: uppercase;
}
header nav ul {
  width: 100%;
  padding: 0;
  margin: 0.5rlh 0;
  display: flex;
  list-style-type: none;
  gap: 0.5rlh;
}
header nav ul li {
  font-size: 0.625rlh;
}
header nav ul li.break {
  margin-left: auto;
}
header nav ul li a.logo {
  display: flex;
  align-items: center;
  text-transform: none;
}
header nav ul li a.logo:before {
  content: "";
  display: inline-block;
  width: 0.625rlh;
  height: 0.625rlh;
  margin-right: 0.125rlh;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
header nav ul li a.logo.bluesky:before {
  mask-image: url("/assets/logos/bluesky.svg");
}
header nav ul li a.logo.github:before {
  mask-image: url("/assets/logos/github.svg");
}
header nav ul li a.logo.rss:before {
  mask-image: url("/assets/logos/rss.svg");
}

main {
  margin-top: 1.5rlh;
}

.zoomable {
  margin: 1rlh 0;
}

.zoomable > img {
  cursor: zoom-in;
}

.zoomable > img.zoomed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  z-index: 30;
  cursor: zoom-out;
  background-color: #1a091a;
}

hr {
  clear: left;
  border: 0;
  margin: 0;
}

/* Decor */
img {
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.1);
}

h1,
h2 {
  text-transform: uppercase;
}

h2,
h3,
h4,
h5,
h6 {
  position: relative;
}

h2:before,
h3:before,
h4:before,
h5:before,
h6:before {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background-color: #84ddff;
}

body {
  position: relative;
}

#trails-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: -10;
}

#trails-container > #trails {
  position: absolute;
  width: 16rlh;
  height: 16rlh;
}

.footer {
  margin-top: 2rlh;
  padding-top: 0.5rlh;
  position: relative;
}

.footer:before {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background-color: rgba(208, 132, 255, 0.5098039216);
}

::selection {
  color: #1a091a;
  background-color: #84ddff;
}

html.light-mode body {
  background-color: #fff;
  color: #333;
}
html.light-mode body h1,
html.light-mode body h2,
html.light-mode body h3,
html.light-mode body h4,
html.light-mode body h5,
html.light-mode body h6 {
  color: #3fb2e7;
}
html.light-mode body a {
  color: #8356ff;
}
html.light-mode body a:visited {
  color: #652dff;
}
html.light-mode body a:active {
  color: #ff652d;
  text-shadow: 0 0 5px rgba(255, 101, 45, 0.5);
}
html.light-mode body img {
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
}
html.light-mode body .project-thumbnail > img.zoomed {
  background-color: #fff;
}
html.light-mode body #theme-toggle-label {
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
}
html.light-mode body h2:before,
html.light-mode body h3:before,
html.light-mode body h4:before,
html.light-mode body h5:before,
html.light-mode body h6:before {
  background-color: #3fb2e7;
}
html.light-mode body .footer:before {
  background-color: #3fb2e7;
}
html.light-mode body ::selection {
  color: #fff;
  background-color: #3fb2e7;
}

.center {
  text-align: center;
}
.center img {
  max-width: 100%;
}

html {
  scroll-behavior: smooth;
}

@media (min-width: 57rlh) {
  .avatar > img {
    position: absolute;
    width: 3rlh;
    height: 3rlh;
    border-radius: 1.5rlh;
    margin-left: -4rlh;
  }
  h3[id^=year-] {
    position: absolute;
    margin-left: -3.5rlh;
    text-align: right;
  }
  h3[id^=year-]:before {
    display: none;
  }
}
@media (max-width: 30rlh) {
  .avatar > img {
    float: none;
    margin: 0 auto;
    margin-bottom: 1rlh;
  }
  h1 {
    text-align: center;
  }
  header > nav > ul {
    flex-wrap: wrap;
    justify-content: center;
  }
  header > nav > ul > li.break {
    flex-basis: 100%;
  }
}
@media (hover: hover) {
  a:hover {
    color: #ffa484 !important;
    text-shadow: 0 0 5px rgba(255, 164, 132, 0.5);
  }
  a:hover:before {
    background-color: #ffa484;
  }
  a > img:hover {
    box-shadow: 0 0 10px 2px rgba(255, 164, 132, 0.5);
  }
  .zoomable > img {
    max-width: 100%;
    transition: transform 0.3s ease-in-out;
  }
  .zoomable > img.zoomed {
    transition: none;
  }
  .zoomable > img:not(.zoomed):hover {
    box-shadow: 0 0 10px 2px rgba(255, 164, 132, 0.5);
    transform: scale(1.01);
  }
  html.light-mode body a:hover {
    color: #ff8356;
    text-shadow: 0 0 5px rgba(255, 131, 86, 0.5);
  }
  html.light-mode body .project-thumbnail > img:hover {
    box-shadow: 0 0 10px 2px rgba(255, 131, 86, 0.5);
  }
  html.light-mode body .hoverable:hover {
    box-shadow: 0 0 10px 2px rgba(255, 131, 86, 0.5);
  }
}
.canvas-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 7rlh;
  background: rgba(208, 132, 255, 0.062745098);
  border-radius: 4px;
  margin: 1rlh 0;
}

.canvas-subcontainer {
  display: flex;
  transition: opacity 0.3s ease-in-out;
}
.canvas-subcontainer[data-in-viewport=false] {
  opacity: 0.5;
}
.canvas-subcontainer.dweet-container {
  height: 150px;
  aspect-ratio: 16/9;
}
.canvas-subcontainer.dweet-container > canvas {
  width: 100%;
}

canvas {
  transition: opacity 0.3s ease-in-out;
}
canvas[data-in-viewport=false] {
  opacity: 0.5;
}
canvas.black {
  background: black;
}
canvas.dweet {
  background: white;
}
canvas.white {
  background: white;
}
canvas.bordered {
  border: 1px solid rgba(208, 132, 255, 0.5098039216);
}
canvas.fit {
  width: 100%;
  height: 150px;
}

.hidden {
  display: none;
}

table {
  line-height: 1rlh;
  margin: 0.5rlh 0;
  border-spacing: 0.5rlh 0;
}

th, td {
  padding: 0;
}

th {
  position: relative;
  padding-bottom: 0.5rlh;
  text-align: left;
}
th:after {
  content: "";
  display: block;
  height: 2px;
  border-radius: 1px;
  background-color: rgba(204, 204, 204, 0.5019607843);
  position: absolute;
  bottom: 0.25rlh;
  left: 0;
  width: 100%;
}