header[data-v-d7b37dfe]{background-image:url(/assets/header-1-dark.e0294885.jpg);background-size:cover;min-height:100px;margin:0;box-shadow:0 3px 1rem 1rem #0003;border-block-end:1px solid #0004}header .container[data-v-d7b37dfe]{display:grid;grid-template-columns:auto auto;justify-content:space-between;align-items:center}.brand[data-v-d7b37dfe]{display:flex;gap:1em;align-items:center}.brand a[data-v-d7b37dfe]{margin:0;padding:0;text-decoration:none;transition:transform .15s ease-out}.brand a img[data-v-d7b37dfe]{display:block}.brand a h1[data-v-d7b37dfe]{font-size:1.2rem;margin:0}.brand a h1.header-text-wide[data-v-d7b37dfe]{display:none}.brand a h1.header-text-narrow[data-v-d7b37dfe]{display:block}.brand a[data-v-d7b37dfe]:hover,.brand a[data-v-d7b37dfe]:focus-within{transform:scale(1.1)}#logo-main[data-v-d7b37dfe]{width:clamp(75px,25px + 4vw,125px);aspect-ratio:1}@media (min-width: 768px){.brand[data-v-d7b37dfe]{gap:1.2em}.brand a h1[data-v-d7b37dfe]{font-size:revert}.brand a h1.header-text-wide[data-v-d7b37dfe]{display:block}.brand a h1.header-text-narrow[data-v-d7b37dfe]{display:none}}footer[data-v-e073a76a]{display:grid;gap:.5rem;padding:3rem;background-color:light-dark(#e0e0e5,#1a1a1a);background-image:linear-gradient(to bottom,#c0c0c410,#c0c0c408);box-shadow:0 -3px 3rem 1rem #ffffff10;border-block-start:1px solid #fff3;text-align:center;justify-content:center;color:light-dark(#1e1e1e,#ccc)}.brand a img[data-v-e073a76a]{transition:transform .15s ease-out}.brand a img[data-v-e073a76a]:hover,.brand a img[data-v-e073a76a]:focus-within{transform:scale(1.1)}#logo-main[data-v-e073a76a]{width:clamp(50px,25px + 3vw,100px);aspect-ratio:1}#links{button[data-v-53cd9eac] {position: absolute; top: 0; left: 0; background: var(--color-bg); color: var(--color-text); padding: var(--spacing-button); border-radius: var(--border-radius); cursor: pointer; transition: all .3s ease-in-out;} ul {&[data-v-53cd9eac] {position: relative; list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1em;} li {&[data-v-53cd9eac] {text-transform: uppercase; letter-spacing: var(--letterspace-medium);} svg[data-v-53cd9eac] {transition: color .5s ease-out,transform .5s ease-out;} &:hover svg[data-v-53cd9eac] {color: var(--color-accent) !important; transform: scale(1.5); transition: color .15s ease-out,transform .25s ease-out;} span[data-v-53cd9eac] {margin-left: 1ch;}}}}.project{&[data-v-0f133541]{padding:1em;border-radius:var(--border-radius);background-color:light-dark(#fcfcfc,var(--color-bg-light));border:2px solid var(--color-bg);flex-basis:325px}@media (min-width: 768px){&[data-v-0f133541]{flex-basis:450px}}h3[data-v-0f133541] {margin-top: 0;} .image-container {&[data-v-0f133541] {position: relative; z-index: 2; overflow: hidden; border-radius: var(--border-radius); box-shadow: 0 0 0 light-dark(#0005,#000),0 0 0 light-dark(#0002,#0008); transition: transform .5s ease-in-out,box-shadow .5s ease-in-out;} img[data-v-0f133541] {display: block; z-index: 3; width: 100%; filter: grayscale(100%); transition: filter .5s ease-out;}} .tech[data-v-0f133541] {position: relative; z-index: 1; transform: translate(0,-160%); transition: transform .5s ease-in .25s; display: flex; justify-content: flex-end; gap: 1ch;} &:hover {.image-container {&[data-v-0f133541] {transform: scale(1.05) rotate(.5deg); transition: transform 1s ease-in-out,box-shadow 1s ease-in-out; box-shadow: 2px 6px 12px light-dark(#0005,#000),1.5px 3px 6px light-dark(#0002,#0008);} img[data-v-0f133541] {filter: grayscale(0); transition: filter .15s ease-out;}} .tech[data-v-0f133541] {transform: translate(0,65%); transition: transform .25s ease-out;}}}main{&[data-v-6d141ed9]{display:grid;grid-template-columns:1fr;grid-template-areas:"content" "projects" "contact" "social";gap:1em}#section[data-v-6d141ed9] {grid-area: content;} #contact[data-v-6d141ed9] {grid-area: contact;} aside[data-v-6d141ed9] {grid-area: social;} #projects[data-v-6d141ed9] {grid-area: projects;} .projects[data-v-6d141ed9] {display: flex; flex-wrap: wrap; gap: 1em; justify-content: center;} @media (min-width: 768px) {&[data-v-6d141ed9] {grid-template-columns: 1fr auto; grid-template-areas: "content social" "projects projects" "contact contact";}}}:root{--color-bg-light: hsl(120, 0%, 20%);--color-brand: #0f0;--color-accent: var(--color-brand);--color-accent-dark: hsl(120, 100%, 30%);--color-primary: #007be6;--color-primary-dark: #0062cc;--color-primary-semi-opaque: #007be640;--color-primary-transparent: #007be600;--color-primary-shadow: #004c8f;--color-danger: light-dark(#8b0000, darkred);--ratio: 2.5;--spacing: 1ch;--spacing-button: var(--spacing);--spacing-button-x: calc(var(--spacing-button) * var(--ratio));--border-radius: 10px;--border-radius-sm: calc(var(--border-radius) / var(--ratio));--border-radius-lg: calc(var(--border-radius) * var(--ratio));--letterspace-narrow: .05em;--letterspace-medium: .075em;--letterspace-wide: .125em;--letterspace-x-wide: .2em;--bs-soft: 0 10px 15px -10px #0003, 0 1px 2px #0003}#app{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:grid;grid-template-rows:auto 1fr auto;min-height:100vh}h1{letter-spacing:var(--letterspace-x-wide)}h2{opacity:.9;letter-spacing:var(--letterspace-wide)}h3{opacity:.8;letter-spacing:var(--letterspace-medium);font-weight:500}h4{opacity:.8;letter-spacing:var(--letterspace-narrow)}p{max-width:70ch;opacity:.75;letter-spacing:var(--letterspace-narrow)}p,ul{line-height:1.6}a{color:inherit;transition:color .2s ease-out,background-color .2s ease-out;text-decoration-color:var(--color-primary-dark);text-underline-offset:2px;transition:text-decoration-color .5s ease-out}a:is(:hover,:focus-within){text-decoration-color:var(--color-fg);transition:text-decoration-color .15s ease-out}button{cursor:pointer;color:inherit;background-color:var(--color-bg);border:1px solid var(--color-bg-light);padding:.6rem 1rem}button:hover,button:focus-visible{border:1px solid var(--color-fg)}.btn{display:inline-block;padding:.6rem 1rem;text-transform:uppercase;letter-spacing:var(--letterspace-medium, 1px);background-color:light-dark(#fcfcfc,#141414);color:var(--color-fg);border:1px solid transparent;border-radius:var(--border-radius-sm);transition:background-color .2s ease-out,color .2s ease-out,border-color .5s ease-out}button,.btn{box-shadow:0 3px 3px -3px #0004,0 0 #0004 inset}.btn:hover,.btn:focus-visible{background-color:var(--color-primary);color:var(--color-fg);border-color:var(--color-fg-dark);transition:background-color .1s ease-out,color .1s ease-out,border-color .1s ease-out}button:active,.btn:active,a:active{box-shadow:0 3px 3px -3px #0004,0 0 10px #000 inset}form{width:clamp(300px,50%,600px);margin-inline:auto;padding:1rem 1.6rem;display:grid;gap:1rem;background-color:light-dark(#fff4,#0004);box-shadow:var(--bs-soft);outline:1px solid green}form:focus-within{background-color:light-dark(#fff6,#000)}form .form-group{display:grid;gap:.5rem;text-align:left}input{padding:1rem;width:100%;background-color:var(--color-bg);font-size:large;letter-spacing:.9px;border:1px solid light-dark(#ccc,#444);color:inherit;&::placeholder{color:light-dark(#666,#aaa);font-style:italic}}form button[type=submit]{background-color:var(--color-primary);justify-self:right}.container{padding:3rem .5rem;display:grid;gap:2.5rem;width:90%;max-width:1280px;margin-inline:auto;align-content:start}.container--wide{max-width:1400px}.container h2,.container h3{width:fit-content;padding:.25em .6em;padding-inline-end:1em;background-image:linear-gradient(to right,var(--color-primary-semi-opaque),var(--color-primary-transparent));border-radius:0 99vw 99vw 0;border-inline-start:.25em solid var(--clr-brand, #0f0)}.primary{background-color:var(--color-primary)}@media (min-width: 768px){h1,h2,h3,h4{font-size:revert}.big-flex{display:flex;gap:clamp(2em,.5em + 3vw,4em)}.big-flex.align-center{align-items:center}}