*,:after,:before {
    box-sizing: border-box
}

blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul {
    margin: 0;
    padding: 0
}

h1,h2,h3,h4,h5,h6 {
    font-size: 100%;
    font-weight: 400
}

ul {
    list-style: none
}

button,input,select,textarea {
    margin: 0
}

img,video {
    height: auto;
    max-width: 100%
}

body {
    scroll-behavior: smooth;
    text-rendering: optimizeSpeed
}

a:not([class]) {
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink: auto
}

img {
    max-width: 100%;
    display: block
}

@font-face {
    font-family: VCR OSD Mono;
    src: url(/assets/fonts/VCROSDMono.woff2) format("woff2"),url(/assets/fonts/VCROSDMono.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@keyframes vline {
    0% {
        transform: translateY(-100%)
    }

    80%,to {
        transform: translateY(100vh)
    }
}

@keyframes turn-on-transform {
    0% {
        transform: scaleY(.6) translate(0) skew(2deg)
    }

    6% {
        transform: scale(2) translateY(-20%) skew(2deg)
    }

    30% {
        transform: scale(1) translateY(-20%) skew(-2deg)
    }

    50% {
        transform: scaleY(.8) translateY(40%) skew(-2deg)
    }

    to {
        transform: scale(1) translate(0) skew(0)
    }
}

@keyframes turn-on-filter {
    0% {
        filter: brightness(1) invert(1) saturate(1.2)
    }

    3% {
        filter: brightness(4) invert(1) saturate(2)
    }

    15% {
        filter: brightness(4) invert(0) saturate(2)
    }

    30%,50% {
        filter: brightness(10) invert(0) saturate(1)
    }

    70% {
        filter: contrast(1) brightness(1) invert(0) saturate(1)
    }
}

@keyframes float {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-20px)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes go-to-space {
    0% {
        transform: var(--startTransform)
    }

    to {
        transform: var(--endTransform)
    }
}

@keyframes exit-space {
    0% {
        transform: var(--endTransform)
    }

    to {
        transform: var(--startTransform)
    }
}

@keyframes moving-stars {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(-50%,-50%)
    }
}

@keyframes blink {
    50% {
        opacity: 0
    }
}

.header {
    position: relative;
    min-height: 300px;
    height: 50vh;
    margin-bottom: 2.07rem;
    text-transform: uppercase;
    -webkit-user-select: none;
    user-select: none
}

.header__container {
    position: -webkit-sticky;
    position: sticky;
    top: 100px
}

@media (min-width: 500px) {
    .header__container {
        display:flex;
        justify-content: space-between
    }

    .header__info {
        text-align: right
    }
}

.nav__breadcrumb {
    display: flex;
    align-items: center;
    min-height: 28px
}

.nav__breadcrumb li:not(:last-child):after {
    content: " /";
    margin-right: 1ch
}

.nav__breadcrumb li:last-child {
    display: flex;
    align-items: center
}

.nav__breadcrumb li:last-child:after {
    margin-left: .5ch;
    content: "►";
    font-size: 1.2em
}

.nav__breadcrumb li:last-child:focus-within:after {
    visibility: hidden
}

@media (max-width: 480px) {
    .nav {
        margin-bottom:2rem
    }

    .nav__menu li {
        margin-top: .6rem
    }
}

.text-nav {
    position: relative;
    caret-color: transparent;
    -webkit-user-select: text;
    user-select: text
}

.text-nav:focus {
    outline: none
}

.text-nav:focus:before {
    content: "_";
    position: absolute;
    bottom: 0;
    left: -9999ch;
    left: calc(var(--caret-position, -9999)*1ch);
    animation: blink .8s step-end infinite
}

.footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    align-self: flex-end;
    margin-top: 160px;
    padding-bottom: 2.94117647059rem;
    padding-bottom: var(--gui-bottom)
}

.big-text {
    font-size: clamp(24px,4.6vw,63px);
    font-size: var(--font-size-secondary);
    text-transform: uppercase
}

.button-text {
    font-family: inherit;
    color: inherit;
    text-decoration: inherit;
    font-size: inherit;
    background: inherit;
    text-transform: inherit;
    text-shadow: inherit;
    all: inherit;
    padding: 0;
    border: none;
    display: inline;
    color: #fff;
    color: var(--text-secondary);
    line-height: .9;
    -webkit-appearance: none;
    appearance: none
}

.button-text,a {
    position: relative;
    text-decoration: none;
    color: #fff;
    color: var(--text-secondary);
    transition: background-size .2s cubic-bezier(.29,.8,.21,.63);
    background-position: 50%;
    background-size: 90% 0;
    background-repeat: no-repeat
}

html:not(.webp) .button-text,html:not(.webp) a {
    background-image: url(/assets/images/rainbow-static.gif)
}

html.webp .button-text,html.webp a {
    background-image: url(/assets/images/rainbow-static.webp)
}

.button-text:hover,a:hover {
    cursor: url(/assets/images/cursor-pointer.png) 14 8,auto;
    background-size: 100% 100%
}

.button-text:hover:after,a:hover:after {
    visibility: visible;
    transition: visibility 0s .7s
}

.button-text[href^=http]:after,.button-text[href^=mailto]:after,a[href^=http]:after,a[href^=mailto]:after {
    display: block;
    content: attr(href);
    min-width: -webkit-max-content;
    min-width: max-content;
    position: absolute;
    z-index: 21;
    z-index: var(--layer-content-hover);
    background-color: rgba(0,0,0,.8);
    bottom: 100%;
    left: 0;
    margin-bottom: .5rem;
    font-size: .6rem;
    visibility: hidden;
    transition: none
}

.button-text:focus,a:focus {
    outline: none;
    background-size: 100% 100%
}

.button-text:focus:after,a:focus:after {
    visibility: visible
}

.bio__photo {
    position: relative;
    color: #fff;
    color: var(--text-secondary)
}

.bio__photo:after {
    content: "";
    display: block;
    position: absolute;
    z-index: 34;
    z-index: var(--layer-me-hover);
    top: calc(100% + 1em);
    left: 1rem;
    width: 14rem;
    padding-bottom: 14rem;
    visibility: hidden;
    background-size: cover
}

.bio__photo:focus:after,.bio__photo:hover:after {
    background-image: url(/assets/images/me.jpg);
    transition: visibility 0s .2s;
    visibility: visible
}

.playlist-list {
    margin-bottom: 2rem
}

.playlist-list li {
    margin-bottom: 1.4rem
}

.playlist-img {
    opacity: .3;
    visibility: hidden
}

.playlist-img,.playlist-img:before {
    background-size: cover;
    background-position: 50%;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0
}

.playlist-img:before {
    content: "";
    background-image: url(/assets/images/effect-static.gif);
    transition: opacity .4s
}

html.webp .playlist-img:before {
    background-image: url(/assets/images/effect-static.webp)
}

.playlist-link:focus+.playlist-img,.playlist-link:hover+.playlist-img {
    visibility: visible;
    background-image: var(--image)
}

.playlist-link:focus+.playlist-img:before,.playlist-link:hover+.playlist-img:before {
    opacity: .2
}

.project-list {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 3.4rem;
    gap: 3.4rem
}

.project-list a {
    font-size: clamp(24px,4.6vw,63px);
    font-size: var(--font-size-secondary);
    line-height: 1;
    text-transform: uppercase
}

.project-list small {
    display: block;
    color: #a0a0a0;
    color: var(--text-primary);
    font-size: clamp(16px,1.8vw,34px);
    font-size: var(--font-size-primary)
}

@media (min-width: 580px) {
    .project-list {
        grid-template-columns:1fr 1fr
    }
}

.tv {
    position: relative;
    background-color: #000;
    overflow: hidden;
    margin: 0 auto
}

.tv-screen {
    animation: turn-on-transform .4s,turn-on-filter 1s
}

.tv-effect {
    position: absolute;
    z-index: 8;
    z-index: var(--layer-tv-effects);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.tv-effect.--static {
    background-size: cover;
    opacity: .1;
    background-image: url(/assets/images/effect-static.gif)
}

body:not([channel]) .tv-effect.--static,body[channel="0"] .tv-effect.--static {
    opacity: .2
}

html.webp .tv-effect.--static {
    background-image: url(/assets/images/effect-static.webp)
}

.tv-effect.--artifacts {
    background-image: url(/assets/images/effect-artifacts.gif);
    background-size: cover;
    opacity: .4
}

html.webp .tv-effect.--artifacts {
    background-image: url(/assets/images/effect-artifacts.webp)
}

.tv-effect.--vignette {
    background: radial-gradient(circle,transparent 60%,#000 100%),transparent
}

.tv-effect.--decontrast {
    background-color: #fff;
    opacity: .2
}

body:not([camera]) .tv-effect.--decontrast {
    display: none
}

.tv-effect.--crt: after,.tv-effect.--crt:before {
    content:"";
    display: block;
    position: absolute;
    z-index: 8;
    z-index: var(--layer-tv-effects);
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none
}

.tv-effect.--crt: before {
    height:90px;
    background: linear-gradient(180deg,transparent,hsla(0,100%,99%,.14902) 50%,transparent);
    animation: vline 8s linear infinite
}

.tv-effect.--crt: after {
    height:100%;
    background-image: repeating-linear-gradient(transparent,transparent 6px,hsla(0,0%,100%,.03) 0,hsla(0,0%,100%,.03) 12px)
}

.tv-content {
    position: relative;
    z-index: 13;
    z-index: var(--layer-content);
    overflow-x: hidden;
    overflow-y: auto;
    overflow: hidden auto;
    background-color: rgba(0,0,0,.4)
}

.space {
    position: relative;
    background-color: #000;
    overflow: hidden
}

.stars {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    width: 4000px;
    height: 2750px
}

@media (min-width: 3840px) {
    .stars {
        width:8000px;
        height: 5500px
    }
}

body[space] .stars {
    animation: moving-stars 117s linear infinite;
    background-image: url(/assets/images/stars.jpg)
}

html.webp body[space] .stars {
    background-image: url(/assets/images/stars.webp)
}

html.avif body[space] .stars {
    background-image: url(/assets/images/stars.avif)
}

body[space=floating] .spaceship {
    animation: float 6s ease-in-out infinite
}

.tv {
    --spaceIntro: 0.8s;
    --spaceOutroDelay: 0.2s;
    transform-origin: center 10%;
    transition: box-shadow .6s ease-out
}

body[space] .tv {
    --scale: 0.6;
    --startTransform: scale(1) translateY(0);
    --endTransform: scale(var(--scale)) translateY(80px);
    animation-duration: var(--spaceIntro);
    animation-timing-function: cubic-bezier(.72,.27,0,1);
    animation-fill-mode: both
}

@media (max-width: 900px) {
    body[space] .tv {
        --scale:0.9;
        transition: box-shadow .6s ease-out,height var(--spaceIntro) ease;
        will-change: height,transform
    }
}

body[space=exiting] .tv,body[space=floating] .tv {
    box-shadow: 0 0 50px 1px hsla(0,0%,100%,.2)
}

body[space=entering] .tv,body[space=floating] .tv {
    animation-name: go-to-space
}

@media (max-width: 900px) {
    body[space=entering] .tv,body[space=floating] .tv {
        height:56.25vw
    }
}

body[space=exiting] .tv {
    transform: var(--endTransform);
    animation-name: exit-space;
    animation-delay: var(--spaceOutroDelay)
}

@media (max-width: 900px) {
    body[space=exiting] .tv {
        transition-delay:var(--spaceOutroDelay)
    }
}

body.loading-channel .tv-screen {
    filter: brightness(3) saturate(.15) contrast(1.2)
}

body.loading-channel .tv-effect.--static {
    opacity: .4
}

body.loading-channel .tv-effect.--artifacts {
    opacity: .7
}

body.loading-page .tv-screen {
    filter: brightness(3) grayscale(1) contrast(1.2)
}

body.loading-page .tv-effect.--decontrast {
    display: block;
    opacity: .2
}

body.loading-page .tv-effect.--static {
    opacity: .3
}

body.loading-page .tv-effect.--artifacts {
    opacity: .8
}

body.loading-page .tv-effect.--crt: before {
    animation-duration:.25s
}

body.loading-page .tv-content {
    filter: blur(5px);
    pointer-events: none
}

:root {
    --text-primary: #a0a0a0;
    --text-secondary: #fff;
    --font-primary: "VCR OSD Mono",monospace;
    --font-size-primary: clamp(16px,1.8vw,34px);
    --font-size-secondary: clamp(24px,4.6vw,63px);
    --line-height: 1.4;
    --layer-top: 55;
    --layer-me-hover: 34;
    --layer-content-hover: 21;
    --layer-content: 13;
    --layer-tv-effects: 8;
    --layer-channels: 5;
    --glitchy-blue: rgba(2,183,182,0.4);
    --glitchy-red: rgba(183,2,2,0.4);
    --container-width: 80%;
    --gui-side: calc(50% - var(--container-width)/2);
    --gui-bottom: 2.94117647059rem
}

* {
    scrollbar-width: thin;
    scrollbar-color: #28272a transparent
}

::-webkit-scrollbar-track {
    background-color: transparent
}

::-webkit-scrollbar {
    width: 3px
}

::-webkit-scrollbar-thumb {
    background-color: #28272a
}

::selection {
    background-color: #fff;
    color: #000
}

html {
    font-family: VCR OSD Mono,monospace;
    font-family: var(--font-primary);
    font-weight: 400;
    font-style: normal;
    color: #a0a0a0;
    color: var(--text-primary);
    font-size: clamp(16px,1.8vw,34px);
    font-size: var(--font-size-primary);
    line-height: 1.4;
    line-height: var(--line-height)
}

body {
    background-color: #000;
    overflow: hidden
}

.space,.spaceship,.tv,.tv-content,.tv-screen,body,html {
    height: 100%
}

.page-container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    max-width: 100%;
    min-height: 100vh;
    width: 80%;
    width: var(--container-width);
    margin: 0 auto
}

body.hide-content .page-container {
    visibility: hidden
}

.glitchy-text {
    --shadow-x-distance: 2px;
    --shadow-y-distance: 1px;
    text-shadow: var(--shadow-x-distance) var(--shadow-y-distance) 0 rgba(2,183,182,.4),calc(var(--shadow-x-distance)*-1) calc(var(--shadow-y-distance)*-1) 0 rgba(183,2,2,.4);
    text-shadow: var(--shadow-x-distance) var(--shadow-y-distance) 0 var(--glitchy-blue),calc(var(--shadow-x-distance)*-1) calc(var(--shadow-y-distance)*-1) 0 var(--glitchy-red)
}

@media (min-width: 481px) {
    .glitchy-text {
        --shadow-x-distance:3px;
        --shadow-y-distance: 2px
    }
}

@media (min-width: 960px) {
    .glitchy-text {
        --shadow-x-distance:4px;
        --shadow-y-distance: 3px
    }
}

.cursor-default {
    cursor: url(/assets/images/cursor-default.png) 0 0,auto
}

.cursor-pointer {
    cursor: url(/assets/images/cursor-pointer.png) 14 8,auto
}

.skip-link {
    position: absolute;
    z-index: 55;
    z-index: var(--layer-top);
    top: 0;
    left: 0
}

.skip-link:not(:focus) {
    transform: translateX(-100%)
}

.visually-hidden {
    visibility: hidden
}

.spacer-t {
    margin-top: 2rem
}

.spacer-b {
    margin-bottom: 2rem
}

.volume.svelte-1cukcpa {
    position: absolute;
    z-index: calc(var(--layer-tv-effects) + 1);
    left: var(--gui-side);
    bottom: var(--gui-bottom);
    font-size: var(--font-size-secondary);
    filter: blur(1px)
}

.track.svelte-1cukcpa {
    display: flex
}

video.svelte-60jbj3.svelte-60jbj3 {
    transform: scaleX(-1)
}

.rec-wrapper.svelte-60jbj3.svelte-60jbj3 {
    position: absolute;
    z-index: calc(var(--layer-tv-effects) + 1);
    bottom: var(--gui-bottom);
    right: var(--gui-side);
    filter: blur(1px)
}

body:not([camera]) .rec-wrapper.svelte-60jbj3.svelte-60jbj3 {
    display: none
}

.rec.svelte-60jbj3.svelte-60jbj3 {
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.rec.svelte-60jbj3 span.svelte-60jbj3 {
    content: "";
    display: inline-block;
    width: .6em;
    height: .6em;
    margin-left: .5em;
    border-radius: 50%;
    background-color: red;
    box-shadow: 3px 0 0 var(--glitchy-blue),-3px 0 0 var(--glitchy-red);
    animation: blink 1.4s step-end infinite
}

.tv-videos.svelte-18atvsb {
    z-index: var(--layer-channels);
    overflow: hidden;
    pointer-events: none
}

.tv-videos.svelte-18atvsb .tv-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.tv-videos.svelte-18atvsb .tv-video[channel="2"],.tv-videos.svelte-18atvsb .tv-video[channel="8"] {
    -o-object-position: center top;
    object-position: center top
}

.perspective.svelte-1vrpccc.svelte-1vrpccc {
    perspective: 2300px;
    position: fixed;
    z-index: var(--layer-top);
    top: 101%;
    right: var(--gui-side);
    -webkit-user-select: none;
    user-select: none
}

body:not([space]) .perspective.svelte-1vrpccc.svelte-1vrpccc {
    display: none
}

body[space] .perspective.svelte-1vrpccc.svelte-1vrpccc {
    --plastic-texture-img: url(/assets/images/plastic-texture-noise.png)
}

@media(max-height: 800px) {
    .perspective.svelte-1vrpccc.svelte-1vrpccc {
        transform:scale(.65);
        transform-origin: 50% 0
    }
}

@media(max-width: 400px) {
    .perspective.svelte-1vrpccc.svelte-1vrpccc {
        right:50%;
        transform: translateX(50%)
    }
}

.wrapper.svelte-1vrpccc.svelte-1vrpccc {
    transform: rotateX(0) translateY(0);
    transform-origin: 50% bottom;
    transition: transform .3s ease-out
}

body[space=floating] .wrapper.svelte-1vrpccc.svelte-1vrpccc {
    transform: rotateX(20deg) translateY(-120%)
}

.remote.svelte-1vrpccc.svelte-1vrpccc {
    --remote-font: Andale Mono,Trebuchet MS,sans-serif;
    position: relative;
    width: 310px;
    height: 730px;
    padding: 50px 12px 110px;
    border-radius: 16px 16px 12px 12px/8px 8px 24px 24px;
    background-color: #f1f2f6;
    background-image: none,linear-gradient(180deg,#d8d8d8,#a5a5a5 74%);
    background-image: var(--plastic-texture-img,none),linear-gradient(180deg,#d8d8d8,#a5a5a5 74%);
    box-shadow: inset 0 14px 6px 0 #e0e0e0,inset 0 8px 10px 0 #252424,inset 0 -11px 10px 0 #444;
    font-family: var(--remote-font);
    font-size: 13px;
    text-shadow: none
}

.inner.svelte-1vrpccc.svelte-1vrpccc {
    margin: 40px 28px 50px;
    padding: 2.5em 15px 1em;
    border-radius: 10px;
    box-shadow: -20px -30px 0 0 #000,20px 30px 0 0 #000,-20px 30px 0 0 #000,20px -30px 0 0 #000,-22px -32px 0 0 #696464,-22px 32px 0 0 #696464,22px -32px 0 0 #696464,22px 32px 0 0 #696464,inset 0 0 6px 2px #646464,inset 0 0 0 1px #000;
    background-image: repeating-linear-gradient(180deg,hsla(0,0%,100%,0),hsla(0,0%,100%,0) 6%,hsla(0,0%,100%,.08) 6.5%,hsla(0,0%,100%,0) 7%),repeating-linear-gradient(180deg,transparent,transparent 4%,rgba(0,0,0,.03) 4.5%,transparent 5%),repeating-linear-gradient(180deg,hsla(0,0%,100%,0),hsla(0,0%,100%,0) 1.2%,hsla(0,0%,100%,.15) 2.2%,hsla(0,0%,100%,0) 3%),linear-gradient(to bottom right,#c7c7c7 0,#e6e6e6 47%,#c7c7c7 53%,#e6e6e6)
}

.buttons.svelte-1vrpccc.svelte-1vrpccc {
    display: grid;
    grid-template-columns: repeat(3,32px);
    justify-content: space-around;
    grid-row-gap: 36px;
    row-gap: 36px
}

.numbers.svelte-1vrpccc.svelte-1vrpccc {
    margin: -23px -25px 16px;
    padding: 22px;
    display: grid;
    grid-column: 1/-1;
    grid-template: inherit;
    grid-gap: inherit;
    gap: inherit;
    justify-content: space-between;
    border: 3px solid #000;
    border-radius: 10px
}

.control.svelte-1vrpccc.svelte-1vrpccc {
    position: relative;
    text-align: center
}

.control.svelte-1vrpccc span.svelte-1vrpccc {
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: -webkit-max-content;
    width: max-content;
    transform: translateX(-50%);
    color: #000;
    margin-bottom: .4em
}

.hide-text.svelte-1vrpccc.svelte-1vrpccc {
    font-size: 0;
    text-indent: -999px;
    color: transparent
}

button.svelte-1vrpccc.svelte-1vrpccc {
    cursor: url(/assets/images/cursor-pointer.png) 14 8,auto;
    width: 100%;
    height: 25px;
    border: 0 solid #222;
    border-radius: 3px;
    box-shadow: 1px 3px 0 0 #222,-1px 3px 0 0 #222;
    font-size: 1.4em;
    font-family: var(--remote-font);
    color: #fff;
    background-color: #000;
    background-image: none,linear-gradient(315deg,#000,#414141 74%);
    background-image: var(--plastic-texture-img,none),linear-gradient(315deg,#000,#414141 74%);
    background-size: 200%,auto
}

button.svelte-1vrpccc.svelte-1vrpccc:focus {
    outline: none
}

button.svelte-1vrpccc.svelte-1vrpccc:active {
    border-width: 1px;
    transform: translateY(2px);
    box-shadow: 1px 1px 0 0 #222,-1px 1px 0 0 #222
}

.onoff.svelte-1vrpccc.svelte-1vrpccc {
    grid-area: 1/2
}

.onoff.svelte-1vrpccc button.svelte-1vrpccc {
    background-image: var(--plastic-texture-img),linear-gradient(315deg,#631111,#dc2525 74%)
}

.vol.up.svelte-1vrpccc.svelte-1vrpccc {
    grid-area: 1/1
}

.vol.down.svelte-1vrpccc.svelte-1vrpccc {
    grid-area: 2/1
}

.mute.svelte-1vrpccc.svelte-1vrpccc {
    grid-area: 2/2
}

.ch.up.svelte-1vrpccc.svelte-1vrpccc {
    grid-area: 1/3
}

.ch.down.svelte-1vrpccc.svelte-1vrpccc {
    grid-area: 2/3
}

.showhide.svelte-1vrpccc.svelte-1vrpccc {
    grid-area: 4/2/4/4
}

.showhide.svelte-1vrpccc button.svelte-1vrpccc {
    font-size: 1em;
    font-weight: 700;
    width: 100%;
    background-image: var(--plastic-texture-img),linear-gradient(315deg,#a71111,#c32b2b 34%);
    background-size: 100%,auto;
    color: #fbcfcf
}

.brand.svelte-1vrpccc.svelte-1vrpccc {
    font-weight: 700;
    grid-area: -1/1/-1/-1;
    text-align: center;
    color: #000
}

img.svelte-1vrpccc.svelte-1vrpccc {
    display: inline-block
}

.channel-controller.svelte-zwh9ot {
    display: flex;
    width: 15ch;
    align-items: center;
    justify-content: space-between
}

button.svelte-zwh9ot {
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    text-shadow: inherit;
    font-family: inherit;
    font-size: .9rem
}

button.svelte-zwh9ot:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 60px;
    height: 60px
}

button.svelte-6brq6f {
    font-family: var(--font-primary);
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    border: none;
    padding: 0;
    opacity: .2;
    transition: opacity .3s ease;
    color: currentColor;
    font-size: 1rem
}

button.svelte-6brq6f:hover {
    opacity: 1;
    background-image: url(/assets/images/stars.jpg);
    background-size: 0 0;
    background-repeat: no-repeat
}

html.webp button.svelte-6brq6f:hover {
    background-image: url(/assets/images/stars.webp)
}

html.avif button.svelte-6brq6f:hover {
    background-image: url(/assets/images/stars.avif)
}

body.hide-content button.svelte-6brq6f {
    visibility: visible
}