.sr-only {
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap
}

html {
    box-sizing: border-box;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth
}

*,
:after,
:before {
    box-sizing: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

body {
    font-size: 1em;
    line-height: 1.4;
    margin: 0
}

::selection {
    background: #292929;
    color: #fff;
    text-shadow: none
}

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

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
    display: block
}

summary {
    display: list-item
}

audio,
canvas,
video {
    display: inline-block
}

[hidden] {
    display: none
}

h1,
h2,
h3,
h4,
h5,
h6 {
    display: inherit;
    font-size: inherit;
    font-weight: inherit;
    margin: 0
}

a {
    color: #292929;
    cursor: pointer;
    text-decoration: none
}

a:active,
a:focus,
a:hover {
    color: #292929;
    outline: none
}

figure,
form,
p {
    margin: 0
}

bbr[title] {
    border-bottom: 1px dotted
}

blockquote {
    margin: 1em 40px
}

dfn {
    font-style: italic
}

ins {
    background: #ff9;
    text-decoration: none
}

ins,
mark {
    color: #000
}

mark {
    background: #ff0;
    font-style: italic;
    font-weight: 700
}

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

pre {
    font-family: monospace, monospace;
    font-size: 1em;
    white-space: pre-wrap;
    word-wrap: break-word
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

ol,
ul {
    list-style: none;
    margin: 0;
    padding: 0
}

dd {
    margin: 0 0 0 40px
}

img {
    border: 0;
    vertical-align: middle
}

svg:not(:root) {
    overflow: hidden
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td {
    vertical-align: top
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0
}

label {
    cursor: pointer
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    white-space: normal
}

button,
legend {
    border: 0;
    padding: 0
}

button,
input {
    line-height: normal
}

[type=button],
[type=reset],
[type=submit],
button {
    -webkit-appearance: button;
    appearance: button;
    cursor: pointer
}

button[disabled],
input[disabled] {
    cursor: default
}

[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=search] {
    -webkit-appearance: textfield;
    appearance: textfield;
    box-sizing: content-box;
    outline-offset: -2px
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner,
input::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText
}

textarea {
    overflow: auto;
    resize: vertical;
    vertical-align: top
}

input:invalid,
textarea:invalid {
    background-color: #f0dddd
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

b,
strong {
    font-weight: bolder
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0
}

button,
select {
    text-transform: none
}

progress {
    vertical-align: baseline
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

@media print {
    * {
        background: transparent;
        box-shadow: none;
        color: #000;
        filter: none;
        text-shadow: none
    }

    a,
    a:visited {
        text-decoration: underline
    }

    a[href]:after {
        content: " (" attr(href) ")"
    }

    abbr[title]:after {
        content: " (" attr(title) ")"
    }

    .ir a:after,
    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: ""
    }

    blockquote,
    pre {
        border: 1px solid #999;
        page-break-inside: avoid
    }

    thead {
        display: table-header-group
    }

    img,
    tr {
        page-break-inside: avoid
    }

    img {
        max-width: 100%
    }

    @page {
        margin: .5cm
    }

    h2,
    h3,
    p {
        orphans: 3;
        widows: 3
    }

    h2,
    h3 {
        page-break-after: avoid
    }
}

@font-face {
    font-display: swap;
    font-family: Geist;
    font-stretch: normal;
    font-style: normal;
    font-weight: 100 900;
    src: url(../fonts/Geist-VariableFont_wght.ttf) format("ttf")
}

@font-face {
    font-display: swap;
    font-family: GeistMono;
    font-stretch: normal;
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/GeistMono-Regular.woff2) format("woff2")
}

.access-link:before {
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.btn {
    align-items: center;
    background-color: transparent;
    display: flex;
    justify-content: center
}

.btn svg {
    aspect-ratio: 1;
    width: 1rem
}

.btn svg path {
    stroke: currentColor;
    transition: stroke .2s ease-in-out
}

.btn.btn-primary {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background-color: light-dark(rgba(41, 41, 41, .08), hsla(0, 0%, 100%, .08));
    border-radius: 100px;
    color: light-dark(#3d3d3d, #fff);
    font-size: .75rem;
    gap: .375rem;
    line-height: .875rem;
    padding: .375rem 1rem
}

.btn.clock {
    text-align: center;
    width: 3.875rem
}

.btn.weather {
    gap: .625rem
}

.btn.btn-secondary {
    align-items: center;
    aspect-ratio: 1;
    background-color:light-dark( #40404035, #4040407b);
    border-radius: 100px;
    color: hsla(0, 0%, 100%, .36);
    display: flex;
    justify-content: center;
    position: relative;
    transition: background-color .2s ease-in-out;
    width: 1.75rem
}

.btn.btn-secondary.hover:before {
    border: 2px solid transparent;
    border-radius: 100px;
    content: "";
    inset: 0;
    position: absolute;
    transition: inset .2s ease-in-out, border-color .2s ease-in-out
}

@media(min-width: 62rem) {

    .btn.btn-secondary.hover.active,
    .btn.btn-secondary.hover:active,
    .btn.btn-secondary.hover:focus,
    .btn.btn-secondary.hover:hover {
        background-color: #fff;
        color: #292929
    }

    .btn.btn-secondary.hover.active:before,
    .btn.btn-secondary.hover:active:before,
    .btn.btn-secondary.hover:focus:before,
    .btn.btn-secondary.hover:hover:before {
        border-color: #fff;
        inset: -4px
    }

    .btn.btn-secondary.hover.active svg path,
    .btn.btn-secondary.hover:active svg path,
    .btn.btn-secondary.hover:focus svg path,
    .btn.btn-secondary.hover:hover svg path {
        stroke: #292929
    }
}

.btn.btn-secondary.picture img {
    border-radius: 100%;
    height: 1.75rem;
    object-fit: cover;
    width: 1.75rem
}

.btn.btn-secondary.theme {
    align-items: center;
    color: hsla(0, 0%, 100%, .7);
    display: flex;
    flex-direction: column;
    font-size: .6875rem;
    font-weight: 500;
    justify-content: flex-end;
    line-height: 1rem;
    padding: 0 0 .1875rem;
    transition: color .2s ease-in-out
}

.btn.btn-secondary.theme:after {
    aspect-ratio: 1;
    background-color: currentColor;
    border-radius: 6.25rem;
    content: "";
    left: 50%;
    position: absolute;
    top: 3px;
    transform: translateX(-50%);
    transition: background-color .2s ease-in-out;
    width: .375rem
}

.btn.btn-secondary.theme.theme-light,
.btn.btn-secondary.theme.theme-system {
    background-color: #fff;
    color: #292929
}

.btn.btn-secondary.theme.theme-dark {
    background-color: #080808;
    color: #fff
}

.btn.btn-contact {
    background-image: linear-gradient(0deg, #111113 2.34%, #5b5b63);
    border-radius: .375rem;
    box-shadow: 0 0 0 1px #1f1f22;
    padding: 1px
}

.btn.btn-contact span {
    align-items: center;
    background: linear-gradient(180deg, #404045, #1a1a1c) padding-box, linear-gradient(0deg, #111113 2.34%, #5b5b63) border-box;
    border-radius: .3125rem;
    color: #fff;
    display: flex;
    font-size: .875rem;
    font-weight: 500;
    gap: .625rem;
    justify-content: center;
    line-height: 1rem;
    padding: .375rem .75rem
}

.btn.btn-contact:hover span {
    background-image: linear-gradient(180deg, hsla(0, 0%, 100%, .32), hsla(0, 0%, 100%, .08));
}

.btn.btn-picture {
    border-radius: 1.25rem;
    height: 8.75rem;
    overflow: hidden;
    position: relative;
    width: 8.75rem
}

@media(min-width: 62rem) {
    .btn.btn-picture {
        filter: grayscale(1);
        transform: scale(1);
        transition: transform .3s ease-in-out, filter .3s ease-in-out
    }

    .btn.btn-picture:hover {
        filter: grayscale(0);
        transform: scale(1.1);
        z-index: 1
    }
}

.btn.btn-picture img {
    height: 100%;
    object-fit: cover;
    width: 100%
}

.btn.btn-picture span {
    -webkit-backdrop-filter: blur(37px);
    backdrop-filter: blur(37px);
    background: rgba(41, 41, 41, .08);
    bottom: .375rem;
    left: 50%;
    padding: .5rem 1rem;
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap
}

.btn.btn-background-remove,
.btn.btn-picture span,
.btn.btn-popin-close {
    align-items: center;
    border-radius: 6.25rem;
    color: #fff;
    display: flex;
    font-size: .75rem;
    justify-content: center
}

.btn.btn-background-remove,
.btn.btn-popin-close {
    background: rgba(41, 41, 41, .24);
    gap: .5rem;
    padding: .375rem .75rem
}

.btn.btn-enough {
    height: 3rem;
    width: 100%
}

.btn.btn-enough,
.btn.btn-enough span {
    align-items: center;
    background-color: light-dark(#fff, #171717);
    display: flex;
    justify-content: center;
    position: relative
}

.btn.btn-enough span {
    color: light-dark(#171717, #fff);
    font-family: GeistMono, sans-serif;
    font-size: .6875rem;
    font-weight: 400;
    gap: .625rem;
    letter-spacing: 2px;
    line-height: 1rem;
    padding: 0 1rem;
    text-transform: uppercase;
    z-index: 1
}

.btn.btn-enough span svg path {
    stroke: currentColor
}

.btn.btn-enough:before {
    background: repeating-linear-gradient(90deg, light-dark(#d4d4d4, #b5b5b5) 0 2px, transparent 2px 8px);
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
    top: 50%
}

.btn.btn-pull {
    align-items: flex-end;
    background-clip: padding-box, border-box;
    background-color: light-dark(#ebebeb, #121213);
    background-image: linear-gradient(0deg, light-dark(#ebebeb, #121213), light-dark(#ebebeb, #121213)), linear-gradient(180deg, light-dark(hsla(0, 0%, 100%, .32), hsla(0, 0%, 100%, .24)), light-dark(hsla(0, 0%, 100%, .08), hsla(0, 0%, 100%, .06)));
    background-origin: padding-box, border-box;
    border-image-source: linear-gradient(180deg, hsla(0, 0%, 100%, .24), hsla(0, 0%, 100%, .06));
    border-radius: 0 0 .75rem .75rem;
    border-style: solid;
    border-width: 0 1px 1px;
    box-shadow: 0 18px 88px -4px rgba(24, 39, 75, .05);
    color: light-dark(hsla(0, 0%, 9%, .72), hsla(0, 0%, 100%, .72));
    display: flex;
    height: 2.5rem;
    justify-content: center;
    left: 1.5rem;
    padding: .75rem 1.5rem;
    position: absolute;
    right: 1.5rem;
    top: 100%;
    z-index: -1
}

.btn.btn-pull .pull-content {
    align-items: center;
    display: flex;
    flex: 1;
    justify-content: space-between;
    text-transform: uppercase
}

.btn.btn-pull .pull-content span {
    font-family: GeistMono, sans-serif;
    font-size: .6875rem;
    font-weight: 400;
    letter-spacing: .12em;
    line-height: 1rem
}

.btn.btn-pull .pull-content span:nth-of-type(2) {
    display: none
}

.btn.btn-pull .pull-content svg path {
    stroke: currentColor
}

.btn.btn-pull.open .pull-content span:first-of-type {
    display: none
}

.btn.btn-pull.open .pull-content span:nth-of-type(2) {
    display: block
}

.btn.btn-pull.open .pull-content svg {
    transform: rotate(180deg)
}

.radio-theme-input,
.radio-theme-input+.radio-theme svg {
    display: none
}

.radio-theme-input:checked+.radio-theme svg {
    display: block
}

.radio-theme {
    align-items: center;
    background-color: transparent;
    border-radius: .75rem;
    color: #fff;
    display: flex;
    flex: 0 0 4.375rem;
    flex-direction: column;
    font-size: .75rem;
    font-weight: 500;
    gap: .5rem;
    justify-content: center;
    line-height: 1rem;
    padding: 6px 4px;
    transition: background-color .2s ease-in-out
}

@media(min-width: 62rem) {

    .radio-theme:active,
    .radio-theme:focus,
    .radio-theme:hover {
        background-color: #404040
    }
}

.radio-theme .btn.btn-secondary {
    transform: scale(.1);
    transition: transform .8s linear(0, .115 2.2%, .877 9.4%, 1.016 11.9%, 1.081 14.7%, 1.088 16%, 1.084 17.5%, 1.013 25.3%, .993 30.8%, 1.001 46.8%, 1)
}

.radio-theme>.text {
    align-items: center;
    display: flex;
    gap: .25rem;
    opacity: 0;
    transition: opacity .6s ease-in-out
}

.radio-theme>.text svg {
    height: 1rem
}

.radio-theme.show .btn.btn-secondary {
    transform: scale(1)
}

.radio-theme.show>.text {
    opacity: 1
}

.business-card {
    border-radius: .75rem;
    box-shadow: 0 18px 88px -4px rgba(24, 39, 75, .05);
    display: flex;
    flex-direction: column;
    grid-column: 1/-1;
    position: relative;
    z-index: 2
}

@media(min-width: 36rem) {
    .business-card {
        grid-column: 2/-2
    }
}

@media(min-width: 48rem) {
    .business-card {
        grid-column: 3/-3
    }
}

@media(min-width: 62rem) {
    .business-card {
        grid-column: 4/-4
    }
}

.business-card .business-card-content {
    -webkit-backdrop-filter: blur(64px);
    backdrop-filter: blur(64px);
    background-color: light-dark(#fff, hsla(0, 0%, 9%, .9));
    border-radius: .75rem;
    display: flex;
    flex-direction: column;
    gap: 1.625rem;
    padding: 1.5rem;
    position: relative;
    z-index: 1
}

.business-card .business-card-content .title-container {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 1.875rem .5rem;
    justify-content: space-between
}

@media(min-width: 62rem) {
    .business-card .business-card-content .title-container {
        flex-direction: row
    }
}

.business-card .business-card-content .title-content {
    align-items: flex-start;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .5rem
}

@media(min-width: 62rem) {
    .business-card .business-card-content .title-content:nth-of-type(2) {
        align-items: flex-end;
        flex: 0 0 160px
    }

    .business-card .business-card-content .title-content:nth-of-type(2) p {
        text-align: right
    }
}

.business-card .business-card-content .card-title {
    color: light-dark(#171717, #fff);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.625rem
}

.business-card .business-card-content .card-job,
.business-card .business-card-content p {
    color: light-dark(hsla(0, 0%, 9%, .46), hsla(0, 0%, 100%, .46));
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem
}

.business-card .business-card-content p {
    align-items: center;
    display: flex;
    gap: .5rem 2.5rem
}

@media(min-width: 62rem) {
    .business-card .business-card-content p {
        align-items: flex-end;
        flex: 0 0 10rem;
        flex-direction: column;
        text-align: right
    }
}

.business-card .business-card-content p span {
    border: .0625rem solid;
    border-radius: .25rem;
    color: light-dark(#171717, #fff);
    font-family: GeistMono, sans-serif;
    font-size: .625rem;
    font-weight: 400;
    font-weight: 900;
    letter-spacing: .125rem;
    padding: .25rem .625rem;
    text-transform: uppercase;
    white-space: nowrap
}

.business-card .top {
    align-items: center;
    display: flex;
    justify-content: space-between
}

.business-card .img-container {
    border-radius: 6.25rem;
    height: 3.75rem;
    overflow: hidden;
    width: 3.75rem;
}

.business-card .img-container img {
    height: 100%;
    object-fit: cover;
    width: 100%
}

.business-card .card-skills {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.business-card .card-skills li {
    border: 1px solid light-dark(#efefef, #404040);
    border-radius: 100px;
    color: light-dark(#b5b5b5, #a3a3a3);
    font-family: GeistMono, sans-serif;
    font-size: .6875rem;
    font-weight: 400;
    letter-spacing: .12em;
    line-height: 1rem;
    padding: 8px 12px;
    text-transform: uppercase
}

.business-card .card-skills li.hide {
    display: none
}

.business-card .card-skills .btn-skills {
    color: currentColor
}

.business-card .drawer {
    display: none
}

.business-card .drawer.open {
    display: block
}

.business-card.open,
.business-card.open .business-card-content {
    border-radius: .75rem .75rem 0 0
}

.section-container {
    border-radius: 0 0 1rem 1rem;
    overflow: hidden
}

.section {
    background-color: light-dark(#fff, hsla(0, 0%, 9%, .9));
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
    position: relative
}

.section.free {
    border-radius: 1rem
}

.section-suptitle {
    color: hsla(0, 0%, 71%, .72);
    font-family: GeistMono, sans-serif;
    font-size: .6875rem;
    font-weight: 400;
    letter-spacing: .125rem;
    line-height: 1rem;
    text-transform: uppercase
}

.section-title {
    color: light-dark(#171717, #fff);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.1375rem
}

.section-content.flex {
    align-items: stretch;
    display: flex;
    gap: 1rem
}

.section-content.flex .column {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .5rem
}

.section-content.grid {
    display: grid;
    gap: .5rem 1rem;
    grid-template-areas: "linkedin" "github" "instagram" "music" "mastodon" "bluesky";
    grid-template-columns: 1fr
}

@media(min-width: 48rem) {
    .section-content.grid {
        grid-template-areas: "linkedin music" "github music" "instagram music" "mastodon bluesky";
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr)
    }
}

.experiences {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.selected-works {
    display: grid;
    gap: 1.875rem;
    grid-column: 1/-1;
    grid-template-columns: repeat(12, 1fr);
    padding: 0 0 5.625rem;
    position: relative;
    scroll-margin-block-start: 1.875rem;
    z-index: 1
}

.selected-works .title-container {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    grid-column: 1/-1
}

.selected-works .block-pretitle {
    color: light-dark(hsla(0, 0%, 71%, .72), hsla(0, 0%, 100%, .56));
    font-family: GeistMono, sans-serif;
    font-size: .6875rem;
    font-weight: 400;
    letter-spacing: .12em;
    line-height: 1rem;
    text-transform: uppercase
}

.selected-works .block-title {
    color: light-dark(#171717, #fff);
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 3rem
}

.selected-works .selected-works-grid {
    display: grid;
    gap: 1.875rem;
    grid-column: 1/-1;
    grid-template-columns: 1fr
}

@media(min-width: 36rem) {
    .selected-works .selected-works-grid {
        grid-column: 2/-2
    }
}

@media(min-width: 62rem) {
    .selected-works .selected-works-grid {
        grid-column: 1/-1;
        grid-template-columns: repeat(12, 1fr);
    }
}

.selected-works .selected-works-grid .card {
    grid-column-end: span 6
}

.card.card-work {
    align-items: center;
    background-color: light-dark(#fff, #171717);
    border-radius: 1rem;
    box-shadow: 0 0 0 0 rgba(41, 41, 41, .12);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    opacity: 0;
    padding: 0 .25rem .25rem;
    transform: translateY(30px);
    transition: box-shadow .3s ease-in-out, transform .6s cubic-bezier(.593, 1.028, .64, 1), opacity .5s ease;
    will-change: box-shadow, transform, opacity
}
div.card.card-work.show{
    background-color: unset;

}

div.card.card-work.show .bg{
    background-color: light-dark(#fff, #171717);
    border-radius: 1rem;
    box-shadow: 0 0 0 0 rgba(41, 41, 41, .12);
    padding: 0 .25rem .25rem;
}

@media(min-width: 62rem) {

    .card.card-work:active,
    .card.card-work:focus,
    .card.card-work:hover {
        box-shadow: 0 25px 50px -12px rgba(41, 41, 41, .12)
    }

    .card.card-work:active .capsule,
    .card.card-work:focus .capsule,
    .card.card-work:hover .capsule {
        opacity: 1
    }
}

.card.card-work.show {
    opacity: 1;
    transform: translateY(0)
}

.card.card-work .topbar {
    align-items: center;
    display: flex;
    gap: 1.5rem;
    padding: 1rem .75rem;
    width: 100%
}

.card.card-work .urlbar {
    align-items: center;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background-color: light-dark(#f5f5f5, #292929);
    border-radius: 100px;
    display: flex;
    gap: .5rem;
    padding: 6px 16px
}

.card.card-work .urlbar svg {
    width: .75rem
}

.card.card-work .urlbar .card-url {
    align-items: center;
    color: light-dark(#404040, #d4d4d4);
    display: flex;
    font-size: .75rem;
    font-weight: 400;
    gap: .375rem;
    line-height: .875rem;
    white-space: nowrap
}

.card.card-work .urlbar .card-url span {
    color: light-dark(hsla(0, 0%, 71%, .72), #b5b5b5);
    font-family: GeistMono, sans-serif;
    font-size: .5625rem;
    font-weight: 400;
    letter-spacing: .08em;
    line-height: 1rem;
    text-transform: uppercase
}

.card.card-work .card-title {
    color: light-dark(#292929, #fff);
    display: none;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.1875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

@media(min-width: 62rem) {
    .card.card-work .card-title {
        display: block
    }
}

.card.card-work .capsule {
    align-items: center;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background-color: light-dark(transparent, #292929);
    border: 1px solid light-dark(#efefef, transparent);
    border-radius: 100px;
    display: flex;
    justify-content: center;
    margin: 0 0 0 auto;
    opacity: 1;
    padding: .375rem .5625rem;
    transition: opacity .5s ease-in-out, box-shadow .3s ease-in-out;
}

.card-work .capsule:hover {
    color: hsl(0, 0%, 100%); 
    box-shadow: 0 4px 12px light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.4));
}

@media(min-width: 62rem) {
    .card.card-work .capsule {
        opacity: 0
    }
}

.card.card-work .capsule svg {
    width: 1rem
}

.card.card-work .capsule svg path {
    stroke: light-dark(#404040, #fff)
}

.card.card-work .window {
    align-items: center;
    background-color: light-dark(#f6f6f6, #070707);
    border-radius: .75rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    padding: 2rem .1875rem 0;
    width: 100%
}

.card.card-work .window img,
.card.card-work .window-inner {
    border-radius: .75rem .75rem 0 0;
    width: 100%
}

.card.card-work .window-inner {
    background-color: #fff;
    margin: 0 auto;
    max-width: 90%;
    padding: 0 .1875rem
}

.card.card-work .buttons {
    align-items: center;
    display: flex;
    gap: .125rem;
    padding: .5rem .5625rem;
    width: 100%
}

.card.card-work .buttons span {
    border-radius: 6.25rem;
    flex: 0 0 .375rem;
    height: .375rem
}

.card.card-work .buttons span:first-of-type {
    background-color: #ef4444
}

.card.card-work .buttons span:nth-of-type(2) {
    background-color: #facc15
}

.card.card-work .buttons span:nth-of-type(3) {
    background-color: #4ade80
}

.card.card-work .img-container {
    border-radius: .75rem .75rem 0 0;
    overflow: hidden;
    width: 100%
}

.card.card-experience {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: center
}

.card.card-experience .img-container {
    align-items: center;
    border: 1px solid #e5e5e5;
    border-radius: 6.25rem;
    display: flex;
    height: 2.5rem;
    justify-content: center;
    overflow: hidden;
    width: 2.5rem
}

.card.card-experience .img-container svg {
    height: 70%;
    width: 70%
}

.card.card-experience .img-container svg path {
    fill: light-dark(#9e9e9e3d, #242323);
}

.card.card-experience .text-container {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .375rem
}

.card.card-experience .company {
    color: light-dark(#171717, #fff);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.1375rem
}

.card.card-experience .job {
    color: #b5b5b5;
    font-size: .6875rem;
    font-weight: 400;
    line-height: .8938rem
}

.card.card-experience .date {
    color: #b5b5b5;
    font-family: GeistMono, sans-serif;
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: .125rem;
    line-height: .975rem
}

.card.card-link {
    border: 1px solid light-dark(#e5e5e5, #404040);
    border-radius: .75rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    justify-content: space-between;
    padding: .5rem
}

.card.card-link .logo-container {
    align-items: center;
    background-color: light-dark(transparent, #4f4f4f);
    border: 1px solid light-dark(#e5e5e5, #404040);
    border-radius: .5rem;
    display: flex;
    height: 2.0625rem;
    justify-content: center;
    width: 2.0625rem
}

.card.card-link .logo-container svg {
    width: 1rem
}

.card.card-link .img-container {
    background-color: #eee;
    border-radius: .5rem;
    height: 100%;
    overflow: hidden;
    width: 100%
}

.card.card-link .text-container {
    align-items: center;
    display: flex;
    justify-content: space-between
}

.card.card-link .text-content {
    display: flex;
    flex-direction: column;
    gap: .125rem
}

.card.card-link .card-title {
    color: light-dark(#292929, #fff);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem
}

.card.card-link .network {
    color: #b5b5b5;
    font-family: GeistMono, sans-serif;
    font-size: .5625rem;
    font-weight: 400;
    letter-spacing: .125rem;
    line-height: .7312rem;
    text-transform: uppercase
}

.card.card-link.linkedin {
    grid-area: linkedin
}

.card.card-link.music {
    grid-area: music
}

.card.card-link.instagram {
    grid-area: instagram
}

.card.card-link.mastoodon {
    grid-area: mastoodon
}

.card.card-link.github {
    grid-area: github
}

.card.card-link.bluesky {
    grid-area: bluesky
}

.card.card-free {
    gap: 1rem
}

.card.card-free,
.card.card-free .logo-container {
    align-items: center;
    border-radius: 1rem;
    display: flex
}

.card.card-free .logo-container {
    aspect-ratio: 1;
    border: 1px solid #e5e5e5;
    justify-content: center;
    width: 4.5rem
}

.card.card-free .logo-container svg {
    width: 32px
}

.card.card-free .text-container {
    display: flex;
    flex-direction: column;
    gap: .375rem
}

.card.card-free .text-container .company {
    color: light-dark(#b5b5b5, #fff);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.625rem
}

.card.card-free .text-container .job {
    color: #b5b5b5;
    font-size: .875rem;
    line-height: 1.1375rem
}

.dynamic-island {
    align-items: center;
    background-color: light-dark(rgba(41, 41, 41, .08), hsla(0, 0%, 100%, .08));
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 20px;
    box-shadow: 0 0 0 1px rgb(124 124 124 / 25%);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 3.25rem;
    justify-content: flex-start;
    left: 50%;
    overflow: hidden;
    padding: .75rem;
    position: fixed;
    top: 1.5rem;
    transform: translateX(-50%);
    transition: height .5s linear(0, .115 2.2%, .877 9.4%, 1.016 11.9%, 1.081 14.7%, 1.088 16%, 1.084 17.5%, 1.013 25.3%, .993 30.8%, 1.001 46.8%, 1);
    z-index: 9001
}

.dynamic-island.open {
    height: 140px
}

.dynamic-island .top {
    align-items: flex-start;
    display: flex;
    flex: 1;
    gap: 1.5rem;
    justify-content: space-between
}

.dynamic-island .bottom {
    display: flex;
    flex: 1;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    top: 64px
}

.dynamic-island .left-part,
.dynamic-island .right-part {
    align-items: center;
    display: flex;
    gap: .5rem
}

.dynamic-island .avatar-container {
    align-items: center;
    display: flex;
    flex: 0 0 1.75rem;
    height: 1.75rem;
    justify-content: center;
    padding: .125rem;
    position: relative;
    width: 1.75rem
}

.dynamic-island .avatar-container:before {
    border: 1px solid hsla(0, 0%, 100%, .48);
    border-radius: 100px;
    content: "";
    inset: 0;
    position: absolute
}

.dynamic-island .avatar-container img {
    border-radius: 100px;
    height: 100%;
    object-fit: cover;
    width: 100%
}

.dynamic-island .name {
    color: light-dark(#3d3d3d, #fff);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
    white-space: nowrap
}

.popin .btn-popin-close {
    position: absolute;
    right: 1rem;
    top: 1rem
}

.popin.popin-picture {
    align-items: center;
    -webkit-backdrop-filter: blur(36px);
    backdrop-filter: blur(36px);
    background-color: hsla(0, 0%, 100%, .01);
    border-radius: 12px;
    bottom: 1rem;
    display: none;
    flex-direction: column;
    gap: 1.875rem 0;
    justify-content: flex-start;
    left: 1.5rem;
    opacity: 0;
    padding: 3.75rem 0 1.25rem;
    pointer-events: none;
    position: fixed;
    right: 1.5rem;
    top: 1rem;
    transition: opacity .4s ease-in-out;
    z-index: 9001
}

@media(min-width: 62rem) {
    .popin.popin-picture {
        border-radius: 24px;
        justify-content: center;
        padding: 1.25rem
    }
}

.popin.popin-picture.show {
    display: flex;
    pointer-events: all
}

.popin.popin-picture.show-visible {
    opacity: 1
}

.popin.popin-picture .popin-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 2.5rem 3.75rem;
    justify-content: flex-start;
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.popin.popin-picture .popin-content::-webkit-scrollbar {
    display: none
}

.popin.popin-picture p {
    color: light-dark(#292929, #fff);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    text-align: center
}

.popin.popin-picture .background-list {
    display: grid;
    gap: .75rem 1rem;
    grid-template-columns: repeat(2, 1fr)
}

@media(min-width: 48rem) {
    .popin.popin-picture .background-list {
        grid-template-columns: repeat(4, 8.75rem);
        padding: .625rem
    }
}

.popin.popin-picture .background-list input {
    display: none
}

.popin.popin-picture .background-list input:checked+label {
    filter: grayscale(0);
    z-index: 1
}

.tooltip.tooltip-availability {
    background-color: light-dark(rgba(41, 41, 41, .08), hsla(0, 0%, 100%, .08));
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: .75rem;
    bottom: 1.25rem;
    box-shadow: 0 0 0 1px rgb(124 124 124 / 25%);
    left: 1.25rem;
    margin-right: 20px;
    padding: .5rem 3.875rem .5rem .5rem;
    position: fixed;
    transform: translateX(-150%);
    transition: transform .2s ease;
    z-index: 9001
}

.tooltip.tooltip-availability.show {
    transform: translateX(0)
}

.tooltip.tooltip-availability .btn-tooltip-close {
    height: 3rem;
    padding: .9375rem .75rem;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2.625rem
}

.tooltip.tooltip-availability .btn-tooltip-close svg {
    height: 1.125rem;
    width: 1.125rem
}

.tooltip.tooltip-availability .btn-tooltip-close svg path {
    stroke: #b5b5b5
}

.tooltip.tooltip-availability .tooltip-content {
    align-items: center;
    display: flex;
    gap: .5rem
}

.tooltip.tooltip-availability .tooltip-content-top {
    align-items: center;
    display: flex;
    gap: .75rem
}

.tooltip.tooltip-availability .img-container {
    border-radius: 100%;
    height: 2rem;
    overflow: hidden;
    width: 2rem
}

.tooltip.tooltip-availability .img-container img {
    height: 100%;
    object-fit: cover;
    width: 100%
}

.tooltip.tooltip-availability p {
    color: light-dark(#171717, #fff);
    font-size: .75rem;
    line-height: 1.1875rem
}

.tooltip.tooltip-availability p span {
    border: 1px solid light-dark(#efefef, #b5b5b5);
    border-radius: .375rem;
    color: light-dark(#b5b5b5, #fff);
    font-family: GeistMono, sans-serif;
    font-size: .625rem;
    font-weight: 400;
    padding: .125rem .375rem;
    text-transform: uppercase
}

.tooltip.tooltip-availability .switch-container {
    height: 20px
}

.tooltip.tooltip-availability .switch-container svg {
    height: 100%
}

.tooltip.tooltip-availability .switch-container svg rect {
    fill: light-dark(#000, #fff)
}

.tooltip.tooltip-availability .switch-container svg path:first-of-type {
    fill: light-dark(#fff, #000)
}

.tooltip.tooltip-availability .switch-container svg path:nth-of-type(2) {
    stroke: light-dark(#000, #fff)
}

html {
    color-scheme: light dark
}

body {
    background-attachment: fixed;
    background-color: light-dark(#f9f9f9, #080808);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: Geist, sans-serif
}

body.oh {
    height: 100vh;
    position: relative;
    touch-action: none;
    -ms-touch-action: none;
    -webkit-overflow-scrolling: touch;
    overflow: hidden !important;
    overscroll-behavior: none
}

body.blur .infos-container p {
    color: #7c7c7c
}

body.blur .btn-primary {
    background-color: hsla(0, 0%, 9%, .08);
    border: 1px solid hsla(0, 0%, 9%, 0);
    color: hsla(0, 0%, 100%, .72)
}

body.blur .business-card .business-card-content {
    -webkit-backdrop-filter: blur(64px);
    backdrop-filter: blur(64px);
    background-color: rgba(41, 41, 41, .12);
    background-image: linear-gradient(180deg, hsla(0, 0%, 100%, .32), hsla(0, 0%, 100%, .08))
}

body.blur .business-card .card-job,
body.blur .business-card .card-title {
    color: #fff
}

body.blur .business-card .card-skills li {
    background-color: hsla(0, 0%, 9%, .08);
    border: 1px solid hsla(0, 0%, 9%, 0);
    color: hsla(0, 0%, 100%, .72)
}

body.blur .business-card .card-skills li.hide {
    display: none
}

body.blur .business-card .btn-pull {
    background-color: rgba(41, 41, 41, .24);
    color: hsla(0, 0%, 100%, .72)
}

body.blur .business-card .btn-pull,
body.blur .drawer {
    -webkit-backdrop-filter: blur(64px);
    backdrop-filter: blur(64px);
    background-image: linear-gradient(180deg, hsla(0, 0%, 100%, .32), hsla(0, 0%, 100%, .08))
}

body.blur .drawer,
body.blur .drawer .btn.btn-enough {
    background-color: rgba(41, 41, 41, .12)
}

body.blur .drawer .btn.btn-enough span {
    background: none
}

body.blur .drawer .section {
    background-color: transparent
}

body.blur .drawer .section .section-suptitle {
    color: #fff
}

body.blur .drawer .card-link {
    background-color: hsla(0, 0%, 9%, .08);
    border: 1px solid hsla(0, 0%, 9%, 0);
    color: hsla(0, 0%, 100%, .72)
}

body.blur .drawer .card-link .card-title,
body.blur .drawer .card-link .network {
    color: #fff
}

body.blur .drawer .card-link .logo-container {
    background-color: #fff;
    border: 1px solid #fff
}

body.blur .drawer .card-experience .company,
body.blur .drawer .card-experience .date,
body.blur .drawer .card-experience .job {
    color: #292929
}

body.blur .drawer .card-experience .img-container {
    background-color: hsla(0, 0%, 9%, .08);
}

body.blur .drawer .card-experience .img-container svg path {
    fill: #9e9e9e3d
}

body.blur .background {
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    background-color: hsla(0, 0%, 100%, .24)
}

body.blur .block-pretitle {
    color: hsla(0, 0%, 100%, .56)
}

body.blur .block-title {
    color: #fff
}




body.blur .card-work {
    background-color: #fff
}

body.blur .card-work .urlbar {
    background-color: #f5f5f5
}

body.blur .card-work .urlbar .card-url {
    color: #404040
}

body.blur .card-work .urlbar .card-url span {
    color: hsl(0, 0%, 100%);
}

body.blur .card-work .card-title {
    color: hsl(0, 0%, 100%);
}

body.blur .card-work .capsule {
    background-color: transparent;
    border: 1px solid #efefef00;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
    transition: all .5s ease;
}

body.blur .card-work .urlbar svg path {
    stroke: #404040
}


body.blur .card-work .capsule:hover svg path {
    stroke: hsl(0, 0%, 100%);
}

body.blur .card-work .window {
    background-color: #f6f6f6
}

body.blur .card-link .card-title {
    color: #292929
}

body.blur .main-footer {
    -webkit-backdrop-filter: blur(64px);
    backdrop-filter: blur(64px);
    background-color: rgba(41, 41, 41, .24);
    background-image: linear-gradient(180deg, hsla(0, 0%, 100%, .32), hsla(0, 0%, 100%, .08))
}

body.blur .dynamic-island {
    -webkit-backdrop-filter: blur(64px);
    backdrop-filter: blur(64px);
    background-color: rgba(41, 41, 41, .24);
    background-image: linear-gradient(180deg, hsla(0, 0%, 100%, .32), hsla(0, 0%, 100%, .08));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
}

body.blur .dynamic-island .name {
    color: #fff;
    opacity: .84;
}

body.blur .dynamic-island .avatar-container:before {
    border-color: rgba(255, 255, 255, .64);
}

body.blur .dynamic-island .right-part .btn.btn-secondary {
    background-color: hsla(0, 0%, 9%, .08);
    color: rgba(255, 255, 255, .84);
    transition: all .2s ease-in-out;
}

body.blur .dynamic-island .right-part .btn.btn-secondary.hover:before {
    border-color: rgba(255, 255, 255, .16);
}

body.blur .dynamic-island .right-part .btn.btn-secondary svg path {
    stroke: rgba(255, 255, 255, .84);
}

@media(min-width: 62rem) {
    body.blur .dynamic-island .right-part .btn.btn-secondary.hover:hover {
        background-color: rgba(255, 255, 255, .84);
        color: rgba(41, 41, 41, .84);
    }
    
    body.blur .dynamic-island .right-part .btn.btn-secondary.hover:hover:before {
        border-color: rgba(255, 255, 255, .84);
    }
    
    body.blur .dynamic-island .right-part .btn.btn-secondary.hover:hover svg path {
        stroke: rgba(41, 41, 41, .84);
    }
}

body.blur .btn.btn-contact {
    background-image: linear-gradient(180deg, hsla(0, 0%, 100%, .32), hsla(0, 0%, 100%, .08));
    border: 1px solid light-dark(rgba(41, 41, 41, 0.08), rgba(255, 255, 255, 0.08));
    box-shadow: unset;
    
}
body.blur .btn.btn-contact span {
    background-image: unset;
    color: rgba(255, 255, 255, .9);
    transition: background-image .6s ease;
}

body.blur .btn.btn-contact:hover span {
    background-image: linear-gradient(180deg, hsla(0, 0%, 100%, .32), hsla(0, 0%, 100%, .08));
}

.main {
    position: relative
}

.main .background {
    background-color: light-dark(#ebebeb, #1d1d1d);
    border-radius: 1.5rem 1.5rem 0 0;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 800px;
    z-index: -1
}

.main-container {
    margin: 0 auto;
    max-width: 75rem;
    padding: 0 1rem;
    width: 100%
}

@media(min-width: 62rem) {
    .main-container {
        padding: 0 .9375rem
    }
}

.main-grid {
    display: grid;
    gap: 1rem;
    grid-column: 1/-1;
    grid-template-columns: repeat(6, 1fr);
    margin: 0 auto
}

@media(min-width: 48rem) {
    .main-grid {
        gap: 5.25rem 1.875rem;
        grid-template-columns: repeat(12, 1fr)
    }
}

main {
    padding: 9.25rem 0 0
}

main .main-container .main-grid {
    row-gap: 6.25rem
}

.block-404 a {
    color: light-dark(#080808, #fff);
    grid-column: 1/-1;
    text-align: center
}

.header {
    align-items: center;
    display: flex;
    justify-content: center;
    left: 0;
    padding: 6rem 2rem 2rem;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9001
}

@media(min-width: 62rem) {
    .header {
        justify-content: space-between;
        padding: 2rem
    }
}

.infos-container {
    align-items: center;
    display: none;
    gap: .75rem
}

@media(min-width: 62rem) {
    .infos-container {
        display: flex
    }
}

.infos-container p {
    color: light-dark(#7c7c7c, #fff);
    font-size: .75rem;
    font-weight: 400;
    line-height: .875rem
}

.infos {
    gap: .5rem
}

.infos,
.main-footer {
    align-items: center;
    display: flex
}

.main-footer {
    background-color: light-dark(#ebebeb, #1d1d1d);
    gap: .75rem;
    justify-content: center;
    padding: .5rem 1rem
}

@media(min-width: 62rem) {
    .main-footer {
        justify-content: flex-end
    }
}

.main-footer .infos-container {
    display: flex
}

/* Styles pour la popup de design */
.design-popup {
    align-items: center;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    background-color: rgba(0, 0, 0, 0.5);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: 0;
    transition: opacity 0.3s ease;
    z-index: 9999;
           
}

.design-popup.open {
    opacity: 1;
    pointer-events: auto;
}

.design-popup-content {
    background-color: light-dark(rgba(255, 255, 255, 0.8), rgba(28, 28, 30, 0.8));
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    max-height: 90vh;
    max-width: 1200px;
    overflow: hidden;
    position: relative;
    width: 90%;
}

.design-popup-inner {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

/* Header style Apple */
.window-header {
    align-items: center;
    background-color: light-dark(rgba(228, 228, 228, 0.8), rgba(58, 58, 60, 0.8));
    border-bottom: 1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
    display: flex;
    height: 50px;
    justify-content: center;
    padding: 0 16px;
    position: relative;
}

.window-controls {
    display: flex;
    gap: 8px;
    position: absolute;
    left: 16px;
}

.control {
    border-radius: 50%;
    height: 12px;
    width: 12px;
}

.control.close {
    background-color: #FF5F57;
}

.control.minimize {
    background-color: #FEBC2E;
}

.control.maximize {
    background-color: #28C840;
}

.design-popup-title {
    color: light-dark(#333, #fff);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

.design-popup-close {
    background: transparent;
    border: none;
    color: light-dark(#666, #ccc);
    cursor: pointer;
    height: 24px;
    padding: 0;
    position: absolute;
    right: 16px;
    width: 24px;
}

.design-popup-close:hover {
    color: light-dark(#333, #fff);
}

.design-popup-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow-y: auto;
    padding: 24px;
}

/* Informations du projet */
.design-info {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (min-width: 768px) {
    .design-info {
        flex-direction: row;
    }

    .design-description {
        flex: 2;
    }

    .design-details {
        flex: 1;
    }
}

.design-description h3 {
    color: light-dark(#333, #fff);
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 16px;
}

.design-description p {
    color: light-dark(#666, #bbb);
    font-size: 16px;
    line-height: 1.6;
}

.design-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.design-detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-label {
    color: light-dark(#999, #aaa);
    font-size: 12px;
    text-transform: uppercase;
}

.detail-value {
    color: light-dark(#333, #fff);
    font-size: 16px;
}

/* Grid d'images */
.design-images {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 640px) {
    .design-images {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .design-images {
        grid-template-columns: repeat(3, 1fr);
    }
}

.design-image-container {
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease;
}

.design-image-container:hover {
    transform: translateY(-4px);
}

.design-image-container img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
}

/* Visualiseur d'images */
.image-viewer {
    align-items: center;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    background-color: rgba(0, 0, 0, 0.9);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: 0;
    transition: opacity 0.3s ease;
    z-index: 9999;
}

.image-viewer.open {
    opacity: 1;
    pointer-events: auto;
}

.image-viewer-content {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    position: relative;
    width: 100%;
}

.image-viewer-container {
    display: flex;
    height: 90%;
    justify-content: center;
    max-width: 90%;
}

.image-viewer-container img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.image-viewer-close,
.image-viewer-prev,
.image-viewer-next {
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    height: 40px;
    justify-content: center;
    transition: background-color 0.3s ease;
    width: 40px;
}

.image-viewer-close {
    position: absolute;
    right: 24px;
    top: 24px;
}

.image-viewer-prev {
    left: 24px;
    position: absolute;
}

.image-viewer-next {
    position: absolute;
    right: 24px;
}

.image-viewer-close:hover,
.image-viewer-prev:hover,
.image-viewer-next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

@media (max-width: 768px) {

    .image-viewer-prev,
    .image-viewer-next {
        display: none;
    }
}

/* Popup formulaire de contact */
.contact-popup {
    align-items: center;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    background-color: rgba(0, 0, 0, 0.5);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: 0;
    transition: opacity 0.3s ease;
    z-index: 9999;
}

.contact-popup.open {
    opacity: 1;
    pointer-events: auto;
}

.contact-popup-content {
    background-color: light-dark(rgba(255, 255, 255, 0.9), rgba(28, 28, 30, 0.9));
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    max-height: 90vh;
    max-width: 500px;
    overflow: hidden;
    position: relative;
    width: 90%;
}

.contact-popup-body {
    display: flex;
    flex-direction: column;
    max-height: calc(90vh - 50px);
    overflow-y: auto;
    padding: 24px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    color: light-dark(#333, #fff);
    font-size: 14px;
    font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
    background-color: light-dark(rgba(255, 255, 255, 0.8), rgba(60, 60, 67, 0.3));
    border: 1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
    border-radius: 8px;
    color: light-dark(#333, #fff);
    font-family: Geist, sans-serif;
    font-size: 16px;
    padding: 12px 16px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #b32951;
    box-shadow: 0 0 0 2px rgba(179, 41, 81, 0.2);
    outline: none;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.btn-form-submit {
    background-image: linear-gradient(0deg, #b32951 0%, #e63e6d 100%);
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    font-family: Geist, sans-serif;
    font-size: 16px;
    font-weight: 500;
    padding: 12px 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-form-submit:hover {
    box-shadow: 0 4px 12px rgba(179, 41, 81, 0.3);
    transform: translateY(-2px);
}

.btn-form-submit:active {
    transform: translateY(0);
}

/* Notifications */
.notification {
    align-items: center;
    background-color: light-dark(rgba(255, 255, 255, 0.95), rgba(28, 28, 30, 0.95));
    border-radius: 12px;
    bottom: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    display: flex;
    gap: 12px;
    left: 50%;
    max-width: 90%;
    opacity: 0;
    padding: 16px 20px;
    position: fixed;
    transform: translate(-50%, 20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    width: 400px;
    z-index: 10000;
}

.notification.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.notification-icon {
    align-items: center;
    border-radius: 50%;
    display: flex;
    flex-shrink: 0;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.notification.success .notification-icon {
    background-color: rgba(52, 199, 89, 0.15);
    color: #34c759;
}

.notification.error .notification-icon {
    background-color: rgba(255, 59, 48, 0.15);
    color: #ff3b30;
}

.notification-content {
    color: light-dark(#333, #fff);
    font-size: 15px;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .notification {
        width: calc(100% - 48px);
    }
}

/* Styles pour les popups avec body.blur */

body.blur .contact-popup,
body.blur .design-popup{
    background-color: rgba(0, 0, 0, 0.2);
}

body.blur .design-popup-inner,
body.blur .contact-popup-body {
    background-color: rgba(255, 255, 255, 0.2);
}
/* Design popup avec body.blur */
body.blur .design-popup-content {
    background-color: rgba(41, 41, 41, .12);
    background-image: linear-gradient(180deg, hsla(0, 0%, 100%, .32), hsla(0, 0%, 100%, .08));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
}

body.blur .window-header {
    background-color: rgba(41, 41, 41, .24);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

body.blur .design-popup-title {
    color: #fff;
    opacity: .84;
}

body.blur .design-popup-close {
    color: rgba(255, 255, 255, .72);
}

body.blur .design-popup-close:hover {
    background-color: hsla(0, 0%, 9%, .08);
    color: #fff;
}

body.blur .design-popup-body {
    color: rgba(255, 255, 255, .72);
}

body.blur .design-description h3 {
    color: #fff;
}

body.blur .design-description p {
    color: rgba(255, 255, 255, .72);
}

body.blur .detail-label {
    color: rgba(255, 255, 255, .56);
}

body.blur .detail-value {
    color: #fff;
}

body.blur .design-info {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

@media (min-width: 48rem) {
    body.blur .design-details {
        border-left: 1px solid rgba(255, 255, 255, .08);
    }
}

body.blur .design-image-container {
    background-color: rgba(41, 41, 41, .24);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}

body.blur .design-image-container:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}

/* Contact popup avec body.blur */
body.blur .contact-popup-content {
    background-color: rgba(41, 41, 41, .12);
    background-image: linear-gradient(180deg, hsla(0, 0%, 100%, .32), hsla(0, 0%, 100%, .08));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
}

body.blur .form-group label {
    color: #fff;
    opacity: .84;
}

body.blur .form-group input,
body.blur .form-group select,
body.blur .form-group textarea {
    background-color: hsla(0, 0%, 9%, .08);
    border: 1px solid hsla(0, 0%, 9%, 0);
    color: hsla(0, 0%, 100%, .84);
}

body.blur .form-group input:focus,
body.blur .form-group select:focus,
body.blur .form-group textarea:focus {
    border-color: rgba(179, 41, 81, .5);
    box-shadow: 0 0 0 2px rgba(179, 41, 81, .2);
}

body.blur .form-group input::placeholder,
body.blur .form-group textarea::placeholder {
    color: hsla(0, 0%, 100%, .4);
}

body.blur .btn-form-submit {
    background-image: linear-gradient(0deg, rgba(179, 41, 81, .9) 0%, rgba(230, 62, 109, .9) 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
}

body.blur .btn-form-submit:hover {
    background-image: linear-gradient(0deg, rgba(179, 41, 81, 1) 0%, rgba(230, 62, 109, 1) 100%);
    box-shadow: 0 4px 12px rgba(179, 41, 81, .4);
}

/* Image viewer avec body.blur */
body.blur .image-viewer {
    background-color: rgba(0, 0, 0, .85);
}

body.blur .image-viewer-close,
body.blur .image-viewer-prev,
body.blur .image-viewer-next {
    background-color: rgba(41, 41, 41, .24);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .08);
}

body.blur .image-viewer-close:hover,
body.blur .image-viewer-prev:hover,
body.blur .image-viewer-next:hover {
    background-color: rgba(41, 41, 41, .4);
}



/* Styles pour card-work avec body.blur */
body.blur .card-work {
    -webkit-backdrop-filter: blur(64px);
    backdrop-filter: blur(64px);
    background-image: linear-gradient(180deg, hsla(0, 0%, 100%, .32), hsla(0, 0%, 100%, .08));
    background-color: rgba(41, 41, 41, .24);
    color: hsla(0, 0%, 100%, .72);
}

body.blur .card-work:hover {
    background-color: rgba(41, 41, 41, .24);
    box-shadow: 0 12px 48px rgba(0, 0, 0, .24);
    transform: translateY(-4px);
}


body.blur .card-work .window {
    background-color: rgba(41, 41, 41, .12);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .16);
}

body.blur .card-work .urlbar {
    background-color: rgba(41, 41, 41, .12);
    border: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: none;
}

body.blur .card-work .capsule:hover {
    color: hsl(0, 0%, 100%);
    background-image: linear-gradient(180deg, hsla(0, 0%, 100%, .32), hsla(0, 0%, 100%, .08));
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.4);
}

body.blur div.card.card-work.show{
    background-color: unset;
    background-image: unset;
    backdrop-filter: unset;
    -webkit-backdrop-filter: unset;
}

body.blur div.card.card-work.show .bg {
    -webkit-backdrop-filter: blur(64px);
    backdrop-filter: blur(64px);
    background-image: linear-gradient(180deg, hsla(0, 0%, 100%, .32), hsla(0, 0%, 100%, .08));
    background-color: rgba(41, 41, 41, .24);
    color: hsla(0, 0%, 100%, .72);
}

body.blur .card-work .card-work-image {
    border: 1px solid rgba(255, 255, 255, .08);
}