/* Hi, I'm intentionally unminified so you can read me! */
/* # Navigating
 * ## Contents
 * - Core: Base styles
 * - Copy: Text content, outside of markdown
 * - Decorations: Non-text content
 * - Forms: Form elements
 * - Obvious utils: utility classes
 * - Components: styles for components. Sectioned by *.rs filename it relates
 * - Widgets: Basic self-contained js elements
 *
 * # Code style
 * - Organise properties by impact, group properties by category
 * - Native CSS nesting preferred
 * - Classic BEM namespacing
 * - Sizing based on character height & width
 *   - `var(--line-height-em)` for character height
 *   - `ch` for character width
 */
/* Core */
:root {
  --crust: #11111b;
  --mantle: #181825;
  --base: #1e1e2e;
  --surface-0: #313244;
  --surface-1: #45475a;
  --surface-2: #585b70;
  --overlay-0: #6c7086;
  --overlay-1: #7f849c;
  --overlay-2: #9399b2;
  --subtext-0: #a6adc8;
  --subtext-1: #bac2de;
  --text: #cdd6f4;
  --red: #f38ba8;
  --maroon: #eba0ac;
  --mauve: #cba6f7;
  --green: #a6e3a1;
  --teal: #94e2d5;
  --blue: #89b4fa;
  --cyan: #8bd5ca;

  --line-height: 1.3125;
  --line-height-em: calc(var(--line-height) * 1em);

  height: 100%;
  background: var(--base);
  color: var(--text);
  font-family: "JetBrains Mono", monospace;
  line-height: var(--line-height);
}

@keyframes blink {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}

body {
  display: flex;
  flex-direction: column;
}

/* Copy */
p {
  margin: 0;
}

a {
  color: var(--teal);
}
a, button, .button {
  transition: 200ms filter;
  &:hover {
    filter: brightness(80%);
  }
  &:active {
    filter: brightness(70%);
    transform: translateY(0.1ch);
  }
}
button, .button {
  padding: 0 1ch;
  border: 0;
  text-decoration: none;
  background: var(--red);
  color: var(--base);
  font-family: inherit;
  font-size: inherit;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  margin: 0;
  font-size: inherit;
  font-weight: bold;
}
h6, .h6 {
  color: var(--mauve);
  &::before {
    content: "###### ";
  }
}
h5, .h5 {
  color: var(--red);
  &::before {
    content: "##### ";
  }
}
h4, .h4 {
  color: var(--blue);
  &::before {
    content: "#### ";
  }
}
h3, .h3 {
  color: var(--mauve);
  &::before {
    content: "### ";
  }
}
h2, .h2 {
  color: var(--red);
  &::before {
    content: "## ";
  }
}
h1, .h1 {
  &::before {
    content: "# ";
  }
}

blockquote {
  margin: var(--line-height-em) 0;
  padding-left: 1ch;
  border-left: 1ch solid var(--text);
}

pre {
  padding: 1em 1ch;
  font-family: inherit;
}

/* Decoration */
hr {
  color: var(--blue);
  margin: calc(1.5 * var(--line-height-em)) 0;
}

/** Forms */
/* Expected Layout:
 * ```css
 * <label>
 *   <span>Label-text</span>
 *   <input />
 * </label>
 * ```
 */
label:not([for]) {
  --input-state: var(--blue);
  position: relative;
  display: flex;
  padding: calc(0.5 * var(--line-height-em)) 0.5ch;

  span {
    position: absolute;
    top: 0;
    left: 2ch;
    background: var(--base);
    color: var(--input-state);

    &.counter {
      left: auto;
      right: 2ch;
    }
  }
  
  textarea, input:is([type=text], [type=email], [type=url]) {
    animation: none !important;
    box-shadow: none !important;
    padding: calc(0.5 * var(--line-height-em)) 1.5ch;
    border: 1px solid var(--input-state);
    border-radius: 0.5ch;
    background: transparent;
  }

  &:has(:focus) {
    --input-state: var(--red);
  }
  &:has(:required) span:not(.counter)::after {
    content: "*";
  }
}

input {
  height: var(--line-height-em);
  border: 0;
  background: transparent;
  color: var(--text);
  caret-shape: underscore;
  caret-shape: block;
  font-family: inherit;
  font-size: inherit;
}
input:placeholder-shown:not(:focus):not(:disabled) {
  animation: blink 400ms steps(2, end) infinite alternate;
  box-shadow: inset 1ch 0 0 var(--text);
}
input:is(:focus-visible, :focus) {
  background: var(--mantle);
  outline: none;
}

/* Obvious utils */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.flex {
  display: flex;
}

.color-overlay-0 {
  color: var(--overlay-0);
}
.color-subtext-0 {
  color: var(--subtext-0);
}
.color-maroon {
  color: var(--maroon);
}
.color-green {
  color: var(--green);
}
.color-teal {
  color: var(--teal);
}

/* Components */
/* header.rs */
header {
  z-index: 1;
  position: sticky;
  top: 0;
  margin: calc(var(--line-height) * -1em) 0;

  > * {
    background: var(--base);
  }

  &::after {
    content: "";
    display: block;
    height: var(--line-height-em);
    width: 100%;
    outline: 1px solid var(--green);
    outline-offset: -1ch;
    clip-path: rect(0 100% 50% 0);
    background: var(--base);
  }

  nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1ch;
    padding: 0 1.5ch;

    ul {
      display: flex;
      gap: 1ch;
      flex-wrap: wrap;
      margin: 0;
      padding: 0;
    }
  }
  ol {
    display: flex;
    margin: 0;
    padding: 0;
  }
  li {
    display: flex;
  }
  a {
    background: var(--green);
    color: var(--surface-0);
  }
}
/* Common to standard pages */
main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin: calc(var(--line-height) * 0.5em) 1ch;
  padding: calc(var(--line-height) * 1.5em) 1ch;
  outline: 1px solid var(--green);
}
.section {
  margin: 0 auto;
  padding: 2em 0;
  width: 103ch;
  max-width: 100%;

  @media (max-width: 1056px) {
    width: auto;
  }
}
footer {
  position: sticky;
  bottom: 0;
  margin-top: calc(var(--line-height) * -1em - 1ch - 1px);
  padding: var(--line-height-em) 1ch;
  outline: 1px solid var(--green);
  outline-offset: -1ch;
  background: var(--base);
  clip-path: rect(var(--line-height-em) 100% 100% 0);
}
/* powerline.rs */
.footer {
  display: flex;
  justify-content: space-between;
  background: var(--mantle);

  > p {
    background: var(--blue);
    color: var(--surface-0);
  }
}
.footer__info {
  display: flex;

  > * + * {
    margin-left: -1ch;
  }
}
/** header.rs, powerline.rs */
.clip--tag {
  padding: 0 2ch 0 1ch;
  clip-path: polygon(
    0 0,
    calc(100% - 1ch) 0,
    100% 50%,
    calc(100% - 1ch) 100%,
    0 100%
  );
}
.clip--tag-reverse {
  padding: 0 1ch 0 2ch;
  clip-path: polygon(1ch 0, 100% 0, 100% 100%, 1ch 100%, 0 50%);
}
.clip--tag-double {
  padding: 0 2ch;
  clip-path: polygon(
    0 0,
    calc(100% - 1ch) 0,
    100% 50%,
    calc(100% - 1ch) 100%,
    0 100%,
    1ch 50%
  );
}
.clip--tag-double-reverse {
  padding: 0 2ch;
  clip-path: polygon(
    1ch 0,
    100% 0,
    calc(100% - 1ch) 50%,
    100% 100%,
    1ch 100%,
    0 50%
  );
}
/* external_links.rs */
.external-links {
  display: flex;
  gap: 1ch;

  a {
    --icon: url("/static/icons/undefined.svg");
    width: var(--line-height-em);
    height: var(--line-height-em);
    background: currentColor;
    mask: var(--icon);
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center;
  }
}
/* prompt.rs */
.prompt {
  background: url("/static/images/prompt-left.svg"),
    url("/static/images/prompt-right.svg");
  background-repeat: no-repeat, no-repeat;
  background-size:
    auto 2.625em,
    auto 1.3125em;
  background-position:
    top left,
    top right;
}
.prompt:has(:invalid) {
  background-image: url("/static/images/prompt-left-invalid.svg"),
    url("/static/images/prompt-right.svg");
}
.prompt__info,
.prompt__input {
  height: var(--line-height-em);
  padding-left: 3ch;
}
.prompt__info {
  display: flex;
  justify-content: flex-end;
  padding-right: 6ch;
  color: var(--surface-0);
}
.prompt__span {
  width: 100%;
  margin: 0 3ch 0 10ch;
  background: url("/static/images/prompt-span.svg");
  background-repeat: repeat no-repeat;
  background-size: auto 1.3125em;
  background-position: top left;
}
/* section.rs */
.section-heading {
  display: flex;
  justify-content: space-between;
  padding-bottom: 2em;
}
/* blogs.rs */
.blogs {
  color: var(--red);

  .h1 {
    color: var(--red);
  }
  .button {
    background: var(--red);
  }
}
/* projects.rs */
.projects {
  color: var(--mauve);

  .h1 {
    color: var(--mauve);
  }
  .button {
    background: var(--mauve);
  }
}
/* image_list.rs */
.image-list {
  --image-list__highlight: var(--red);
  display: flex;
  flex-direction: column;
  gap: var(--line-height-em);
  color: var(--text);

  .h2, a {
    color: var(--image-list__highlight);
  }
  .h2 {
    margin-bottom: var(--line-height-em);
  }
  img {
    width: 33.67ch;
    aspect-ratio: 1;

    @media(max-width: 797px) {
      width: 15ch;
    }
  }
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--subtext-0);
  }
}
.image-list__item {
  display: flex;
  flex-direction: row;
  gap: 1ch;

  &:nth-child(3n-1) {
    --image-list__highlight: var(--mauve);
  }
  &:nth-child(3n) {
    --image-list__highlight: var(--blue);
  }
}
.image-list__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  padding: var(--line-height-em) 0;
  border-bottom: 1px solid var(--image-list__highlight);

  ul {
    display: flex;
    justify-content: space-between;
    @media(max-width: 653px) {
      display: none;
    }
  }
}
.image-list__title {
  @media(min-width: 653px) {
    padding-right: 6ch;
  }
}
.image-list__year {
  position: absolute;
  top: var(--line-height-em);
  right: 1ch;
}
@media(min-width: 1056px) {
  .image-list--row {
    flex-direction: row;
    gap: 1ch;

    .image-list__item {
      flex-direction: column;
      gap: var(--line-height-em);
    }
    .image-list__content {
      flex-grow: 1;
      padding-top: 0;
    }
    .image-list__topics {
      display: none;
    }
    .image-list__year {
      top: 0;
      right: 0;
    }
  }
}
/* bat.rs */
.bat {
  position: relative;
  border-left: 1px solid var(--text);
  margin-left: 6ch;
}
.bat__filename {
  margin-left: -6ch;
  padding: var(--line-height-em);
  padding-left: 7ch;
  border-top: 1px solid var(--text);
  border-bottom: 1px solid var(--text);
}
.bat__markdown {
  padding: var(--line-height-em) 1ch;
  counter-reset: bat;

  > :not(br) {
    display: flex;
    gap: 1ch;
  }
  > *::after {
    position: absolute;
    left: -4ch;
    counter-increment: bat;
    content: counter(bat);
    color: var(--text);
    font-weight: normal;
  }
}
/* article.rs */
.article {
  display: flex;
  flex-direction: column;
  gap: var(--line-height-em);

  .external-links {
    padding-left: 2ch;
    border-left: 1ch solid var(--teal);
  }
}
.article__image {
  display: flex;
  align-items: center;
  width: 100%;
  height: calc(var(--line-height-em) * 24);
}
.article__title {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: 33.33%;
  margin-left: -3ch;
  padding: calc(0.5 * var(--line-height-em)) 0.5ch;
  background: var(--base);

  @media(max-width: 797px) {
    max-width: 50%;
  }
  @media(max-width: 653px) {
    max-width: 66.67%;
  }

  hgroup {
    padding: calc(0.5 * var(--line-height-em)) 0.5ch;
    border: 1px solid var(--red);
  }
  h1 {
    display: inline;
    &::after {
      content: " — ";
    }
  }
  p {
    display: inline;
  }
  a {
    margin: calc(-0.5 * var(--line-height-em)) 1ch;
  }
}
/* markdown.rs */
.markdown {
  h1,h2,h3,h4,h5,h6 {
    margin: var(--line-height-em) 0;
  }
  strong {
    color: var(--blue);
  }
  em {
    color: var(--green);
  }
  code {
    background: var(--crust);
    color: var(--cyan);
    font-size: inherit;
    font-family: inherit;
  }
  pre {
    overflow: auto;
    background: var(--crust);
  }
  table {
    margin: var(--line-height-em) 0;
    table-layout: fixed;
    border-collapse: collapse;
  }
  th, td {
    padding: calc(0.5 * var(--line-height-em)) 0.5ch;
    border: 1px solid var(--teal);
  }
  ul {
    padding-left: 3ch;
  }
  img {
    margin: var(--line-height-em) 0;
  }
}
/* guest_book.rs */
.guest-book {
  background: var(--base);

  main:has(&) {
    position: relative;
    background: url("/static/images/space-man.svg"), linear-gradient(var(--base)), url("/static/images/guest-book-background.svg");
    background-repeat: no-repeat, no-repeat, repeat;
    background-size: 48ch auto, 49ch calc(7 * var(--line-height-em)), 39ch auto;
    background-position: calc(50% - 77ch) var(--line-height-em), calc(50% - 77ch) var(--line-height-em), top left;
  }
  form {
    display: flex;
    flex-flow: wrap;
    gap: var(--line-height-em) 1ch;
    padding: var(--line-height-em) 0;
  }
  label {
    flex: 1 1 25%;
    max-width: calc(100% / 3);
    &:has(textarea) {
      flex: 1 1 auto;
      max-width: none;
      width: 100%;
    }
  }
  textarea, input {
    width: 100%;
    color: var(--text);
    font-size: inherit;
    font-family: inherit;
  }
  button {
    margin-left: auto;
  }
}
.guest-book__messages {
  display: flex;
  flex-direction: column;
  gap: var(--line-height-em);
  padding-top: var(--line-height-em);
}
.guest-book__message {
  margin-top: var(--line-height-em) 0;
  padding: var(--line-height-em) 2ch;
  background: var(--surface-0);
}
.guest-book__pending {
  padding-top: var(--line-height-em);
  text-align: center;
}

/* Widgets */
.js-spy {
  background: var(--surface-0);
  color: var(--blue);
}

.js-time {
  background: var(--blue);
  color: var(--surface-0);
}