@layer base {
 *,
 *::before,
 *::after {
 box-sizing: border-box}*:not(dialog){margin: 0}@media (prefers-reduced-motion: no-preference) {html {
 interpolate-size: allow-keywords}} body{line-height: var(--base-line-height);-webkit-font-smoothing: antialiased}img, picture, video, canvas, svg{display: block;max-width: 100%}input, button, textarea, select{font: inherit}a[aria-disabled="true"]{pointer-events: none}}
@layer layout {.stack {
 
 display: flex;flex-direction: column;justify-content: flex-start;& > * {
 margin-block: 0}&:not(.marginless) > * + *{margin-block-start: var(--space, 1.5rem)}} .center-box{
 box-sizing: content-box;margin-inline: auto;max-inline-size: var(--measure)}.center-content{
 display: flex;flex-direction: column;align-items: center}.cluster{
 display: flex;flex-wrap: wrap;gap: var(--space, 1rem)}.box{
 color: var(--color-dark);background-color: var(--color-light);padding: var(--s1);* {
 color: inherit}} .with-sidebar{
 display: flex;flex-wrap: wrap;gap: var(--s1)}.sidebar-start > :first-child{
 flex-grow: 1}.sidebar-start > :last-child{
 flex-basis: 0;flex-grow: 999;min-inline-size: 50%}.sidebar-end > :last-child{
 flex-grow: 1}.sidebar-end > :first-child{
 flex-basis: 0;flex-grow: 999;min-inline-size: 50%}.switcher{
 display: flex;flex-wrap: wrap;gap: var(--s1);& > * {
 flex-grow: 1;flex-basis: calc(((var(--measure) / 3) - 100%) * 999)}} .switcher-2 > :nth-last-child(n + 3), .switcher-2 > :nth-last-child(n + 3) ~ *{flex-basis: 100%}.switcher-3 > :nth-last-child(n + 4), .switcher-3 > :nth-last-child(n + 4) ~ *{flex-basis: 100%}.switcher-4 > :nth-last-child(n + 5), .switcher-4 > :nth-last-child(n + 5) ~ *, .switcher-sm > :nth-last-child(n + 5), .switcher-sm > :nth-last-child(n + 5) ~ *{flex-basis: 100%}.switcher-5 > :nth-last-child(n + 6), .switcher-5 > :nth-last-child(n + 6) ~ *{flex-basis: 100%}.switcher-6 > :nth-last-child(n + 7), .switcher-6 > :nth-last-child(n + 7) ~ *, .switcher-md > :nth-last-child(n + 7), .switcher-md > :nth-last-child(n + 7) ~ *{flex-basis: 100%}.switcher-7 > :nth-last-child(n + 8), .switcher-7 > :nth-last-child(n + 8) ~ *{flex-basis: 100%}.switcher-8 > :nth-last-child(n + 9), .switcher-8 > :nth-last-child(n + 9) ~ *{flex-basis: 100%}.switcher-9 > :nth-last-child(n + 10), .switcher-9 > :nth-last-child(n + 10) ~ *, .switcher-lg > :nth-last-child(n + 10), .switcher-lg > :nth-last-child(n + 10) ~ *{flex-basis: 100%}.switcher-10 > :nth-last-child(n + 11), .switcher-10 > :nth-last-child(n + 11) ~ *{flex-basis: 100%}.switcher-11 > :nth-last-child(n + 12), .switcher-11 > :nth-last-child(n + 12) ~ *{flex-basis: 100%}.switcher-12 > :nth-last-child(n + 13), .switcher-12 > :nth-last-child(n + 13) ~ *, .switcher-xl > :nth-last-child(n + 13), .switcher-xl > :nth-last-child(n + 13) ~ *{flex-basis: 100%}.grid{
 display: grid;grid-gap: var(--space, 1rem)}@supports (width: min(250px, 100%)) {.grid {
 grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr))}} .cover{
 display: flex;flex-direction: column;min-block-size: 100vh;padding: var(--space, 1rem);& > * {
 margin-block: var(--space, 1rem)}& > :first-child:not(.cover-content){margin-block-start: 0}& > :last-child:not(.cover-content){margin-inline-end: 0}& > .cover-content{margin-block: auto}} .frame{
 aspect-ratio: var(--n) / var(--d);overflow: hidden;display: flex;justify-content: center;align-items: center;& > img,
 & > video {
 inline-size: 100%;block-size: 100%;object-fit: cover}} .reel{
 display: flex;block-size: auto;overflow-x: auto;overflow-y: hidden;& > * {
 flex: 0 0 auto}& > img{block-size: 100%;flex-basis: auto;width: auto}& > * + *{margin-inline-start: var(--space, 1rem)}} .real::-webkit-scrollbar-track{
 background-color: var(--color-scroll-track)}.reel::-webkit-scrollbar-thumb{
 background-color: var(--color-scroll-thumb);background-image: linear-gradient(
      var(--color-scroll-track) 0,
 var(--color-scroll-track) 0.25rem,
 var(--color-scroll-thumb) 0.25rem,
 var(--color-scroll-thumb) 0.75rem,
 var(--color-scroll-track) 0.75rem
 )}.reel.overflowing{
 padding-block-end: var(--space, 1rem)}.imposter{
 position: absolute;inset-block-start: 50%;inset-inline-start: 50%;transform: translate(-50%, -50%)}.imposter.contain{
 --margin: 0px;overflow: auto;max-inline-size: calc(100% - (var(--margin, 0px) * 2));max-block-size: calc(100% - (var(--margin, 0px) * 2))}.icon{
 width: 0.75em;width: 1cap;height: 0.75em;height: 1cap}.with-icon{
 display: inline-flex;align-items: baseline}.with-icon .icon{
 margin-inline-end: var(--space, 1rem)}.container{
 container-name: var(--container-name, layout);container-type: inline-size}.pos-rel{
 position: relative}.pos-abs{
 position: absolute}.pos-fix{
 position: fixed}.pos-static{
 position: static}.pos-sticky{
 position: sticky}.min-w-sm{
 min-width: calc(var(--measure) / 12)}.min-w-md{
 min-width: calc(var(--measure) / 6)}.min-w-lg{
 min-width: calc(var(--measure) / 2)}.min-w-xl{
 min-width: calc(var(--measure))}.max-w-sm{
 max-width: calc(var(--measure) / 12)}.max-w-md{
 max-width: calc(var(--measure) / 6)}.max-w-lg{
 max-width: calc(var(--measure) / 2)}.max-w-xl{
 max-width: calc(var(--measure))}.square{
 aspect-ratio: 1 / 1}.w-rectangle{
 aspect-ratio: var(--n) / var(--d)}.h-rectangle{
 aspect-ratio: var(--d) / var(--n)}.gutters{
 padding-inline-start: var(--measure-gutter);padding-inline-end: var(--measure-gutter)}.gutter-l{
 padding-inline-start: var(--measure-gutter)}.gutter-r{
 padding-inline-end: var(--measure-gutter)}.justify\:start{
 justify-content: flex-start}.justify\:end{
 justify-content: flex-start}.justify\:space-between{
 justify-content: space-between}.justify\:space-around{
 justify-content: space-around}.justify\:center{
 justify-content: center}.align\:center{
 align-items: center}.align\:baseline{
 align-items: baseline}.align\:start{
 align-items: flex-start}.align\:end{
 align-items: flex-end}.align\:stretch{
 align-items: stretch}}
@layer theme {:root {
 
 --measure: 90ch;
 --measure-gutter: 1ch;
 --base-line-height: 1.5;
 --space: 1rem;
 --n: 16;
 --d: 9;
 --ratio: 1.5;
 --container-name: theme;--s-5: calc(var(--s-4) / var(--ratio));--s-4: calc(var(--s-3) / var(--ratio));--s-3: calc(var(--s-2) / var(--ratio));--s-2: calc(var(--s-1) / var(--ratio));--s-1: calc(var(--s0) / var(--ratio));--s0: 1rem;--s1: calc(var(--s0) * var(--ratio));--s2: calc(var(--s1) * var(--ratio));--s3: calc(var(--s2) * var(--ratio));--s4: calc(var(--s3) * var(--ratio));--s5: calc(var(--s4) * var(--ratio));
 --color-light: #eee;
 --color-dark: black;
 --color-muted: #5a848c;
 --color-border: #dfe1d6;
 --color-scroll-track: #000;
 --color-scroll-thumb: #fff;
 --color-header: #247884;--transition: .2s cubic-bezier(.4, 0, .2, 1);--transition-fast: .12s cubic-bezier(.4, 0, .2, 1)}body{
 font-family: "Baskerville", "Noto Serif", "DejaVu Serif", serif;background: linear-gradient(135deg, #0e3641 6%, #002a36 77%);background:
 radial-gradient(at 40% 20%, #0e3641 0px, transparent 50%),
 radial-gradient(at 80% 0%, #002a36 0px, transparent 50%),
 radial-gradient(at 0% 50%, #6e4573 0px, transparent 50%),
 radial-gradient(at 80% 50%, #267788 0px, transparent 50%),
 radial-gradient(at 0% 100%, #002a36 0px, transparent 50%),
 radial-gradient(at 20% 40%, #0e3641 0px, transparent 50%);background-color: #1a1a2e;background-attachment: fixed}p{text-indent: 0.66rem}body > header{
 margin-block-start: var(--space, 1rem);margin-block-end: -1rem;h1 {
 color: #ccc2c0;.icon {
 color: #8b878d;margin-inline-start: calc(var(--space, 1rem) / 2);display: inline-flex}& > a{color: #ccc2c0;text-decoration: none}.fw-thick{color: #878e91}} } header + main::before{
 content: " ";display: block;border-block-start: 1px solid var(--color-border);margin-block-end: var(--space, 1rem);margin-inline: var(--space, 1rem)}h1, h2, h3, h4, h5, h6{
 color: var(--color-header, #000);font-family: "Open Sans", "Helvetica", "DejaVu Sans", sans-serif;
 font-style: normal;font-weight: 400;text-rendering: optimizeLegibility}body > footer{
 max-width: 90ch;margin-block-end: 1rem;margin-inline-start: 1rem;margin-inline-end: 1rem;text-align: right;border-block-start: 1px solid var(--color-light)}header nav ul{
 list-style: none;margin-inline-end: var(--space, 1rem);font-size: small;& li > a {
 color: #8b878d;font-family: "Baskerville", "Noto Serif", "DejaVu Serif", serif;text-decoration: none;&:hover {
 color: #247884;text-decoration: underline}} } .box{
 background-color: #ffffff;
 color: #333}.muted{
 color: var(--color-muted)}.fw-thin{font-weight: lighter !important}.fw-normal{font-weight: normal !important}.fw-thick{font-weight: bold !important}figure > figcaption{text-align: right;font-size: 0.75em;border-block-start: 1px solid var(--color-light);color: var(--color-muted)}}
@layer base, layout, theme;body>footer .copyright{
 font-size: small;text-align: right;color: var(--color-muted)}.about-me{
 margin-inline-end: var(--space, 1rem);&.box {
 
 border-inline-start: var(--space, 1rem) solid var(--color-border);border-block-end: 1px solid var(--color-border);border-radius: calc(var(--space, 1rem) / 2) 0 0 calc(var(--space, 1rem) / 2)}}.articles{
 margin-inline-start: var(--space, 1rem);&::before {
 
 content: " ";display: block;border-block-start: 1px solid var(--color-border);margin-block-end: var(--space, 1rem);margin-inline-end: var(--space, 1rem)}&>ul{list-style: none;padding: 0}}.article-summary{
 &.box {
 
 color: #444;border-block-start: 1px solid var(--color-border);border-inline-end: var(--space, 1rem) solid var(--color-border);border-radius: 0 calc(var(--space, 1rem) / 2) calc(var(--space, 1rem) / 2) 0}& .article-meta{
 font-size: small;color: var(--color-muted)}& header+section{
 font-size: small}&>footer{text-align: right;font-size: small;&>a {
 
 color: var(--color-muted)}}}.resumè{& .box:nth-child(1) {
 
 margin-inline-end: var(--space, 1rem);border-inline-start: var(--space, 1rem) solid var(--color-border);border-block-end: 1px solid var(--color-border);border-radius: calc(var(--space, 1rem) / 2) 0 0 calc(var(--space, 1rem) / 2)}& .box:nth-child(1n + 2){margin-inline-start: var(--space, 1rem);border-block-start: 1px solid var(--color-border);border-inline-end: var(--space, 1rem) solid var(--color-border);border-radius: 0 calc(var(--space, 1rem) / 2) calc(var(--space, 1rem) / 2) 0}.technical-skills>dl{
 & dd ul {
 
 list-style: none;display: flex;flex-wrap: wrap;gap: calc(var(--space, 1rem) / 2);li:has(+ li)::after {
 content: ", "}} & dt{
 font-weight: bolder}} .experience>ul{
 list-style: none;padding-inline-start: 0;&>li {
 padding-bottom: 1rem;border-bottom: 1px solid #fefefe}.grid>h4+span{color: var(--color-muted);font-size: 0.9rem}.grid .cluster{justify-content: space-between;span {
 padding-top: 0.1em}} .grid+p{padding-top: 0.5rem}p, p+ul>li{font-size: 0.95rem}}}.article{h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
 &:not(:first-child) {
 margin-block-start: 1rem}}}.no-label{label:has(+ input[placeholder], + textarea[placeholder]) {
 display: none}}label{color: var(--color-muted);font-size: small;font-family: "Open Sans", "Helvetica", "DejaVu Sans", sans-serif}input:focus-visible,textarea:focus-visible,button:focus-visible,select:focus-visible,a:focus-visible{outline: 2px solid #0086ac}input:user-valid,textarea:user-valid,select:user-valid{outline: 2px solid green}input:user-invalid,textarea:user-invalid,select:user-invalid{outline: 2px solid red}form:has(*:invalid) button[type="submit"]{pointer-events: none;color: #aaa;border-color: #eee}input,textarea{padding: var(--s-2);width: 100%;border-color: var(--color-border);border-style: solid;border-radius: calc(var(--space) / 4);font-family: "Open Sans", "Helvetica", "DejaVu Sans", sans-serif}hr{border-color: var(--color-border);border-style: solid}form fieldset{border: none}form button{cursor: pointer;padding: var(--s-2);color: var(--color-muted);border-color: var(--color-muted);border-style: solid;border-radius: var(--space);font-family: "Open Sans", "Helvetica", "DejaVu Sans", sans-serif;font-size: small;font-weight: bold;background-color: color-mix(in srgb, var(--color-muted), transparent 90%);&:hover {
 background-color: color-mix(in srgb, var(--color-muted), transparent 80%);border-color: color-mix(in srgb, var(--color-muted), var(--color-dark) 10%);color: color-mix(in srgb, var(--color-muted), var(--color-dark) 10%)}}.box.prevnext{margin-block-start: calc(var(--space, 1em) / 2);padding: calc(var(--space) / 2) var(--space) calc(var(--space) / 2);border-radius: 0 0 var(--space) var(--space);&>.prev {
 text-align: left;font-size: small}&>.next{text-align: right;font-size: small}}