@font-face {
    font-display: swap;
    font-family: DKeu;
    font-stretch: normal;
    font-style: normal;
    font-weight: 400;
    src: url(../charter_regular.woff2)format("woff2");
    unicode-range: U+000-5FF
}

@font-face {
    font-display:swap;
    font-family:DKeu;
    font-stretch:normal;
    font-style:italic;
    font-weight:400;
    src:url(../charter_italic.woff2)format("woff2");
    unicode-range:U+000-5FF
}

@font-face {
    font-display:swap;
    font-family:DKeu;
    font-stretch:normal;
    font-style:normal;
    font-weight:700;
    src:url(../charter_bold.woff2)format("woff2");
    unicode-range:U+000-5FF
}

@font-face {
    font-display:swap;
    font-family:DKeu;
    font-stretch:normal;
    font-style:italic;
    font-weight:700;
    src:url(../charter_bold_italic.woff2)format("woff2");
    unicode-range:U+000-5FF
}

@keyframes in {
    0% {
        filter: blur(.1rem);
        opacity: 0;
        transform: scale(.975)
    }

    to {
        filter: blur(0);
        opacity: 1;
        transform: scale(1)
    }
}

@supports (corner-shape:squircle) {
    :root {
        --squircle: 2
    }
}

@media (prefers-reduced-motion:reduce) {
    * {
        animation: none!important;
        scroll-behavior: auto!important;
        transition: none!important;
        transform: none!important
    }
}

@view-transition {
    navigation:auto
}

::view-transition-old(root) {
    opacity: 0
}

::view-transition-new(root) {
    animation: in .8s normal both;
    animation-delay: .2s;
    transform-origin: top center
}

::selection {
    background: light-dark(oklch(.374 .01 67.557999),oklch(.709 .01 56.258999));
    color: light-dark(oklch(.9436 .0084 56.31),oklch(.268 .007 34.298))
}

:focus-visible {
    outline: .125rem solid oklch(.5 .1553 24.73);
    outline-offset: -.125rem
}

:root {
    --squircle: 1
}

html {
    accent-color: oklch(.5 .1553 24.73);
    background: light-dark(oklch(.9436 .0084 56.31),oklch(.268 .007 34.298));
    caret-color: light-dark(oklch(.374 .01 67.557999),oklch(.709 .01 56.258999));
    color: light-dark(oklch(.374 .01 67.557999),oklch(.709 .01 56.258999));
    color-scheme: light dark;
    font: clamp(1.25rem,2.7vw + .1rem,1.75rem)/1.5 DKeu,Charter,"Bitstream Charter",Cambria,"Iowan Old Style","Palatino Linotype","URW Palladio L",P052,serif;
    scroll-behavior: smooth;
    scroll-padding-top: 4rem;
    text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none
}

body {
    margin: auto;
    max-width: 26rem;
    overflow-wrap: break-word;
    padding: 5rem 2rem 0;
    text-wrap: pretty
}

nav {
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none
}

nav a {
    font-size: .75rem
}

nav a:first-of-type {
    display: block;
    margin: 0 0 .25rem;
    transition: transform .25s cubic-bezier(0,0,.2,1);
    width: clamp(3.5rem,5.3vw + 1.2rem,4.5rem);
    will-change: transform
}

nav a:first-of-type:hover {
    transform: scale(1.15) rotate(1.75deg)
}

nav a:first-of-type:active {
    top: 0;
    transform: scale(.9) rotate(-1.75deg)
}

a {
    color: oklch(.5 .1553 24.73);
    text-decoration-color: light-dark(oklch(.5 .1553 24.73/25%),oklch(.5 .1553 24.73/50%));
    text-decoration-skip-ink: none;
    text-decoration-thickness: .1ch;
    text-underline-offset: .125rem;
    transition: text-decoration-color .15s cubic-bezier(0,0,.2,1)
}

a:hover {
    text-decoration-color: currentColor
}

h1,h2,h3,h4,h5,h6 {
    font-size: clamp(2.5rem,5.3vw + .2rem,3.5rem);
    font-weight: 700;
    line-height: 1.3;
    margin: 4rem 0 1.5rem;
    text-wrap: balance;
    hyphens: auto;
    transform-origin: left center;
    transform: scaleX(.75);
    letter-spacing: -.025ch;
    word-spacing: -.05ch
}

ul {
    margin: 2.5rem 0;
    padding: 0 0 0 1rem;
    list-style-type: circle
}

li+li {
    margin-top: .5rem
}

time {
    display: block;
    font-size: .75rem;
    letter-spacing: .1ch;
    font-style: italic
}

time:before {
    content: "Vom "
}

mark {
    background: oklch(.8437 .1329 68.870003);
    border-radius: calc(.5rem*var(--squircle));
    color: oklch(.374 .01 67.557999);
    corner-shape: squircle;
    cursor: context-menu;
    font-weight: 700;
    padding: .15rem .5rem
}

strong {
    font-weight: 700
}

iframe,img,video {
    border: 1rem solid light-dark(oklch(.8936 .0084 56.31),oklch(.318 .007 34.298));
    border-radius: calc(1rem*var(--squircle));
    box-sizing: border-box;
    corner-shape: squircle;
    transition: transform .25s cubic-bezier(0,0,.2,1);
    width: 100%;
    will-change: transform
}

iframe:hover,img:hover,video:hover {
    cursor: grab;
    transform: scale(1.05) rotate(.5deg)
}

figure {
    margin: 2.5rem 0;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none
}

.box figure {
    margin: 2rem 0
}

figcaption {
    color: oklch(.553 .013 58.070999);
    font-size: .75rem;
    font-style: italic;
    margin-top: .5rem
}

.box a,.btn,button {
    all: unset;
    background: oklch(.8437 .1329 68.870003);
    border-radius: calc(1rem*var(--squircle));
    box-shadow: inset 0 .188rem 0 oklch(1 0 0/15%),inset 0-.188rem 0 oklch(0 0 0/5%);
    box-sizing: border-box;
    color: oklch(.374 .01 67.557999);
    corner-shape: squircle;
    cursor: pointer;
    display: block;
    font-weight: 700;
    margin: 2.5rem 0 5rem;
    padding: 2.625rem 1rem;
    text-align: center;
    transition: box-shadow .15s cubic-bezier(0,0,.2,1),color .15s cubic-bezier(0,0,.2,1),background .15s cubic-bezier(0,0,.2,1),transform .25s cubic-bezier(0,0,.2,1);
    user-select: none;
    width: 100%;
    will-change: transform;
    -webkit-touch-callout: none;
    -webkit-user-select: none
}

.box a:hover,.btn:hover,button:hover {
    transform: scale(1.05) rotate(-.75deg)
}

.box a:active,.btn:active,button:active {
    top: 0;
    transform: scale(.95) rotate(.75deg)
}

.icon,.icons {
    background: oklch(.8437 .1329 68.870003);
    background-clip: text;
    color: transparent;
    display: inline-block;
    font-size: 1.25rem;
    letter-spacing: .25ch;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none
}

.icon {
    opacity: .25
}

kbd {
    background: light-dark(oklch(.8936 .0084 56.31),oklch(.318 .007 34.298));
    border-radius: calc(.5rem*var(--squircle));
    color: light-dark(oklch(.374 .01 67.557999),oklch(.709 .01 56.258999));
    corner-shape: squircle;
    cursor: context-menu;
    font-family: ui-monospace,monospace;
    font-size: .75rem;
    font-weight: 700;
    margin: 0 .25rem;
    padding: .25rem .5rem
}

blockquote {
    background: light-dark(oklch(.8936 .0084 56.31),oklch(.318 .007 34.298));
    border-radius: calc(1rem*var(--squircle));
    corner-shape: squircle;
    margin: 3rem 0;
    padding: 2rem;
    transform: rotate(1deg);
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none
}

cite {
    all: unset;
    display: block;
    font-size: .75rem;
    margin-top: 1rem
}

input,textarea {
    all: unset;
    background: light-dark(oklch(.8936 .0084 56.31),oklch(.318 .007 34.298));
    border-radius: calc(1rem*var(--squircle));
    box-sizing: border-box;
    color: light-dark(oklch(.374 .01 67.557999),oklch(.709 .01 56.258999));
    corner-shape: squircle;
    display: block;
    font-family: ui-monospace,monospace;
    font-size: .75rem;
    margin: 2.5rem 0;
    overflow: hidden;
    padding: 1rem;
    transition: transform .25s cubic-bezier(0,0,.2,1);
    width: 100%;
    will-change: transform
}

input:focus,textarea:focus {
    transform: scale(1.025) rotate(-.75deg)
}

textarea {
    aspect-ratio: 2
}

code,pre {
    all: unset;
    display: block;
    font-family: ui-monospace,monospace;
    font-size: .75rem;
    margin: 2.5rem 0
}

table {
    background: light-dark(oklch(.8936 .0084 56.31),oklch(.318 .007 34.298));
    border-radius: calc(1rem*var(--squircle));
    border-spacing: 1rem;
    corner-shape: squircle;
    cursor: cell;
    display: block;
    font-size: .75rem;
    margin: 2.5rem 0;
    overflow-x: auto;
    text-align: left;
    transition: transform .25s cubic-bezier(0,0,.2,1);
    user-select: none;
    width: 100%;
    will-change: transform;
    -webkit-touch-callout: none;
    -webkit-user-select: none
}

table:hover {
    transform: scale(1.05) rotate(.75deg)
}

th {
    font-weight: 700
}

td,th {
    text-align: start
}

details {
    margin: .5rem 0;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none
}

details:first-of-type {
    margin-top: 2rem
}

details:last-of-type {
    margin-bottom: 2.5rem
}

details[open] p {
    animation: in .8s normal both;
    animation-delay: .2s;
    padding-bottom: 1rem;
    transform-origin: top center
}

summary {
    color: oklch(.5 .1553 24.73);
    cursor: pointer;
    display: inline-block;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: light-dark(oklch(.5 .1553 24.73/25%),oklch(.5 .1553 24.73/50%));
    text-decoration-thickness: .15ch;
    text-underline-offset: .15rem;
    transition: text-decoration-color .15s cubic-bezier(0,0,.2,1)
}

summary:hover {
    text-decoration-color: currentColor
}

details>summary {
    list-style: none
}

details>summary::-webkit-details-marker {
    display: none
}

footer {
    border-top: .063rem solid light-dark(oklch(.374 .01 67.557999),oklch(.709 .01 56.258999));
    font-size: .75rem;
    font-style: italic;
    margin: 8rem 0 2rem;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none
}