/* view transitions */
@view-transition {
  navigation: auto;
}

.home {
  view-transition-name: content;
}

.other {
  view-transition-name: other;
}

::view-transition-old(content) {
  animation-duration: 100ms;
}

::view-transition-new(other) {
  animation: blink-in 300ms ease-in-out;
}

@keyframes blink-in {
  0% {
    opacity: 0;
  }

  25% {
    opacity: 1;
  }
  40% {
    opacity: 0.8;
  }

  60% {
    opacity: 1;
  }
  75% {
    opacity: 0.8;
  }

  100% {
    opacity: 1;
  }
}

/* default styling */
h6,
h5,
h4,
h3,
h2,
h1 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-weight: 500;
  font-family: inherit;
}

h1 {
  font-size: var(--type-ramp-plus-5-font-size);
  line-height: var(--type-ramp-plus-5-line-height);
}

h2 {
  font-size: var(--type-ramp-plus-4-font-size);
  line-height: var(--type-ramp-plus-4-line-height);
}

h3 {
  font-size: var(--type-ramp-plus-3-font-size);
  line-height: var(--type-ramp-plus-3-line-height);
}

h4 {
  font-size: var(--type-ramp-plus-2-font-size);
  line-height: var(--type-ramp-plus-2-line-height);
}

h5 {
  font-size: var(--type-ramp-plus-1-font-size);
  line-height: var(--type-ramp-plus-1-line-height);
}

h6 {
  font-size: var(--type-ramp-base-font-size);
  line-height: var(--type-ramp-base-line-height);
}

pre {
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  font-size: 0.875em;
}

pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
}

code {
  font-size: 0.875em;
  color: var(--accent-foreground-rest);
  word-wrap: break-word;
}

a > code {
  color: inherit;
}

pre,
code,
kbd,
samp {
  font-family: var(--font-monospace);
  font-size: 1em;
}

pre {
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  font-size: 0.875em;
}

pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
}

code {
  font-size: 0.875em;
  color: var(--accent-foreground-rest);
  word-wrap: break-word;
}

a > code {
  color: inherit;
}

.feed {
  padding-top: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
  list-style: none;
  padding-inline-start: 0;
}

.feed li {
  display: flex;
  flex-flow: column;
}

@media (max-width: 744px) {
  .feed {
    padding-top: 0;
  }

  .feed > li:first-child {
    grid-column: span 1;
  }
}

@media (min-width: 744px) {
  .feed > li:first-child {
    grid-column: span 2;
  }
}

.feed aside.banner {
  font-size: 4.5rem;
  line-height: initial;
}

.logo {
  content: var(--logo);
  height: 50%;
}

@media (min-width: 641px) {
  .feed aside.banner {
    font-size: 6rem;
  }
}

@media (max-width: 640px) {
  .logo {
    text-align: center;
    margin: auto;
  }
  .header {
    height: 35px;
  }
}
@media (min-width: 641px) {
  .logo {
    padding-left: 2.5rem;
  }
  article {
    padding-left: 2rem;
    padding-right: 1.5rem;
  }
  .header {
    height: 50px;
  }
}

.card h1 {
  font-size: var(--type-ramp-plus-5-font-size);
  line-height: var(--type-ramp-plus-5-line-height);
}

.card h4 {
  color: var(--neutral-foreground-hover);
}

.card p {
  color: var(--neutral-foreground-active);
}

element.style {
  height: 50px;
}

.header[b-wxpnc5dx1o] {
  display: flex;
  z-index: 10;
  flex-shrink: 0;
  background-color: var(--accent-fill-rest);
  font-family: var(--body-font);
  font-weight: bold;
  font-size: var(--type-ramp-plus-1-font-size);
  line-height: var(--type-ramp-plus-1-line-height);
  color: var(--fill-color);
}
* {
  box-sizing: border-box;
}
*,
::after,
::before {
  box-sizing: border-box;
}
header {
  display: flex;
  position: relative;
  align-items: center;
  width: 100%;
}

main.other {
  display: flex;
  justify-content: center;
}

article.content {
  --bs-body-font-size: 1.125rem;
  --bs-body-line-height: 2rem;
  font-size: var(--bs-body-font-size);
  line-height: var(--bs-body-line-height);
  max-width: 680px;
  padding: 1rem;
  overflow-x: auto;
}

:root {
  --astro-code-background: #ffffff;
  --astro-code-foreground: #24292e;

  --astro-code-token-keyword: #d73a49;
  --astro-code-token-function: #6f42c1;
  --astro-code-token-string: #032f62;
  --astro-code-token-string-expression: #032f62;
  --astro-code-token-constant: #005cc5;
  --astro-code-token-punctuation: #24292e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --astro-code-background: #24292e;
    --astro-code-foreground: #e1e4e8;

    --astro-code-token-keyword: #f97583;
    --astro-code-token-function: #b392f0;
    --astro-code-token-string: #9ecbff;
    --astro-code-token-string-expression: #9ecbff;
    --astro-code-token-constant: #79b8ff;
    --astro-code-token-punctuation: #e1e4e8;
  }
}

:root {
  color-scheme: light dark;

  --neutral-layer-1: #fbfbfb;

  --accent-foreground-rest: #282be0;

  --neutral-foreground-rest: #1a1a1a;
  --neutral-foreground-hover: #7a7a7a;
  --neutral-foreground-active: #a8a8a8;
  --neutral-foreground-focus: #1a1a1a;
  --neutral-foreground-hint: #71f0c0;

  --neutral-fill-stealth-rest: #ffffff;
  --neutral-fill-stealth-hover: #a8a8a8;
  --neutral-fill-stealth-active: #7a7a7a;
  --neutral-fill-stealth-focus: #ffffff;

  --neutral-fill-layer-rest: #f5faf6;
  --neutral-fill-layer-hover: #ffffff;
  --neutral-fill-layer-active: #ffffff;
  --neutral-fill-layer-alt-rest: #ffffff;

  --neutral-fill-secondary-rest: #71f0c0;
  /* --neutral-fill-secondary-hover: #333333;
    --neutral-fill-secondary-active: #2d2d2d;
    --neutral-fill-secondary-focus: #383838; */

  --font-monospace:
    Consolas, "Courier New", "Liberation Mono", SFMono-Regular, Menlo, Monaco,
    monospace;
  --success: #0e700e;
  --warning: #e9835e;
  --error: #bc2f32;
  --info: #616161;
  --highlight-bg: #fff3cd;
}

@media (prefers-color-scheme: dark) {
  :root {
    --neutral-fill-secondary-rest: #71f0bf4c;

    --neutral-fill-layer-rest: #202020;
    --neutral-fill-layer-hover: #383838;
    --neutral-fill-layer-active: #383838;
    --neutral-fill-layer-alt-rest: #212121;

    --neutral-fill-stealth-rest: #272727;
    --neutral-fill-stealth-hover: #383838;
    --neutral-fill-stealth-active: #333333;
    --neutral-fill-stealth-focus: #272727;

    --accent-foreground-rest: #82ddfd;
    --accent-foreground-hover: #9eecfd;
    --accent-foreground-active: #3db5fb;
    --accent-foreground-focus: #82ddfd;

    --neutral-foreground-rest: #ffffff;
    --neutral-foreground-hover: #a8a8a8;
    --neutral-foreground-active: #7a7a7a;
    --neutral-foreground-focus: #ffffff;
    --neutral-foreground-hint: #8e8e8e;

    --neutral-layer-1: #272727;
  }
}

:root {
  --direction: ltr;
  --disabled-opacity: 0.3;
  --base-height-multiplier: 8;
  --base-horizontal-spacing-multiplier: 3;
  --density: 0;
  --design-unit: 4;
  --control-corner-radius: 4;
  --layer-corner-radius: 8;
  --stroke-width: 1;
  --focus-stroke-width: 2;
  --body-font: "Segoe UI Variable", "Segoe UI", sans-serif;
  --font-weight: 400;
  --type-ramp-base-font-size: 14px;
  --type-ramp-base-line-height: 20px;
  --type-ramp-base-font-variations: "wght" 400, "opsz" 10.5;
  --type-ramp-minus-1-font-size: 12px;
  --type-ramp-minus-1-line-height: 16px;
  --type-ramp-minus-1-font-variations: "wght" 400, "opsz" 8;
  --type-ramp-minus-2-font-size: 10px;
  --type-ramp-minus-2-line-height: 14px;
  --type-ramp-minus-2-font-variations: "wght" 400, "opsz" 8;
  --type-ramp-plus-1-font-size: 16px;
  --type-ramp-plus-1-line-height: 22px;
  --type-ramp-plus-1-font-variations: "wght" 400, "opsz" 10.5;
  --type-ramp-plus-2-font-size: 20px;
  --type-ramp-plus-2-line-height: 26px;
  --type-ramp-plus-2-font-variations: "wght" 400, "opsz" 10.5;
  --type-ramp-plus-3-font-size: 24px;
  --type-ramp-plus-3-line-height: 32px;
  --type-ramp-plus-3-font-variations: "wght" 400, "opsz" 10.5;
  --type-ramp-plus-4-font-size: 28px;
  --type-ramp-plus-4-line-height: 36px;
  --type-ramp-plus-4-font-variations: "wght" 400, "opsz" 36;
  --type-ramp-plus-5-font-size: 32px;
  --type-ramp-plus-5-line-height: 40px;
  --type-ramp-plus-5-font-variations: "wght" 400, "opsz" 36;
  --type-ramp-plus-6-font-size: 40px;
  --type-ramp-plus-6-line-height: 52px;
  --type-ramp-plus-6-font-variations: "wght" 400, "opsz" 36;
  --base-layer-luminance: 0.15;
  --neutral-base-color: #808080;
  --accent-base-color: #0078d4;
  --neutral-layer-card-container: #1a1a1a;
  --neutral-layer-floating: #333333;
  --neutral-layer-1: #272727;
  --neutral-layer-2: #1a1a1a;
  --neutral-layer-3: #0b0b0b;
  --neutral-layer-4: #000000;
  --fill-color: #272727;
  --accent-fill-rest: #60c9fc;
  --accent-fill-hover: #4fc0fc;
  --accent-fill-active: #34b0fb;
  --accent-fill-focus: #60c9fc;
  --foreground-on-accent-rest: #000000;
  --foreground-on-accent-hover: #000000;
  --foreground-on-accent-active: #000000;
  --foreground-on-accent-focus: #000000;
  --accent-stroke-control-rest: linear-gradient(#7ed3fd 90%, #4ea3cc 100%);
  --accent-stroke-control-hover: linear-gradient(#72cdfd 90%, #419dcf 100%);
  --accent-stroke-control-active: #59befc;
  --accent-stroke-control-focus: linear-gradient(#7ed3fd 90%, #4ea3cc 100%);
  --neutral-fill-rest: #333333;
  --neutral-fill-hover: #383838;
  --neutral-fill-active: #2d2d2d;
  --neutral-fill-focus: #333333;
  --neutral-fill-input-rest: #333333;
  --neutral-fill-input-hover: #383838;
  --neutral-fill-input-active: #2d2d2d;
  --neutral-fill-input-focus: #272727;
  --neutral-fill-input-alt-rest: #1a1a1a;
  --neutral-fill-input-alt-hover: #333333;
  --neutral-fill-input-alt-active: #3d3d3d;
  --neutral-fill-input-alt-focus: #1a1a1a;
  --neutral-fill-strong-rest: #8e8e8e;
  --neutral-fill-strong-hover: #b3b3b3;
  --neutral-fill-strong-active: #7a7a7a;
  --neutral-fill-strong-focus: #8e8e8e;
  --neutral-stroke-rest: #505050;
  --neutral-stroke-hover: #636363;
  --neutral-stroke-active: #464646;
  --neutral-stroke-focus: #505050;
  --neutral-stroke-control-rest: linear-gradient(#505050 0%, #383838 10%);
  --neutral-stroke-control-hover: linear-gradient(#595959 0%, #414141 10%);
  --neutral-stroke-control-active: #414141;
  --neutral-stroke-control-focus: linear-gradient(#595959 0%, #414141 10%);
  --neutral-stroke-divider-rest: #3d3d3d;
  --neutral-stroke-input-rest: linear-gradient(
    #383838 calc(100% - 1px),
    #929292 calc(100% - 1px),
    #929292
  );
  --neutral-stroke-input-hover: linear-gradient(
    #414141 calc(100% - 1px),
    #9a9a9a calc(100% - 1px),
    #9a9a9a
  );
  --neutral-stroke-input-active: #414141;
  --neutral-stroke-input-focus: linear-gradient(
    #414141 calc(100% - 1px),
    #9a9a9a calc(100% - 1px),
    #9a9a9a
  );
  --neutral-stroke-layer-rest: #383838;
  --neutral-stroke-layer-hover: #383838;
  --neutral-stroke-layer-active: #383838;
  --neutral-stroke-strong-rest: #9e9e9e;
  --neutral-stroke-strong-hover: #9e9e9e;
  --neutral-stroke-strong-active: #9e9e9e;
  --neutral-stroke-strong-focus: #9e9e9e;
  --focus-stroke-outer: #ffffff;
  --focus-stroke-inner: #000000;
  --foreground-on-accent-rest-large: #000000;
  --foreground-on-accent-hover-large: #000000;
  --foreground-on-accent-active-large: #000000;
  --foreground-on-accent-focus-large: #000000;
  --neutral-fill-inverse-rest-delta: 0;
  --neutral-fill-inverse-hover-delta: -3;
  --neutral-fill-inverse-active-delta: 7;
  --neutral-fill-inverse-focus-delta: 0;
  --neutral-fill-inverse-rest: #ffffff;
  --neutral-fill-inverse-hover: #fbfbfb;
  --neutral-fill-inverse-active: #ffffff;
  --neutral-fill-inverse-focus: #ffffff;
  --neutral-fill-stealth-rest-on-neutral-fill-layer-rest: #333333;
  --neutral-fill-stealth-hover-on-neutral-fill-layer-rest: #414141;
  --neutral-fill-stealth-active-on-neutral-fill-layer-rest: #3d3d3d;
  --elevation-shadow-card-rest-size: 4;
  --elevation-shadow-card-hover-size: 8;
  --elevation-shadow-card-active-size: 0;
  --elevation-shadow-card-focus-size: 8;
  --elevation-shadow-card-rest:
    0 0 2px rgba(0, 0, 0, 0.12),
    0 calc(4 * 0.5px) calc((4 * 1px)) rgba(0, 0, 0, 0.14);
  --elevation-shadow-card-hover:
    0 0 2px rgba(0, 0, 0, 0.12),
    0 calc(8 * 0.5px) calc((8 * 1px)) rgba(0, 0, 0, 0.14);
  --elevation-shadow-card-active:
    0 0 2px rgba(0, 0, 0, 0.12),
    0 calc(0 * 0.5px) calc((0 * 1px)) rgba(0, 0, 0, 0.14);
  --elevation-shadow-card-focus:
    0 0 2px rgba(0, 0, 0, 0.12),
    0 calc(8 * 0.5px) calc((8 * 1px)) rgba(0, 0, 0, 0.14);
  --elevation-shadow-tooltip-size: 16;
  --elevation-shadow-tooltip:
    0 0 2px rgba(0, 0, 0, 0.12),
    0 calc(16 * 0.5px) calc((16 * 1px)) rgba(0, 0, 0, 0.14);
  --elevation-shadow-flyout-size: 32;
  --elevation-shadow-flyout:
    0 0 2px rgba(0, 0, 0, 0.2),
    0 calc(32 * 0.5px) calc((32 * 1px)) rgba(0, 0, 0, 0.24);
  --elevation-shadow-dialog-size: 128;
  --elevation-shadow-dialog:
    0 0 2px rgba(0, 0, 0, 0.2),
    0 calc(128 * 0.5px) calc((128 * 1px)) rgba(0, 0, 0, 0.24);
  --input-placeholder-rest: #9e9e9e;
  --input-placeholder-hover: #a2a2a2;
  --input-filled-placeholder-rest: #a2a2a2;
  --input-filled-placeholder-hover: #9e9e9e;
  --clear-button-hover: #383838;
  --clear-button-active: #333333;
  --tree-item-expand-collapse-hover: #464646;
  --tree-item-expand-collapse-selected-hover: #464646;
}

.card {
  all: unset;
  cursor: pointer;
  --background-gradient-tone: #ffc0cb20;
  display: block;
  border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-layer-rest);
  border-radius: calc(var(--layer-corner-radius) * 1px);
  box-shadow: var(--elevation-shadow-card-rest);
  padding: 20px;
  backdrop-filter: blur(5px);
  background: linear-gradient(
    to bottom left,
    #00000000,
    #00000000,
    var(--background-gradient-tone)
  );
  height: 100%;
}

.card {
  color: var(--neutral-foreground-rest);
  text-decoration: none;
}

.card:hover {
  color: var(--neutral-foreground-hover);
}

.card:active {
  color: var(--neutral-foreground-active);
}

.header {
  background-color: #ffffff31;
}

pre > code {
  font-size: 1.125rem;
  line-height: 2rem;
}

.content img {
  height: auto;
  object-fit: contain;
  max-width: 100%;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  font-family: var(--body-font);
  font-size: var(--type-ramp-base-font-size);
  line-height: var(--type-ramp-base-line-height);
  font-weight: var(--font-weight);
  color: var(--neutral-foreground-rest);
  background: var(--neutral-fill-layer-rest);
}

.header .header-fixed-top[b-wxpnc5dx1o] {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}

:root {
  --logo: url("/images/retruate-logo-black.png");
}

@media (prefers-color-scheme: dark) {
  :root {
    --logo: url("/images/retruate-logo-white.png");
  }
}

/* copied from .net blog please don't sue me microsoft */
thead tr,
thead + tbody tr,
tr {
  background-color: var(--neutral-fill-stealth-hover);
}

thead + tbody tr:nth-child(2n) {
  background-color: var(--neutral-fill-stealth-rest);
}

thead tr {
  background-color: var(--neutral-fill-stealth-rest);
}

td,
th {
  padding: 0.5em;
}

table,
th,
td {
  border: 1px solid var(--neutral-foreground-hint);
  border-collapse: collapse;
}
pre {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
pre {
  padding: 1em;
}

.pre-header {
  display: block;
  background: var(--neutral-fill-secondary-rest);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

small {
  padding-left: 1em;
  font-family: var(--font-monospace);
  color: var(--neutral-foreground-rest);
}

.mermaidMarkdownContainer {
  line-height: var(--type-ramp-base-line-height);
}

p {
  font-size: 1rem !important;
  line-height: 24px !important;
}

.bg {
  position: relative;
  z-index: 0;
}

.bg::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url("/images/retruate-bg-pattern.png") repeat-x bottom;

  mask-image: linear-gradient(
    to bottom right,
    transparent,
    transparent 60%,
    black
  );

  -webkit-mask-image: linear-gradient(
    to bottom right,
    transparent,
    transparent 60%,
    black
  );

  background-blend-mode: multiply;
}