@charset "UTF-8"; /* Breakpoints */ @keyframes flip-r { 50% { transform: translateX(100%); opacity: 0; } 51% { transform: translateX(-100%); opacity: 0; } } @keyframes flip-l { 50% { transform: translateX(-100%); opacity: 0; } 51% { transform: translateX(100%); opacity: 0; } } @keyframes flip-d { 50% { transform: translateY(100%); opacity: 0; } 51% { transform: translateY(-100%); opacity: 0; } } @keyframes flip-u { 50% { transform: translateY(-100%); opacity: 0; } 51% { transform: translateY(100%); opacity: 0; } } :root { --black: #000000; --white: #d9d9d9; --pink: #DAC3C3; --green: #D8E3D3; --cream: #F2F1F1; --grey: #2B2B2B; } :root .theme-light { --theme-bg: #d9d9d9; --theme-fg: #000000; } :root .theme-dark { --theme-bg: #000000; --theme-fg: #d9d9d9; } :root { --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22); --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335); --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1); --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955); --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1); --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1); --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1); --ease-in-out-expo: cubic-bezier(1, 0, 0, 1); --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86); --ease-custom: cubic-bezier(0.315, 0.365, 0.23, 0.985); } /*** The new CSS reset - version 1.9 (last updated 19.6.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } .lily-cursor { z-index: 20; } .site-header { z-index: 10; } .full-width { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .overflow-hidden { overflow: hidden; } .relative { position: relative; } @media (min-width: 800px) { .mobile-only { display: none !important; } } @media (max-width: 799px) { .desktop-only { display: none !important; } } html:not(.has-scroll-smooth) .hide-on-native-scroll { display: none; } html.has-scroll-smooth .hide-on-smooth-scroll { display: none; } /* Font Weights: 100 - Thin 200 - Extra Light (Ultra Light) 300 - Light 400 - Normal 500 - Medium 600 - Semi Bold (Demi Bold) 700 - Bold 800 - Extra Bold (Ultra Bold) 900 - Black (Heavy) */ /* Leibniz Fraktur */ @font-face { font-family: "Leibniz Fraktur"; font-style: normal; font-weight: 400; src: url("./leibniz-fraktur-BqdMSuEI.woff2") format("woff2"), url("./leibniz-fraktur-CvnkUeBX.woff") format("woff"); } /* Geist Mono */ @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 700; src: url("./geist-mono-bold-CTLtpKvJ.woff2") format("woff2"), url("./geist-mono-bold-Bz_UliG4.woff") format("woff"); } @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; src: url("./geist-mono-BzrJhchg.woff2") format("woff2"), url("./geist-mono-OFKGen7b.woff") format("woff"); } :root { --font-display: 'Leibniz Fraktur', serif; --font-mono: 'Geist Mono', monospace; } :root { --layout-column-count: 5; --layout-column-gap: 4.5454545455vw; --layout-margin: 6.8181818182vw; --layout-width: calc(100vw - (2 * var(--layout-margin))); --layout-column-width: calc( ( var(--layout-width) - ( (var(--layout-column-count) - 1) * var(--layout-column-gap) ) ) / var(--layout-column-count) ); } @media (min-width: 800px) { :root { --layout-column-count: 18; --layout-column-gap: 1.1574074074vw; --layout-margin: 3.4722222222vw; } } .layout-block, .layout-grid { max-width: var(--layout-width); margin-left: auto; margin-right: auto; width: 100%; } .layout-block-inner, .layout-grid-inner { padding-left: var(--layout-margin); padding-right: var(--layout-margin); width: 100%; } .layout-grid { display: grid; grid-template-columns: repeat(var(--layout-column-count), minmax(0, 1fr)); grid-gap: var(--layout-column-gap); } .layout-grid-inner { display: grid; grid-template-columns: repeat(var(--layout-column-count), minmax(0, 1fr)); grid-gap: var(--layout-column-gap); } html:not(.dev), html:not(.dev) * { scrollbar-width: none !important; -ms-overflow-style: none !important; } html:not(.dev)::-webkit-scrollbar, html:not(.dev) *::-webkit-scrollbar { width: 0 !important; height: 0 !important; } html.lenis { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-scrolling iframe { pointer-events: none; } .fade-enter-active, .fade-leave-active { transition: opacity 400ms; } .fade-enter-from, .fade-leave-to { opacity: 0; } .quick-fade-enter-active, .quick-fade-leave-active { transition: opacity 100ms; } .quick-fade-enter-from, .quick-fade-leave-to { opacity: 0; } .slow-fade-enter-active, .slow-fade-leave-active { transition: opacity 600ms; } .slow-fade-enter-from, .slow-fade-leave-to { opacity: 0; } .slide-up-enter-active, .slide-up-leave-active { transition: transform 400ms var(--ease-out-quad); } .slide-up-enter-from, .slide-up-leave-to { transform: translateY(-100%); } .slide-left-enter-active, .slide-left-leave-active { transition: transform 400ms var(--ease-out-quad); } .slide-left-enter-from, .slide-left-leave-to { transform: translateX(-100%); } :root { font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; background: var(--white); color: var(--black); font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; min-height: 100vh; } .h1, h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.1em; font-size: 6.1363636364vw; } .h1.vh, h1.vh, h2.vh, h3.vh, h4.vh, h5.vh, h6.vh { font-size: 2.8242677824vh; } @media (min-width: 800px) { .h1, h1, h2, h3, h4, h5, h6 { font-size: 2.4305555556vw; } .h1.vh, h1.vh, h2.vh, h3.vh, h4.vh, h5.vh, h6.vh { font-size: 3.7600716204vh; } } .p, p, a, button, input, pre { font-family: var(--font-mono); font-weight: 400; letter-spacing: 0.03em; font-size: 4.0909090909vw; } .p.vh, p.vh, a.vh, button.vh, input.vh, pre.vh { font-size: 1.8828451883vh; } @media (min-width: 800px) { .p, p, a, button, input, pre { font-size: 1.4467592593vw; } .p.vh, p.vh, a.vh, button.vh, input.vh, pre.vh { font-size: 2.2381378693vh; } } .entry img { max-width: 100%; height: auto; } .entry p { min-height: 1px; } .entry a { text-decoration: underline; } .entry > * { margin-bottom: 1em; margin-top: 1em; } .entry > *:first-child { margin-top: 0; } .entry > *:last-child { margin-bottom: 0; } .entry ul li, .entry ol li { margin-bottom: 1em; width: 33.3912037037vw; } .entry ul { list-style: disc; padding-left: 1em; } #app { min-height: 100vh; } @keyframes blink { 5% { opacity: 0; } 40% { opacity: 0; } 60% { opacity: 1; } 95% { opacity: 1; } } @keyframes bonk { 0% { transform: rotate(calc(var(--bonk-angle) * -1)); } 50% { transform: rotate(var(--bonk-angle)); } }/* Breakpoints */ @keyframes flip-r { 50% { transform: translateX(100%); opacity: 0; } 51% { transform: translateX(-100%); opacity: 0; } } @keyframes flip-l { 50% { transform: translateX(-100%); opacity: 0; } 51% { transform: translateX(100%); opacity: 0; } } @keyframes flip-d { 50% { transform: translateY(100%); opacity: 0; } 51% { transform: translateY(-100%); opacity: 0; } } @keyframes flip-u { 50% { transform: translateY(-100%); opacity: 0; } 51% { transform: translateY(100%); opacity: 0; } } .container { min-height: calc(100 * var(--vh)); max-width: 100vw; overflow-x: clip; background: var(--theme-bg); color: var(--theme-fg); transition: opacity 1000ms; } .container:not(.fonts-ready) { opacity: 0; }