/* @font-face {
  font-family: iA Writer Mono S;
  font-weight: 400;
  font-display: swap;
  src: url("https://florianschulz.info/portfolio/ratio/fonts/iA Writer Mono/iAWriterMonoS-Regular.woff2")
      format("woff2"),
    url("https://florianschulz.info/portfolio/ratio/fonts/iA Writer Mono/iAWriterMonoS-Regular.woff")
      format("woff");
}

@font-face {
  font-family: iA Writer Mono S;
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("https://florianschulz.info/portfolio/ratio/fonts/iA Writer Mono/iAWriterMonoS-Italic.woff2")
      format("woff2"),
    url("https://florianschulz.info/portfolio/ratio/fonts/iA Writer Mono/iAWriterMonoS-Italic.woff")
      format("woff");
}

@font-face {
  font-family: iA Writer Mono S;
  font-weight: 700;
  font-display: swap;
  src: url("https://florianschulz.info/portfolio/ratio/fonts/iA Writer Mono/iAWriterMonoS-Bold.woff2")
      format("woff2"),
    url("https://florianschulz.info/portfolio/ratio/fonts/iA Writer Mono/iAWriterMonoS-Bold.woff")
      format("woff");
}

@font-face {
  font-family: Pensum Pro;
  font-weight: 400;
  font-style: normal;
  src: url(https://florianschulz.info/portfolio/ratio/fonts/Pensum/Pensum-Pro-Regular.eot);
  src: url(https://florianschulz.info/portfolio/ratio/fonts/Pensum/Pensum-Pro-Regular.eot?#iefix)
      format("embedded-opentype"),
    url(https://florianschulz.info/portfolio/ratio/fonts/Pensum/Pensum-Pro-Regular.woff2)
      format("woff2"),
    url(https://florianschulz.info/portfolio/ratio/fonts/Pensum/Pensum-Pro-Regular.woff)
      format("woff");
}

@font-face {
  font-family: Pensum Pro;
  font-weight: 400;
  font-style: italic;
  src: url(https://florianschulz.info/portfolio/ratio/fonts/Pensum/Pensum-Pro-Regular-Italic.eot);
  src: url(https://florianschulz.info/portfolio/ratio/fonts/Pensum/Pensum-Pro-Regular-Italic.eot?#iefix)
      format("embedded-opentype"),
    url(https://florianschulz.info/portfolio/ratio/fonts/Pensum/Pensum-Pro-Regular-Italic.woff2)
      format("woff2"),
    url(https://florianschulz.info/portfolio/ratio/fonts/Pensum/Pensum-Pro-Regular-Italic.woff)
      format("woff");
}

@font-face {
  font-family: Pensum Pro;
  font-weight: 500;
  src: url(https://florianschulz.info/portfolio/ratio/fonts/Pensum/Pensum-Pro-Medium.eot);
  src: url(https://florianschulz.info/portfolio/ratio/fonts/Pensum/Pensum-Pro-Medium.eot?#iefix)
      format("embedded-opentype"),
    url(https://florianschulz.info/portfolio/ratio/fonts/Pensum/Pensum-Pro-Medium.woff2)
      format("woff2"),
    url(https://florianschulz.info/portfolio/ratio/fonts/Pensum/Pensum-Pro-Medium.woff)
      format("woff");
}

@font-face {
  font-family: Pensum Pro;
  font-weight: 600;
  src: url(https://florianschulz.info/portfolio/ratio/fonts/Pensum/Pensum-Pro-Bold.eot);
  src: url(https://florianschulz.info/portfolio/ratio/fonts/Pensum/Pensum-Pro-Bold.eot?#iefix)
      format("embedded-opentype"),
    url(https://florianschulz.info/portfolio/ratio/fonts/Pensum/Pensum-Pro-Bold.woff2)
      format("woff2"),
    url(https://florianschulz.info/portfolio/ratio/fonts/Pensum/Pensum-Pro-Bold.woff)
      format("woff");
} */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.scale-2 {
  --font-size: 40px;
  font-size: 40px;
}
:root {
  /* Typography */

  font-family: "Inter", sans-serif;
  font-size: 16px;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Layout */

  --container-width: 40rem;

  /* Colors */

  --primary-color: #000;
  --secondary-color: #fff;

  --text-1: rgba(33, 32, 28, 1);
  --text-2: rgba(80, 80, 80, 1);
  --text-3: rgba(120, 120, 120, 1);
  --text-white: rgba(255, 255, 255, 1);

  --background-1: rgb(253, 253, 252);
  --background-2: rgb(249, 249, 248);
  --background-white: rgb(255, 255, 255);
  --background-black: rgb(0, 0, 0);

  --border-1: rgb(216, 216, 216);
  --border-2: rgb(232, 232, 232);
  --border-3: rgb(240, 240, 240);
}

html {
  overflow-x: hidden;
}

@media (min-width: 1024px) {
  :root {
    font-size: 18px;
  }
}

[font="inter"] {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* Theme */

[color="text-1"] {
  color: var(--text-1);
}
[color="text-2"] {
  color: var(--text-2);
}
[background="white"] {
  background: var(--background-white);
}
[background="background-1"] {
  background: var(--background-1);
}
[background="background-2"] {
  background: var(--background-2);
}
[background="background-3"] {
  background: var(--background-3);
}

[border="border-1"] {
  border: 1px solid var(--border-1);
}
[border="border-2"] {
  border: 1px solid var(--border-2);
}
[border="border-3"] {
  border: 1px solid var(--border-3);
}

[weight="normal"] {
  font-weight: var(--weight-normal);
}
[weight="medium"] {
  font-weight: var(--weight-medium);
}
[weight="semibold"] {
  font-weight: var(--weight-semibold);
}

/* Padding */

[padding="small"] {
  padding: 0.5rem;
}

[padding="medium"] {
  padding: 1rem;
}
[padding="large"] {
  padding: 2rem;
}
[padding="x-large"] {
  padding: 4rem;
}

/* Links */

a {
  color: var(--text-1);
  text-decoration: underline;
  text-underline-position: from-font;
  text-decoration-thickness: 0.08em;
  text-decoration-color: var(--text-1);
}

p > a {
  color: currentColor;
  text-decoration: underline;
  text-underline-position: from-font;
  text-decoration-thickness: 0.08em;
  text-decoration-color: rgb(188, 187, 181);
}

/* Headings */

h1 {
  font-size: 2rem;
  font-weight: var(--weight-semibold);
}
h2 {
  font-size: 1.25rem;
  font-weight: var(--weight-semibold);
}
h3 {
  font-size: 1rem;
  font-weight: var(--weight-semibold);
}
h4 {
  font-size: 1rem;
}
h5 {
  font-size: 1rem;
}
h6 {
  font-size: 1rem;
}
[theme="light"] {
  background-color: var(--background-1);
  color: var(--text-1);
}
[underline="none"] {
  text-decoration: none;
}

/* Body */

body {
  padding: 3rem 0;
  line-height: 1.5;
  display: grid;
  grid-template-columns: 1rem 1fr min(65ch, 100% - 2rem) 1fr 1rem;
  min-height: 100vh;
}

/* Header */

header {
  grid-column: 3;
}

/* Footer */

footer {
  border-top: 1px solid var(--border-2);
  padding-top: 1rlh;
  grid-column: 3;
  margin-top: 4.5rem;
}

/* Main */

main {
  margin-top: 8rem;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns:
    [full-start] 1fr
    [media-start] 1fr
    [content-start] min(65ch, 100% - 2rem)
    [content-end] 1fr
    [media-end] 1fr
    [full-end];
}

/* Spacing */

h1 {
  margin-bottom: 1rlh;
  margin-top: 1rlh;
}

h2 {
  margin-top: 2rlh;
  margin-bottom: 1rlh;
}

h3 {
  margin-top: 1rlh;
  margin-bottom: 1rlh;
}

p {
  color: var(--text-2);
  line-height: 1.65;
}

.astro-code[data-language="markdown"],
li > code,
p > code {
  border-radius: 6px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--border-2);
  background-color: var(--background-2);
  padding: 2px 4px !important;
  font-size: 0.75rem !important;

  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;

  color: initial !important;
}
/* Code */
.astro-code {
  margin-top: 1rlh;
  margin-bottom: 1rlh;
  padding: 1rlh;
  border-radius: 12px;
  background-color: var(--background-2) !important;
  /* border: 1px solid var(--border-2) !important; */
}
code {
  font-size: 0.875rem;
  font-family: "JetBrains Mono", monospace;
}

/* Lists */

ul,
ol {
  color: var(--text-2);
  line-height: 1.65;
  margin: 1rlh 0;
  padding-left: 1rlh;
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

li {
  margin-bottom: 0.5lh;
  padding-left: 0.5rem;
}

li:last-child {
  margin-bottom: 0;
}

/* Nested lists */
ul ul,
ol ol,
ul ol,
ol ul {
  margin: 1rlh 0;
  padding-left: 1rlh;
}

ul ul {
  list-style-type: circle;
}

ul ul ul {
  list-style-type: square;
}

ol ol {
  list-style-type: lower-alpha;
}

ol ol ol {
  list-style-type: lower-roman;
}

/* List items with code */
li code {
  margin: 0 0.25rlh;
}

/* Lists within paragraphs */
p + ul,
p + ol {
  margin-top: 1rlh;
}

/* Lists followed by paragraphs */
ul + p,
ol + p {
  margin-top: 1rlh;
}

/* Images */

figure {
  margin-top: 1rlh;
  margin-bottom: 1rlh;
  border-radius: 12px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--border-3);
  overflow: hidden;
}

section {
  margin-top: 1rlh;
  margin-bottom: 1rlh;
}

img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
}

figure video {
  width: 100%;
  display: block;

  background-color: var(--background-white);
  border-radius: 12px;

  cursor: pointer;

  overflow: hidden;
}

figcaption {
  padding: 1rem;
  font-size: 0.75rem;
  color: var(--text-3);
  text-align: center;
  margin-top: -2rlh;
}

[pattern="grid"] {
  background-image: radial-gradient(var(--border-2) 1px, transparent 0);
  background-size: 10px 10px;
  background-color: var(--background-white);
}

p + p {
  margin-top: 1rlh;
}

/* Code Playground Styles */
.code-playground {
  margin: 1rlh 0;
  border-radius: 12px;
  border: 1px solid var(--border-2);
  overflow: hidden;
  background: var(--background-white);
}

.playground-header {
  padding: 1rlh;
  border-bottom: 1px solid var(--border-2);
  background: var(--background-2);
}

.playground-header h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  color: var(--text-1);
}

.playground-header p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-2);
  line-height: 1.4;
}

.inline-playground {
  margin: 2.5rem 0;
  border-radius: 12px;
  border: 1px solid var(--border-2);
  overflow: hidden;
  background: var(--background-white);
}

/* Sandpack customizations */
.code-playground .sp-wrapper,
.inline-playground .sp-wrapper {
  border: none !important;
  border-radius: 0 !important;
}

.code-playground .sp-layout,
.inline-playground .sp-layout {
  border: none !important;
}

.code-playground .sp-preview-container,
.inline-playground .sp-preview-container {
  border-left: 1px solid var(--border-2) !important;
}

/* Disable scrolling in iframes */
iframe {
  border-radius: 12px;
  border: none;
  overflow: hidden;
}

/* Default: content stays in the center column */
main > *,
main figure {
  grid-column: content;
}

/* Full-width sections break out */
.full-width {
  grid-column: full;
}
.media-section {
  grid-column: media;
  margin-top: 4.5rem;
  margin-bottom: 4.5rem;
}

.video-player video {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

.video-player-container {
  position: relative;
  overflow: hidden;
}

.video-controls-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.play-button {
  background: rgba(0, 0, 0, 0.8);
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  transition: background-color 0.2s ease;
}

.play-button:hover {
  background: rgba(0, 0, 0, 0.9);
}

.play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

strong {
  font-weight: var(--weight-medium);
  color: var(--text-1);
}

section + h2 {
  margin-top: 0;
}

hr {
  border: none;
  border-top: 1px solid var(--border-2);
  margin: 1rlh 0;
}

blockquote {
  margin-left: 0;
  font-size: 1.25rem;
  line-height: 1.3;
  display: block;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--background-black);
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: var(--weight-medium);
  color: var(--text-white);
  width: fit-content;
  text-decoration: none;
}

ul + h2 {
  margin-top: 1rlh;
}

dialog {
  --_gutter: 2rem;
  padding: 1rem;
  outline: unset;
  border: unset;
  background: unset;
  max-height: 100vh;
  cursor: zoom-out;
  margin: auto;
  overflow: hidden;

  &::backdrop {
    background: rgba(0, 0, 0, 0.8);
    opacity: 0.75;
  }

  form {
    position: absolute;
    opacity: 0;
    overflow: hidden;
  }

  figure {
    max-height: calc(100vh - calc(var(--_gutter) + 4rem));
  }

  img {
    max-height: calc(100vh - calc(var(--_gutter) + 4rem));
    width: auto;
  }
}

::view-transition-group(active-lightbox-image) {
  animation-duration: 500ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.spotlight-container {
  --font-size: inherit;
  --padding: 0.5em;
  --padding-right: 1.5em;
  --border-radius: 0.5em;
  --icon-padding: 0.5em;
  --skim-width: 2.5em;
  --icon-width: 1em;
  --icon-height: 1em;
  --leading-indent: 1em;
  --padding-left: calc(var(--leading-indent) + var(--icon-width) + 0.5em);

  --spotlight-background: #eee;
  --selection-border-radius: 0.25em;

  position: relative;
}

.spotlight *::selection {
  background: Highlight;
}
.spotlight * {
  font-size: var(--font-size);
  font-family: "Inter";
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: normal;
}
.spotlight {
  position: relative;
  border-radius: var(--border-radius);
  width: 100%;
  overflow: hidden;
  background: var(--spotlight-background);
  display: flex;
}
.spotlight input[type="search"] {
  font-size: var(--font-size);

  border: none;
  padding: var(--padding);

  color: var(--text-1);

  padding-left: var(--padding-left);
  padding-right: var(--padding-right);
  -webkit-appearance: none;
  appearance: none;
  background: var(--spotlight-background);

  text-overflow: ellipsis;
  text-rendering: optimizeLegibility !important;

  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.measure-kerning {
  font-size: var(--font-size);
  text-rendering: optimizeLegibility !important;
}
.spotlight input[type="search"]:focus {
  outline: none;
}
.spotlight:focus-within {
  outline: none;
  outline: 0.125em solid rgba(0, 0, 0, 0.2);
}
.spotlight:focus-within .cursor {
  display: none;
}
.spotlight .overlay {
  color: var(--text-1);
  position: absolute;
  left: 0;
  top: 0;
  padding: var(--padding);
  z-index: 1;
  padding-left: var(--padding-left);
  overflow: hidden;
  width: calc(100%);
  white-space: nowrap;
  pointer-events: none;
  font-size: var(--font-size);
}

.spotlight .overlay-user-value {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-rendering: optimizeLegibility !important;
  z-index: 2;
  position: relative;
}

.spotlight .overlay-completed-value-container {
  display: inline;
  border-radius: var(--selection-border-radius);
  overflow: hidden;
  background: Highlight;
  text-rendering: optimizeLegibility !important;
  z-index: 1;
  position: relative;
}

.spotlight .overlay-completed-value {
  color: black;
  text-rendering: optimizeLegibility !important;
}

.spotlight .overlay-completed-value-suffix {
  color: #0b78ef;
  text-rendering: optimizeLegibility !important;
}

.spotlight .search-icon {
  position: absolute;
  left: var(--leading-indent);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  width: var(--icon-width);
  height: var(--icon-height);
  flex-shrink: 0;
}

.spotlight .clear-button {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  right: 0;
  top: 0;
  z-index: 2;
  height: 100%;
  color: var(--text-3);
  cursor: pointer;
  padding: var(--icon-padding);
  border: none;
  background: transparent;
  flex-shrink: 0;
}

.spotlight .clear-button-icon {
  width: var(--icon-width);
  height: var(--icon-height);
  flex-shrink: 0;
}
.spotlight input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

.spotlight .skim {
  display: block;
  background: linear-gradient(
    to right,
    transparent,
    var(--spotlight-background) 50%
  );
  position: absolute;
  width: var(--skim-width);
  right: 0;
  top: 0;
  z-index: 1;
  height: 100%;
  pointer-events: none;
}

.spotlight-demo-container {
  padding: 1rlh;
  background-color: var(--background-2) !important;
}

@media (min-width: 1024px) {
  .spotlight-demo-container {
    padding: 4rem;
  }
}

a {
  word-break: break-all;
}

.force-font-kerning-auto * {
  font-kerning: auto !important;
}
.force-font-kerning-none * {
  font-kerning: none !important;
  font-feature-settings: "kern" 0 !important;
  text-rendering: optimizeLegibility !important;
}

.spotlight .cursor {
  display: flex;
  color: transparent;
}

.spotlight .cursor-line {
  display: block;
  width: 0.1em;
  height: 1lh;
  border-radius: 100px;
  animation: cursor-blink 1s alternate infinite both;
}

@keyframes cursor-blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

[z="2"] {
  transform: translate3d(15px, -30px, 0px);
  padding: 1rem;
  z-index: 2 !important;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(3px);

  position: relative;
}

@keyframes explode {
  0% {
    transform: translate3d(20px, -40px, 0px);
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
  }
  50% {
    transform: translate3d(0px, -0px, 0px);
    box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.1);
  }

  100% {
    transform: translate3d(20px, -40px, 0px);
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
  }
}

.explode-static {
  transform: translate3d(20px, -40px, 0px);
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
}
.explode-animated {
  animation: explode 4s alternate infinite both ease-in-out;
}

[skew="group"] {
  transform: scaleY(0.5) rotateZ(-15deg) skew(15deg) translateY(100px)
    translateX(-50px);
  position: relative;
  transform-origin: 0%;
  position: relative;
  margin: 100px auto;
}

.capitalization-teaser-line {
  font-size: 13px;
}

@media (min-width: 1024px) {
  .capitalization-teaser-line {
    font-size: 18px;
  }
}