/****************************************
                INDEX
*****************************************/

/*
1. COMMON ELEMENTS
    1.1 CUSTOM PROPERTIES
    1.2 CSS RESET
    1.3 BACKGROUND IMAGES SETUP

2. STRUCTURE
    2.1 PORTFOLIO SECTIONS
    2.2 SECTION LABELS & ANCHORS' TARGETS
    2.3 FILING CABINET
    2.4 VIEWPORT FIXED ELEMENTS & FOOTER
    2.5 SCROLL ANIMATION
    2.6 TIME ANIMATIONS & TRANSITIONS
    2.7 STRUCTURE MEDIA QUERIES
    2.8 IMAGES MEDIA QUERY

3. NAV

4. LANGUAGE SELECTOR

5. HOME

6. ABOUT ME
    6.1 TIMELINE
    6.2 ABOUT ME TEXT

7. SKILLS
    7.1 SKILLSTAMPS
    7.2 STICKMAN ANIMATION

8. PROJECTS
    8.1 CARD GRID & SLEEVES
    8.2 CARDS FRONT & BACK
    8.3 CARDS COLOR ALTERNATIVES
    8.4 CARDS FRONT INFO
    8.5 CARDS BACK INFO
    8.6 MAIN PROJECTS STYLE

9. CONTACT
    9.1 CONTACT FORM
    9.2 FORM TRASITIONS

10. SECTION MOBILE LAYOUTS
    10.1 ABOUT ME MOBILE LAYOUT
    10.2 SKILLS MOBILE LAYOUT
    10.3 PROJECTS MOBILE LAYOUT
    10.4 CONTACT MOBILE LAYOUT

11. FOOTER
    11.1 TOOLTIPS
    11.2 TRANSITIONS
    11.3 SCROLL ANIMATION
    11.4 FOOTER MEDIA QUERIES
*/

/****************************************
            COMMON ELEMENTS
*****************************************/

/* CUSTOM PROPERTIES */

:root {
    --main-text-color: #130D0C;
    --alt-text-color: #0C0F13;
    --light-ui-color: #C49776;
    --dark-ui-color: #32271F;

    --font-script: "Dynalight", serif;
    --font-handwritten: "Indie Flower", cursive;
    --font-serif: "PT Serif", serif;
    --font-sans: "Roboto", sans-serif;
}

/* CSS RESET */

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    appearance: none;
}

h1, h2, h3, h4, a, body, p, ul, ol, menu, div, article {
    list-style: none;
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

h1, h2, h3, h4 {
    text-wrap: balance;
}

p, small {
    text-wrap: pretty;
    hyphens: auto;
}

input, button, textarea, select {
    font: inherit;
}

body {
    color: var(--main-text-color);
}

/* BACKGROUND IMAGES SETUP */

body, 
.home, 
.section-doc, 
.nav, 
.options, 
.filing-cabinet > div > div, 
.skills-stamp, 
.skills-stickman-animation, 
.contact-mail-icon,
.socialmedia-icon {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; 
}

/****************************************
               STRUCTURE
*****************************************/

/* PORTFOLIO SECTIONS */

html {
    scroll-behavior: smooth;
    scrollbar-color: var(--dark-ui-color) var(--light-ui-color);
}

body {
    background-color: #9C655D;
    background-size: cover;
    background-image:
        radial-gradient(ellipse 60% 50%, transparent 65%, #130D0C55 95%, #130D0C77 100%),
        url(../src/background/background_alt.png);
    background-image:
        radial-gradient(ellipse 60% 50%, transparent 65%, #130D0C55 95%, #130D0C77 100%),
        image-set(
            url(../src/background/background_medium.webp) 1x,
            url(../src/background/background_large.webp) 2x
        );
    min-height: 100vh;
    display: block flow-root;
    position: relative;
}

.home {
    background-image: url(../src/fcabinet/certificate_alt.png);
    background-image: 
        image-set(
            url(../src/fcabinet/certificate_medium.webp) 1x,
            url(../src/fcabinet/certificate_large.webp) 2x
        );
    width: 40vw;
    max-width: 80rem;
    aspect-ratio: 1200/806;
    margin: 10vh auto 0;
    position: relative;
    box-shadow: 0 0 7px 3px #130D0C99;
}

.section-doc {
    position: fixed;
    inset: 0;
    z-index: 40;
    height: 95vh;
    margin: auto;
    filter: drop-shadow(0 0 5px #130D0C);
    overflow: clip;
    overflow-clip-margin: content-box;
}

.about-me {
    background-image: url(../src/documents/document1_alt.png);
    background-image: 
        image-set(
            url(../src/documents/document1_medium.webp) 1x,
            url(../src/documents/document1_large.webp) 2x
        );
    aspect-ratio: 1218/1600;
}

.skills {
    background-image: url(../src/documents/document2_alt.png);
    background-image: 
        image-set(
            url(../src/documents/document2_medium.webp) 1x,
            url(../src/documents/document2_large.webp) 2x
        );
    height: 90vh;
    aspect-ratio: 1190/1600;
}

.projects {
    background-image: url(../src/documents/document3_alt.png);
    background-image: 
        image-set(
            url(../src/documents/document3_medium.webp) 1x,
            url(../src/documents/document3_large.webp) 2x
        );
    aspect-ratio: 1144/1600;
}

.contact {
    background-image: url(../src/documents/document4_alt.png);
    background-image: 
        image-set(
            url(../src/documents/document4_medium.webp) 1x,
            url(../src/documents/document4_large.webp) 2x
        );
    aspect-ratio: 1151/1600;
}

/* SECTION LABELS & ANCHORS' TARGETS */

/* 
Labels ('summary' elements) allow the opening of the different sections ('details' elements). They
appear inside the drawers of the filing cabinet.

Anchors' targets ('span' elements) are necessary since the section documents have a fixed position in
the viewport and can't trigger the scroll animation. These targets are transparent and are positioned at 
different heights of the filing cabinet in order to trigger the scroll animation correctly when using 
the post-it nav. 
*/

.section-label {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    border: #13110C min(.2vh, .3vw) solid;
    border-bottom: none;
    border-radius: max(.6vw, 5px) max(.6vw, 5px) 0 0;
    list-style: none;
    cursor: pointer;
    user-select: none;
    z-index: 5;
    
    & > div {
        display: grid;
        place-content: center;
        height: 80%;
        width: 80%;
        border: #32271F 1px solid;
        border-radius: max(.2vw, 1px);
        font: .8vmax var(--font-sans);
        letter-spacing: 2px;
        text-transform: uppercase;
    }
}

:lang(es) :is(.skills-label, .projects-label) > div {
    width: 90%;
    letter-spacing: 1.5px;
    font-size: .78vmax;
}

@supports (font-size: 1cqw) {
    .section-label {
        container-type: inline-size;

        & > div {
            font-size: 11cqw;
            border-width: 1.2cqw;
            letter-spacing: 1.6cqw;
        }
    }
}

/*
The home label behaves as a closing document button. The other button is NOT
a label, as it is a checkbox input. This second button functions as a hide/show
UI switch, but it’s ONLY DISPLAYED in portrait orientation on mobile devices.
Both of them have similar stylings.
*/

.close-btn,
.ui-hide-switch {
    display: grid;
    place-content: center;
    position: fixed;
    top: 11vh;
    right: calc(50vw - (95vh*1218/1600)/2 - 5vw);
    width: max(9vh, 4.5vw);
    aspect-ratio: 1;
    border: clamp(.45vh, .3vw, 8px) var(--dark-ui-color) solid;
    border-radius: 50%;
    z-index: 50;
    list-style: none;
    cursor: pointer;
    user-select: none;

    &::before, 
    &::after {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        height: 7%;
        width: 80%;
    }
}

.ui-hide-switch {
    display: none;
    top: 7vw;
    right: calc(14vw + max(10vw, 5.5vh));
    width: max(10vw, 5.5vh);

    &::before, 
    &::after {
        height: 25%;
        width: 25%;
    }
}

.about-me-label {
    inset: 15.1% 60% 82.58% 20%;
    background-color: #646464;
}

.skills-label {
    inset: 13.75% 26% 84.28% 55%;
    background-color: #534733;
}

.projects-label {
    inset: 42.5% 55.5% 55.4% 25%;
    background-color: #5B4E38;
}

.contact-label {
    inset: 43.18% 31% 54.5% 49%;
    background-color: #6B6B6B;
}

.section-anchor {
    position: absolute;
}

#home-anchor {
    top: -20vh;
}

/* 
The following calculation allows the anchors' targets to be positioned in the perfect spots to coincide
with the drawers’ opening in the scroll animation. Even if it seems tricky, it comes from this
next simple reasoning.

First, the total height of the webpage is calculated as follows:

'total-height = certificate-margin-top + certificate-height + fcabinet-height'

The value of 'certificate-margin-top' is 10vh, while the value of 'fcabinet-height', as it is
the container, is 100%.

The value of 'certificate-height' needs to be calculated from its width and inverse aspect ratio:

'certificate-height = max(certificate-width, certificate-maxwidth) / aspect-ratio'

Once the 'total-height' is obtained, the dynamic viewport height needs to be subtracted from it,
resulting in the total scrollable height of the webpage.

As the drawers’ animation peaks at 30% and 75% of the scroll, respectively, we can obtain those heights
by multiplying the total scrollable height by 0.3 and 0.75.

However, the anchors' targets are positioned relative to the filing cabinet, so it is necessary to 
subtract 'certificate-top-margin' and 'certificate-height' from the calculation.

Therefore, the targets’ top offset for the About Me and Skills sections is:

sweet-point-1 = (cert-mgt + cert-h + fcab-h - view-h) · 0.3 - cert-mgt - cert-h

And for the Projects and Contact sections:

sweet-point-2 = (cert-mgt + cert-h + fcab-h - view-h) · 0.75 - cert-mgt - cert-h

As the numbers are slightly different at smaller resolutions, media queries provide alternatives 
to this expression.
*/

#about-me-anchor, #skills-anchor {
    top: calc((min(40vw,80rem)*806/1200 + 10vh + 100% - 100vh) * .3 - min(40vw,80rem)*806/1200 - 10vh);
}

#projects-anchor, #contact-anchor {
    top: calc((min(40vw,80rem)*806/1200 + 10vh + 100% - 100vh) * .75 - min(40vw,80rem)*806/1200 - 10vh);
}

/* FILING CABINET */

.filing-cabinet {
    position: relative;
    aspect-ratio: 1657/3217;
    max-width: 80rem;
    width: 40vw;
    top: -2vh;
    margin: 0 auto;
    
    & > div > div {
        position: absolute;
    }
}

.filing-cabinet-back {
    background-image: url(../src/fcabinet/fcabinet_slots_alt.png);
    background-image:
        image-set(
            url(../src/fcabinet/fcabinet_slots_medium.webp) 1x,
            url(../src/fcabinet/fcabinet_slots_large.webp) 2x
        );
    inset: 20.44% 7.22% 29.37%;
}

.filing-cabinet-folders-1, .filing-cabinet-folders-2 {
    background-image: url(../src/fcabinet/fcabinet_folders_alt.png);
    background-image:
        image-set(
            url(../src/fcabinet/fcabinet_folders_medium.webp) 1x,
            url(../src/fcabinet/fcabinet_folders_large.webp) 2x
        );
    filter: drop-shadow(0 0 5px #130D0C);
}

.filing-cabinet-folders-1 {
    inset: 11.49% 11.89% 79.46%;
}

.filing-cabinet-folders-2 {
    inset: 39.54% 11.89% 51.42%;
}

.filing-cabinet-front {
    background-image: url(../src/fcabinet/fcabinet_structure_alt.png);
    background-image:
        image-set(
            url(../src/fcabinet/fcabinet_structure_medium.webp) 1x,
            url(../src/fcabinet/fcabinet_structure_large.webp) 2x
        );
    inset: 0;
    z-index: 10;
    pointer-events: none;
    filter: drop-shadow(0 0 5px #130D0C);
}

.filing-cabinet-drawer-1 {
    background-image: url(../src/fcabinet/fcabinet_drawer1_alt.png);
    background-image:
        image-set(
            url(../src/fcabinet/fcabinet_drawer1_medium.webp) 1x,
            url(../src/fcabinet/fcabinet_drawer1_large.webp) 2x
        );
    inset: 20.44% 7.22% 55.07%;
    z-index: 15;
    filter: drop-shadow(0 0 5px #130D0C);
}

.filing-cabinet-drawer-2 {
    background-image: url(../src/fcabinet/fcabinet_drawer2_alt.png);
    background-image:
        image-set(
            url(../src/fcabinet/fcabinet_drawer2_medium.webp) 1x,
            url(../src/fcabinet/fcabinet_drawer2_large.webp) 2x
        );
    inset: 48.5% 9.07% 29.37%;
    z-index: 15;
    filter: drop-shadow(0 0 5px #130D0C);
}

/* VIEWPORT FIXED ELEMENTS & FOOTER */

.nav {
    background-image: url(../src/ui/postit_alt.png);
    background-image:
        image-set(
            url(../src/ui/postit_medium.webp) 1x,
            url(../src/ui/postit_large.webp) 2x
        );
    aspect-ratio: 930/916;
    height: max(45vh, 23vw);
    position: fixed;
    top: -5vh;
    left: 2vw;
    transform: rotate(4deg);
    z-index: 60;
    filter: drop-shadow(0 0 5px #130D0C);
}

.options {
    background-image: url(../src/ui/sheet_alt.png);
    background-image:
        image-set(
            url(../src/ui/sheet_medium.webp) 1x,
            url(../src/ui/sheet_large.webp) 2x
        );
    aspect-ratio: 930/551;
    height: max(25vh, 13vw);
    position: fixed;
    bottom: -2vh;
    left: 2.5vw;
    transform: rotate(-2deg);
    z-index: 60;
    filter: drop-shadow(0 0 5px #130D0C);
}

.viewport-overlay-upper-gradient {
    background: linear-gradient(#130D0C88, transparent);
    position: fixed;
    inset: 0 0 auto 0;
    height: 10vh;
    z-index: 50;
    pointer-events: none;
}

.viewport-overlay-lower-gradient {
    background: linear-gradient(transparent, #130D0C88);
    position: fixed;
    inset: auto 0 0 0;
    height: 10vh;
    z-index: 50;
    pointer-events: none;
}

.layout-overlay-lower-gradient {
    background: radial-gradient(110% 80% at center bottom, #1D130F 60%, 85%, transparent);
    height: 70vh;
    max-height: 30%;
    position: absolute;
    inset: auto 0 0 0;
    z-index: 20;
}

/* SCROLL ANIMATION */

.filing-cabinet-drawer-1 {
    animation: 1ms linear scroll-open-drawer-1; /* 'animation-duration: 1ms' is a Firefox requirement (MDN) */
    animation-timeline: scroll();
}

.filing-cabinet-drawer-2 {
    animation: 1ms linear scroll-open-drawer-2; /* 'animation-duration: 1ms' is a Firefox requirement (MDN) */
    animation-timeline: scroll()
}

.filing-cabinet-folders-1 {
    animation: 1ms linear scroll-open-folders-1; /* 'animation-duration: 1ms' is a Firefox requirement (MDN) */
    animation-timeline: scroll();
}

.filing-cabinet-folders-2 {
    animation: 1ms linear scroll-open-folders-2; /* 'animation-duration: 1ms' is a Firefox requirement (MDN) */
    animation-timeline: scroll();
}

@keyframes scroll-open-drawer-1 {
    10%, 50% { transform: translateY(0); scale: 1; }
    25%, 35% { transform: translateY(40%); scale: 1.08; }
}

@keyframes scroll-open-drawer-2 {
    55%, 95% { transform: translateY(0); scale: 1; }
    70%, 80% { transform: translateY(40%); scale: 1.08; }
}

@keyframes scroll-open-folders-1 {
    10%, 50% { transform: translateY(0); scale: 1; }
    25%, 35% { transform: translateY(96%); scale: 1.08; }
}

@keyframes scroll-open-folders-2 {
    55%, 95% { transform: translateY(0); scale: 1; }
    70%, 80% { transform: translateY(90%); scale: 1.05; }
}

/*
Since folders are animated on scroll, anchor positioning of the documents' labels feels unstable.
Therefore, they were also animated on scroll.  
*/

.about-me-label {
    animation: 1ms linear scroll-open-label-1;
    animation-timeline: scroll();
}

.skills-label {
    animation: 1ms linear scroll-open-label-2;
    animation-timeline: scroll();
}

.projects-label {
    animation: 1ms linear scroll-open-label-3;
    animation-timeline: scroll();
}

.contact-label {
    animation: 1ms linear scroll-open-label-4;
    animation-timeline: scroll();
}

@keyframes scroll-open-label-1 {
    10%, 50% { transform: translateY(0); scale: 1; }
    25%, 35% { transform: translateY(369%); scale: 1.1; }
}

@keyframes scroll-open-label-2 {
    10%, 50% { transform: translateY(0); scale: 1; }
    25%, 35% { transform: translateY(425%); scale: 1.1; }
}

@keyframes scroll-open-label-3 {
    55%, 95% { transform: translateY(0); scale: 1; }
    70%, 80% { transform: translateY(380%); scale: 1.07; }
}

@keyframes scroll-open-label-4 {
    55%, 95% { transform: translateY(0); scale: 1; }
    70%, 80% { transform: translateY(343%); scale: 1.07; }
}

/* TIME ANIMATIONS & TRANSITIONS */

/*
The very next declaration block is necessary to ensure that the anchor is accessible for the main
nav to reach. 

When including animations in 'details' elements, the typical approach is to add 'content-visibility'
to the animation. However, by doing so, timing conflicts between anchor behavior and 'details' 
unfolding came up.

With 'content-visibility: visible', anchors' targets are always available and, even if the 'details' content
is no longer hidden, the animation allows for manual hiding. The use of 'details' is still
desirable since its reduces complexity and provides the accordion menu behavior.
*/

.filing-cabinet > details::details-content {
    content-visibility: visible;
}

.section-doc {
    animation: hide-document .3s both;
}

details[open] .section-doc {
    animation: show-document 1s .2s both;
}

@keyframes show-document {
    0% {
        transform: translateY(20vh);
        opacity: 0;
        display: block;
        scale: .7 .4;        
    }
    50% {
        transform: translateY(-50vh);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
        scale: 1;
    }
}

@keyframes hide-document {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100vh);
        opacity: 0;
        display: none;
    }
}

.section-label {
    & > div {
        background-color: #B3AB9C;
    }
    
    &:hover, &:focus-visible {
        filter: drop-shadow(0 -3px 2px #DFCEAC66);
        
        & > div {
            background-color: hsl(from #B3AB9C h s calc(l + 10));
        }
    }
    
    &:active {
        filter: drop-shadow(0 -3px 2px #DFCEAC66);
        
        & > div {
            background-color: hsl(from #B3AB9C h s calc(l - 10));
        }
    }
    
    &:focus-visible {
        outline: #C4AA76 solid 2px;
        outline-offset: 1px; 
    }
}

.close-btn,
.ui-hide-switch {
    visibility: hidden;
    background-color: var(--light-ui-color);
    filter: drop-shadow(0 0 3px #130D0C);
    transform: translateY(-25vh);
    transition:
        visibility 1s allow-discrete,
        transform 1s ease-in-out;
    
    &::before, &::after {
        background-color: var(--dark-ui-color);
        transition: transform .3s;
    }

    &:focus-visible {
        outline: #C4AA76 solid 2px;
        outline-offset: 1px;
    }
}

.close-btn {
    &:hover, &:focus-visible {
        background-color: hsl(from var(--light-ui-color) h s calc(l + 10));
        filter: drop-shadow(0 0 5px #DFCEAC);
    }

    &:active {
        background-color: hsl(from var(--light-ui-color) h calc(s - 10) calc(l - 20));
    }
}

.ui-hide-switch {
    &::before {
        background-color: transparent;
        border-right: .4vmax solid var(--dark-ui-color);
        border-bottom: .4vmax solid var(--dark-ui-color);
        transform-origin: 10% 0;
    }

    &::after {
        background-color: transparent;
        border-left: .4vmax solid var(--dark-ui-color);
        border-top: .4vmax solid var(--dark-ui-color);
        transform-origin: 90% 100%;
    }

    &:active {
        background-color: hsl(from var(--light-ui-color) h s calc(l + 10));
        filter: drop-shadow(0 0 5px #DFCEAC);
    }
}

main:has(.filing-cabinet > details[open]) :is(.close-btn, .ui-hide-switch) {
    visibility: visible;
    transform: translateY(0) rotate(360deg);
    transition:
        visibility 1s .5s allow-discrete,
        transform 1s .5s linear(0, 0.402 7.4%, 0.711 15.3%, 0.929 23.7%, 1.008 28.2%, 1.067 33%, 1.099 36.9%, 1.12 41%, 1.13 45.4%, 1.13 50.1%, 1.111 58.5%, 1.019 83.2%, 1.004 91.3%, 1);
}

main:has(.filing-cabinet > details[open]) .close-btn {
     &::before {
        transform: rotate(45deg);
        transition: transform .5s .7s cubic-bezier(0.32, 0, 0.67, 0);
    }
    
    &::after {
        transform: rotate(-45deg);
        transition: transform .5s .7s cubic-bezier(0.32, 0, 0.67, 0);
    }
}

main:has(.filing-cabinet > details[open]) .ui-hide-switch {
    transition-delay: .6s;

    &::before {
        transform: translate(-50%, -55%);
        rotate: 180deg;
        transition: 
            transform .5s .5s cubic-bezier(0.32, 0, 0.67, 0),
            rotate .5s cubic-bezier(0.32, 0, 0.67, 0);
    }
    
    &::after {
        transform: translate(50%, 55%);
        rotate: 180deg;
        transition: 
            transform .5s .5s cubic-bezier(0.32, 0, 0.67, 0),
            rotate .5s cubic-bezier(0.32, 0, 0.67, 0);
    }
}

main:has(.filing-cabinet > details[open]) .ui-hide-switch:checked {

    &::before {
        transform: translate(-50%, -65%);
        rotate: 0deg;
        transition: 
            transform .5s .5s cubic-bezier(0.32, 0, 0.67, 0),
            rotate .5s cubic-bezier(0.32, 0, 0.67, 0);
    }

    &::after {
        transform: translate(50%, 65%);
        rotate: 0deg;
        transition: 
            transform .5s .5s cubic-bezier(0.32, 0, 0.67, 0),
            rotate .5s cubic-bezier(0.32, 0, 0.67, 0);
    }
}

/*
Only for mobile devices in portrait orientation.
*/

.nav, .options {
    transition:
        transform .7s ease-out;
}

/* STRUCTURE MEDIA QUERIES */

@media (orientation: portrait) and (max-width: 1200px) {
    .home {
        width: 90vw;
        margin-top: 20vh;
    }

    .filing-cabinet {
        width: 95vw;
        top: -1vh;
    }

    .section-doc {
        height: 120vh;
        inset: -100vw;
    }

    .skills {
        height: 130vh;
    }

    .contact {
        height: 130vh;
        bottom: -80vw;
    }

    .close-btn {
        top: 7vw;
        right: 7vw;
        width: max(10vw, 5.5vh);
        transition-delay: .1s;
    }

    .ui-hide-switch {
        display: grid; /* 2.2 SECTION LABELS & ANCHORS' TARGETS */
    }

    #about-me-anchor, #skills-anchor {
        top: calc((90vw*806/1200 + 20vh + 100% - 100dvh) * .3 - 90vw*806/1200 - 20vh);
    }

    #projects-anchor, #contact-anchor {
        top: calc((90vw*806/1200 + 20vh + 100% - 100dvh) * .75 - 90vw*806/1200 - 20vh);
    }

    .nav {
        height: 60vw;
        max-height: 30vh;
        top: -4vh;
        left: -5vw;
        transform: rotate(5deg);
    }

    .options {
        height: clamp(25vw, 18vh, 30vw);
        left: auto;
        right: -2vw;
        transform: rotateY(180deg) rotate(3deg);

        & > * {
            transform: rotateY(180deg);
        }        
    }

    body:has(.filing-cabinet > details[open]) {
        & .nav {
            transform: translate(-33%, -45%) rotate(-3deg);
            pointer-events: none;
        }

        & .options {
            transform: translate(25%, 35%) rotate(3deg) rotateY(180deg);
            pointer-events: none;
        }
    }

    body:has(#ui-hide-switch:checked) {
        & .nav {
            transform: translate(0) rotate(4deg);
            pointer-events: auto;
        }

        & .options {
            transform: translate(0) rotate(-2deg) rotateY(180deg);
            pointer-events: auto;
        }
    } 

    @keyframes show-document {
        0% {
            transform: translateY(20vh);
            opacity: 0;
            display: block;
            scale: .5 .3;
        }
        70% {
            transform: translateY(-15vh);
            opacity: 1;
        }
        100% {
            transform: translateY(0);
            scale: 1;
        }
    }
}

@media (orientation: landscape) and (max-width: 1500px) {
    .home {
        width: 50vw;
        left: 15vw;
    }

    .filing-cabinet {
        width: 50vw;
        left: 15vw;
    }

    .section-doc {
        left: 30vw;
    }

    .close-btn {
        right: max(35vw - 95vh*1218/1600/2 - 7vw, 1vw);
    }

    #about-me-anchor, #skills-anchor {
        top: calc((50vw*806/1200 + 10vh + 100% - 100dvh) * .3 - 50vw*806/1200 - 10vh);
    }

    #projects-anchor, #contact-anchor {
        top: calc((50vw*806/1200 + 10vh + 100% - 100dvh) * .75 - 50vw*806/1200 - 10vh);
    }
    
    @media (min-aspect-ratio: 1.8) {
        .section-doc-wrapper {
            display: block flow-root;
            position: fixed;
            width: 55vw;
            height: 100dvh;
            inset: 0 0 0 30vw;
            margin: auto;
            overflow: hidden auto;
            z-index: 40;
            opacity: 0;
            transform: translateX(60vw);
            transition: opacity .3s, transform .3s;
            scrollbar-color: var(--light-ui-color) transparent;
            scrollbar-width: thin;
        }

        details[open] .section-doc-wrapper {
            opacity: 1;
            transform: translateX(0);
        }

        .section-doc {
            position: static;
            margin: 5vh auto;
            height: auto;
            max-height: 180vh;
            width: 90%;
        }

        .close-btn {
            right: 1.5vw;
        }
    }
}

/* IMAGES MEDIA QUERY */

@media (max-width: 1200px) {
    body {
        background-image: 
            radial-gradient(ellipse 60% 50%, transparent 65%, #130D0C55 95%, #130D0C77 100%),
            image-set(
                url(../src/background/background_small.webp) 1x,
                url(../src/background/background_medium.webp) 2x
            );
    }

    .home {
        background-image: 
            image-set(
                url(../src/fcabinet/certificate_small.webp) 1x,
                url(../src/fcabinet/certificate_medium.webp) 2x
            );
    }

    .about-me {
        background-image: 
            image-set(
                url(../src/documents/document1_small.webp) 1x,
                url(../src/documents/document1_medium.webp) 2x
            );
    }

    .skills {
        background-image: 
            image-set(
                url(../src/documents/document2_small.webp) 1x,
                url(../src/documents/document2_medium.webp) 2x
            );
    }

    .projects {
        background-image: 
            image-set(
                url(../src/documents/document3_small.webp) 1x,
                url(../src/documents/document3_medium.webp) 2x
            );
    }

    .contact {
        background-image: 
            image-set(
                url(../src/documents/document4_small.webp) 1x,
                url(../src/documents/document4_medium.webp) 2x
            );
    }

    .filing-cabinet-back {
        background-image: 
            image-set(
                url(../src/fcabinet/fcabinet_slots_small.webp) 1x,
                url(../src/fcabinet/fcabinet_slots_medium.webp) 2x
            );
    }

    .filing-cabinet-folders-1, .filing-cabinet-folders-2 {
        background-image: 
            image-set(
                url(../src/fcabinet/fcabinet_folders_small.webp) 1x,
                url(../src/fcabinet/fcabinet_folders_medium.webp) 2x
            );
    }

    .filing-cabinet-front {
        background-image: 
            image-set(
                url(../src/fcabinet/fcabinet_structure_small.webp) 1x,
                url(../src/fcabinet/fcabinet_structure_medium.webp) 2x
            );
    }

    .filing-cabinet-drawer-1 {
        background-image: 
            image-set(
                url(../src/fcabinet/fcabinet_drawer1_small.webp) 1x,
                url(../src/fcabinet/fcabinet_drawer1_medium.webp) 2x
            );
    }

    .filing-cabinet-drawer-2 {
        background-image: 
            image-set(
                url(../src/fcabinet/fcabinet_drawer2_small.webp) 1x,
                url(../src/fcabinet/fcabinet_drawer2_medium.webp) 2x
            );
    }

    .nav {
        background-image: 
            image-set(
                url(../src/ui/postit_small.webp) 1x,
                url(../src/ui/postit_medium.webp) 2x
            );
    }

    .options {
        background-image: 
            image-set(
                url(../src/ui/sheet_small.webp) 1x,
                url(../src/ui/sheet_medium.webp) 2x
            );
    }
}

/****************************************
                 NAV
*****************************************/

.nav-list {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    position: absolute;
    inset: 22% 10% 10% 18%;
    font: max(1.4rem, 4.5vmin) var(--font-handwritten);
    letter-spacing: 8%;
    user-select: none;
}

.nav-anchor {
    border-radius: 1.2vmin;
    padding: 0 5%;
    
    &:hover, &:focus-visible {
        text-decoration: underline solid 6% currentColor;
        text-shadow: 0 0 10px hsl(from var(--main-text-color) h calc(s + 90) calc(l + 80));
        color: hsl(from var(--main-text-color) h calc(s + 10) calc(l + 20))
    }
    
    &:active {
        text-decoration: underline solid 6% currentColor;
        text-shadow: 0 0 10px hsl(from var(--main-text-color) h calc(s + 90) calc(l + 80));
        color: hsl(from var(--main-text-color) h calc(s - 10) calc(l - 20))
    }

    &:focus-visible {
        outline: hsl(from var(--main-text-color) h calc(s + 10) calc(l + 20)) solid 3px;
        outline-offset: 2px; 
    }
}

@supports (font-size: 1cqw) {
    .nav {
        container-type: inline-size;
        
        & > .nav-list {
            font-size: 10cqw;
        }
    }
}

:lang(es) .nav-list {
    left: 10%;
}

@media (orientation: portrait) and (max-width: 1200px) {
    :lang(es) .nav-list {
        left: 15%;
    }
}

/****************************************
           LANGUAGE SELECTOR
*****************************************/

.lang-list {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    position: absolute;
    inset: 10% 2% 15% 7%;
    justify-content: space-evenly;
    align-items: center;
    font: bold max(1rem, 3vmin) var(--font-handwritten);
    letter-spacing: 8%;
    user-select: none;
}

.lang-list li {
    flex: 0 0 40%;
    text-align: center;
}

.lang-flag {
    width: 100%;
    filter: drop-shadow(0 0 .3vmax #130D0C);
    border: var(--main-text-color) solid .2vmax;
    border-radius: 1vmax;
    aspect-ratio: 1.4;
    margin-bottom: 5%;
}

#lang-current,
.lang-alternative {
    transition: scale .3s ease-in-out;

    & .lang-flag {
        transition: filter .3s;
    }
}

#lang-current {
    scale: 1.10;
}

.lang-alternative {
    display: block;

    &:hover, &:focus-visible {
        scale: 1.10;
        outline: none;

        & .lang-flag {
            outline: #D4C079 solid .2vmax;
            outline-offset: .15vmax;
            filter: drop-shadow(0 0 .3vmax #D4C097);
        }
    }

    &:active {
        scale: 1;
    }
}

.lang-list:has(.lang-alternative:is(:hover, :focus-visible)) #lang-current {
    scale: 1;
}

.spanish-flag {
    background-image: linear-gradient(#BA2D18 0% 29%, #d9c632 30% 70%, #BA2D18 71% 100%)
}

.english-flag {
    background:
        linear-gradient(90deg, transparent 43%, #BA2D18 44% 56%, transparent 57%),
        linear-gradient(transparent 35%, #e3e1de 36% 41%, #BA2D18 42% 58%, #e3e1de 59% 64%, transparent 65%),
        linear-gradient(90deg, transparent 38%, #e3e1de 39% 61%, transparent 62%), 
        linear-gradient(34deg, transparent 46%, #BA2D18 47% 53%, transparent 54%) 0% 6% / 50% 50% no-repeat,
        linear-gradient(34deg, transparent 46%, #BA2D18 47% 53%, transparent 54%) 100% 94% / 50% 50% no-repeat,
        linear-gradient(146deg, transparent 46%, #BA2D18 47% 53%, transparent 54%) 100% -2% / 50% 50% no-repeat,
        linear-gradient(146deg, transparent 46%, #BA2D18 47% 53%, transparent 54%) 0% 102% / 50% 50% no-repeat,
        linear-gradient(34deg, transparent 45%, #e3e1de 46% 54%, transparent 55%),
        linear-gradient(146deg, transparent 45%, #e3e1de 46% 54%, transparent 55%),
        #12315e;
}

@supports (font-size: 1cqw) {
    .options {
        container-type: inline-size;
        
        & > .lang-list {
            font-size: 6.5cqw;
        }
    }
}

/****************************************
                 HOME
*****************************************/

.home-content-wrapper, .home-content-wrapper :is(header, hgroup) {
    display: flex;
    text-align: center;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

.home-content-wrapper {
    position: absolute;
    inset: 14% 10%;
    row-gap: 15%;
    font: 16px var(--font-serif);
    color: hsl(from var(--main-text-color) h s l / 85%);
    letter-spacing: .08vmax;
    
    & header {
        row-gap: 2vmax;
    }
    
    & small {
        color: hsl(from var(--main-text-color) h calc(s - 20) calc(l + 35) / 50%);
        font-size: 143%;
        font-weight: bold;
        filter: blur(.03vmax);
    }
    
    & h1 {
        font: 400% var(--font-script);
        letter-spacing: normal;
        color: #784E48;
        text-wrap: nowrap;
        line-height: .95;
    }

    & p {
        hyphens: none;
    }
}

@supports (font-size: 1cqw) {
    .home-content-wrapper {
        container-type: inline-size;

        & > * {
            font-size: 3.5cqw;
        }
    }
}

/****************************************
               ABOUT ME
*****************************************/

.about-me-content-wrapper {
    position: absolute;
    font: 16px var(--font-serif);
    inset: 8% 11% 5%;
}

@supports (font-size: 1cqw) {
    .about-me-content-wrapper {
        container-type: inline-size;

        & > * {
            font-size: 3.1cqw;
        }
    }
}

.about-me-content-wrapper header {
    margin-bottom: 3%;
    text-align: center;
    letter-spacing: 5%;
}

.about-me-content-wrapper h2 {
    font-size: 150%; 
}

/* TIMELINE */

.about-me-timeline ul {
    display: flex;
    flex-flow: row nowrap;
    column-gap: 2%;
    justify-content: center;
    position: relative;

    &:before {
        content: "";
        position: absolute;
        height: 3%;
        width: 75%;
        background-color: var(--main-text-color);
        top: 0;
    }
}

.about-me-timeline li {
    padding: 1% 2% 0;
    flex: 0 0 30%;
    text-align: center;
    position: relative;

    &:before {
        content: "";
        position: absolute;
        border-radius: 50%;
        background-color: var(--main-text-color);
        width: 6%;
        aspect-ratio: 1;
        left: calc(50% - 3%);
        top: -5%;
    }
}

.about-me-timeline time {
    font-size: 115%;
    text-wrap: nowrap;
}

.about-me-timeline p {
    font-size: 82%;
}

/* ABOUT ME TEXT */

.about-me-text h3 {
    margin-block: 4% .5%;
    font-size: 117%;
    font-weight: bold;
    padding-left: 3%; 
}

.about-me-text p {
    text-align: justify;
}

/****************************************
                SKILLS
*****************************************/

.skills-content-wrapper {
    display: flex;
    flex-flow: column nowrap;
    position: absolute;
    font: bold 16px var(--font-handwritten);
    inset: 2% 4% 5%;
}

@supports (font-size: 1cqw) {
    .skills-content-wrapper {
        container-type: inline-size;

        & > * {
            font-size: 3cqw;
        }
    }
}

.skills-content-wrapper header {
    position: absolute;
    inset: 0 15% auto auto;

    & h2 {
        font-size: 250%;
        font-weight: normal;
        letter-spacing: .3vmax;
        text-transform: uppercase;
    }

    & :lang(es) h2 {
        font-size: 500%;
    }
}

:lang(es) .skills-content-wrapper h2 {
    font-size: 230%;
    padding-right: 2%;
}

.skills-group {
    flex: 0 0 20%;
    anchor-scope: --skills-group-border;

    & h3 {
        position: absolute;
        font-size: 115%;
        color: #784E48;
        writing-mode: sideways-rl;  
        text-wrap: nowrap;
        position-anchor: --skills-group-border;
        left: anchor(right);
        top: calc(anchor(top) + 4%);
    }
}

/* SKILLSTAMPS */

.skills-list {
    display: flex;
    width: 95%;
    flex-flow: row wrap;
    justify-content: center;
    anchor-name: --skills-group-border;
    padding-block: 2%;
    border-bottom: .2vmax dashed #784E4877;
    column-gap: 5%;
    
    & li {
        flex: 0 0 19%;
    }
}

.skills-list-1 {
    column-gap: 0;
}

.skills-list-3 {
    width: 73%;
    padding: none;
    border: none;
    column-gap: 8%;
    
    & li {
        flex: 0 0 24.7%;
    }
}

.skills-list summary {
    list-style: none;
    text-align: center;
    line-height: .95;
    cursor: pointer;
}

.skills-stamp {
    width: 100%;
    margin: 0 auto;
    aspect-ratio: 1;
    background-size: 500% 300%;
    background-image: url(../src/sprites/skillstamps_sprite_alt.png);
    background-image:
        image-set(
            url(../src/sprites/skillstamps_sprite_medium.webp) 1x,
            url(../src/sprites/skillstamps_sprite_large.webp) 2x
        );
    filter: invert(32%) sepia(22%) saturate(796%) hue-rotate(319deg) brightness(95%) contrast(86%); /* Converted with https://codepen.io/sosuke/pen/Pjoqqp */
}

@media (max-width: 1200px) {
    .skills-stamp {
        background-image:         
            image-set(
                url(../src/sprites/skillstamps_sprite_small.webp) 1x,
                url(../src/sprites/skillstamps_sprite_medium.webp) 2x
            );
    }
}

.skills-stamp-1 {
    background-position: 0 0;
}
.skills-stamp-2 {
    background-position: 25% 0;
}
.skills-stamp-3 {
    background-position: 50% 0;
}
.skills-stamp-4 {
    background-position: 75% 0;
}
.skills-stamp-5 {
    background-position: 100% 0;
}
.skills-stamp-6 {
    background-position: 0 50%;
}
.skills-stamp-7 {
    background-position: 25% 50%;
}
.skills-stamp-8 {
    background-position: 50% 50%;
}
.skills-stamp-9 {
    background-position: 75% 50%;
}
.skills-stamp-10 {
    background-position: 100% 50%;
}
.skills-stamp-11 {
    background-position: 0 100%;
}
.skills-stamp-12 {
    background-position: 25% 100%;
}
.skills-stamp-13 {
    background-position: 50% 100%;
}
.skills-stamp-14 {
    background-position: 75% 100%;
}
.skills-stamp-15 {
    background-position: 100% 100%;
}

.skills-list :is(summary:hover, summary:focus-visible) {
    scale: 1.05;
    text-shadow: 0 0 10px hsl(from var(--main-text-color) h calc(s + 90) calc(l + 80));
    color: hsl(from var(--main-text-color) h calc(s + 10) calc(l + 20));
    
    & .skills-stamp {
        filter: invert(32%) sepia(22%) saturate(820%) hue-rotate(319deg) brightness(110%) contrast(86%) drop-shadow(0 0 3px #DFCEAC); /* Converted with https://codepen.io/sosuke/pen/Pjoqqp */
    }
}

.skills-list summary:active {
    scale: .95;
    text-shadow: 0 0 10px hsl(from var(--main-text-color) h calc(s + 90) calc(l + 80));
    color: hsl(from var(--main-text-color) h calc(s + 10) calc(l + 20));
    
    & .skills-stamp {
        scale: .95;
        filter: invert(32%) sepia(22%) saturate(780%) hue-rotate(319deg) brightness(70%) contrast(86%) drop-shadow(0 0 3px #DFCEAC); /* Converted with https://codepen.io/sosuke/pen/Pjoqqp */
    }
}

.skills-list summary:focus-visible {
    border-radius: 1.2vmin;
    outline: hsl(from var(--main-text-color) h calc(s + 10) calc(l + 20)) solid 2px;
    outline-offset: 1px;
}

.skills-list details:open summary {
    scale: 1.1;
    color: hsl(from var(--alt-text-color) h calc(s + 10) calc(l + 30));
    text-shadow: none;
    
    & .skills-stamp {
        filter: invert(50%) sepia(8%) saturate(1755%) hue-rotate(177deg) brightness(88%) contrast(91%) drop-shadow(0 0 3px #DFCEAC); /* Converted with https://codepen.io/sosuke/pen/Pjoqqp */
    }
    
    &:focus-visible {
        outline-color: hsl(from var(--alt-text-color) h calc(s + 10) calc(l + 30));
    }
}

.skills-list summary {
    transition: scale .3s, filter .3s, color .3s;
    
    & .skills-stamp {
        transition: scale .2s, filter .2s;
    }
}

.skills-group:has(details:open) h3 {
    color: hsl(from var(--alt-text-color) h calc(s + 10) calc(l + 30));
}

.skills-description {
    font-weight: normal;
    position: absolute;
    inset: 9% 18% 81% 22%;
    hyphens: auto;
}

.skills-list details::details-content {
    opacity: 0;
    transition: 
        opacity .3s,
        content-visibility 1s allow-discrete;
}

.skills-list details:open::details-content {
    opacity: 1;
    transition: 
        opacity .3s .2s,
        content-visibility 1s allow-discrete;
}

/* STICKMAN ANIMATION */

.skills-description-container {
    flex: 0 0 20%;
    width: 85%;
    display: flex;
    justify-content: space-between;
}

.skills-stickman-animation {
    margin-top: 10%;
    aspect-ratio: 200/229.5;
    background-position: 0 0;
    background-size: 500% 200%;
    background-image: url(../src/sprites/skillanimation_sprite_alt.png);
    background-image:
        image-set(
            url(../src/sprites/skillanimation_sprite_medium.webp) 1x,
            url(../src/sprites/skillanimation_sprite_large.webp) 2x
        );
    filter: invert(32%) sepia(22%) saturate(796%) hue-rotate(319deg) brightness(20%) contrast(86%); /* Converted with https://codepen.io/sosuke/pen/Pjoqqp */
    animation: 1.3s steps(1) infinite static-animation;
}

@media (max-width: 1200px) {
    .skills-stickman-animation {
        background-image:       
            image-set(
                url(../src/sprites/skillanimation_sprite_small.webp) 1x,
                url(../src/sprites/skillanimation_sprite_medium.webp) 2x
            );
    }
}

.skills-speech-bubble {
    height: 60%;
    border-left: .2vmax solid var(--main-text-color);
    border-bottom: .2vmax solid var(--main-text-color);
    border-radius: 1vmax;
    flex: 0 0 78%;
    align-self: end;
    position: relative;
    
    &::before {
        content: "";
        position: absolute;
        clip-path: polygon(0% 30%, 100% 0%, 100% 100%);
        height: 10%;
        width: 5%;
        inset: 20% auto auto -5%;
        background-color: var(--main-text-color);
    }
}

.skills-content-wrapper:has(details:open) .skills-stickman-animation {
    animation:
        .37s steps(1) trans-animation,
        1.3s .37s steps(1) infinite speak-animation;
}

@keyframes static-animation {
    0% { background-position: 0 0; }
    14.3%  { background-position: 25% 0; }
    28.6%  { background-position: 50% 0; }
    42.9%  { background-position: 0 0; }
    57.2%  { background-position: 25% 0; }
    71.5%  { background-position: 50% 0; }
    85.8% { background-position: 75% 0; }
}

@keyframes trans-animation {
    0% {
        background-position: 100% 0;
    }
    50% {
        background-position: 0 100%;
    }
}

@keyframes speak-animation {
    0% { background-position: 25% 100%; }
    14.3%  { background-position: 50% 100%; }
    28.6%  { background-position: 75% 100%; }
    42.9%  { background-position: 25% 100%; }
    57.2%  { background-position: 50% 100%; }
    71.5%  { background-position: 75% 100%; }
    85.8% { background-position: 100% 100%; }
}

/****************************************
               PROJECTS
*****************************************/

.projects-content-wrapper {
    position: absolute;
    inset: 9% 4% 3% 6%;
    font: 16px var(--font-sans);
    color: #000A;
}

@supports (font-size: 1cqw) {
    .projects-content-wrapper {
        container-type: inline-size;

        & > * {
            font-size: 2.8cqw;
        }
    }
}

.projects-content-wrapper > header {
    position: absolute;
    inset: -7.8% 68% 104% 4%;

    & h2 {
        font: 150% var(--font-handwritten);
        text-align: center;
        letter-spacing: 15%;
        text-transform: uppercase;
    }
}

/* CARD GRID & SLEEVES */

.projects-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    height: 100%;
    gap: 1%;
}

.projects-item {
    position: relative;
    cursor: alias;
}

.projects-cardsleeve {
    position: absolute;
    width: 100%;
    height: 100%;
    border: .15vmax solid hsl(from var(--alt-text-color) h s l / 20%);
    border-top: none;
    border-bottom-left-radius: .3vmax;
    border-bottom-right-radius: .3vmax;
    z-index: 10;
    pointer-events: none;
}

.projects-item {
    &:nth-child(2n) .projects-cardsleeve {
        background-image: linear-gradient(150deg, #FFF2 0 30%, #FFFFFF36 35%, #FFF2 40%, #FFFFFF36 45% 50%, #FFF2 55% 65%, #FFFFFF36 70%, #FFF2 75% 100%);
    }
    
    &:nth-child(2n-1) .projects-cardsleeve {
        background-image: linear-gradient(150deg, #FFF2 0 30%, #FFFFFF36 35% 45%, #FFF2 50%, #FFFFFF36 55%, #FFF2 60% 100%);
    }
}

/* CARDS FRONT & BACK */

.projects-card {
    width: 90%;
    height: 95%;
    margin: 3% auto 0;
    background-color: inherit;
    border-radius: .8vmax;
    box-shadow: 0 0 .3vmax hsl(from var(--alt-text-color) h s l / 70%);
    transform-style: preserve-3d;
    transition: transform .7s ease-in-out;
}

.projects-card-front, 
.projects-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    border: .2vmax solid #000A;
    border-radius: .8vmax;
    backface-visibility: hidden;
    overflow: hidden;

    &::before {
        content: "";
        box-sizing: border-box;
        position: absolute;
        inset: 0;
        border: #FFF9 solid .3vmax;
        z-index: 10;
        pointer-events: none;
    }
}

.projects-card-back {
   transform: rotateY(180deg);

    &::after {
        content: "";
        position: absolute;
        inset: .25vmax;
        background-image: repeating-conic-gradient(from 5deg, #FFF1 0 5%, #0001 5% 10%);
    }
}

:is(.projects-item:hover, .projects-item:focus-within) .projects-card {
    transform: rotateY(180deg);
}

/* CARDS COLOR ALTERNATIVES */

.projects-item-red {
    --project-card-color: #9C655D;
    & .projects-card-front {

        background-color: #9C655D;
    }

    & .projects-card-back {
        background-color: #784E48;
    }
}

.projects-item-yellow {
    --project-card-color: #9C875D;
    & .projects-card-front {
        background-color: #9C875D;
    }

    & .projects-card-back {
        background-color: #786848;
    }
}

.projects-item-blue {
    --project-card-color: #5D769C;
    & .projects-card-front {
        background-color: #5D769C;
    }

    & .projects-card-back {
        background-color: #485B78;
    }
}

.projects-item-green {
    --project-card-color: #619C5D;
    & .projects-card-front {
        background-color: #619C5D;
    }

    & .projects-card-back {
        background-color: #4B7848;
    }
}

/* CARDS FRONT INFO */

.projects-card-title {
    display: grid;
    width: 85%;
    height: auto;
    max-height: 20%;
    padding: 3% 2%;
    margin: 12% auto 0;
    background-color: #FFF2;
    font-size: 110%;
    font-weight: bold;
    font-variant: small-caps;
}

.projects-card-img-container {
    position: relative;
    width: 85%;
    aspect-ratio: .85;
    margin: 6% auto auto;
    background-color: #777D;
    border: .15vmax solid #0009;

    &::before {
        content: "?";
        position: absolute;
        inset: 0;
        width: min-content;
        height: min-content;
        margin: auto;
        font: bold 800% var(--font-serif);
        color: #FFF2;
        filter: blur(.1vmax);
    }

    & img {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        filter: brightness(90%) contrast(70%);
        object-fit: cover;
    }
}

.projects-card-techs {
    position: absolute;
    inset: 27% 6% 8.5%;
    display: flex;
    flex-flow: column-reverse;
    row-gap: 3%;
    font-size: 80%;
    font-weight: bold;
}

.projects-card-techs li {
    align-self: end;
    width: min-content;
    height: min-content;
    min-width: 22%;
    padding: 1% 2% 1% 4%;
    border: .15vmax solid #FFF6;
    border-radius: 3vmax 0 0 3vmax;
    text-align: right;
    text-wrap: nowrap;
    
    &:nth-child(n + 4) {
        align-self: start;
        padding: 1% 4% 1% 2%;
        border-radius: 0 3vmax 3vmax 0;
        text-align: left;
    }
}

.projects-card-techs .projects-card-html {
    background-color: #C49776;
}
.projects-card-techs .projects-card-css {
    background-color: #7695C4;
}
.projects-card-techs .projects-card-js {
    background-color: #C4AA76;
}
.projects-card-techs .projects-card-py {
    background-color: #7BC476;
}

/* CARDS BACK INFO */

.projects-card-description {
    position: absolute;
    inset: 8% 8% auto;
    font-size: 85%;
    z-index: 20;
}

.projects-card-description p {
    padding: 4%;
    background-color: hsl(from var(--project-card-color) h calc(s - 10) calc(l + 15));
    border-radius: .6vmax;
    line-height: 1.4;
}

.projects-card-links {
    display: flex;
    flex-direction: column;
    margin-top: 7%;

    & li {
        width: 100%;
        margin-bottom: 3%;
    }
}

.projects-card-links a {
    display: block;
    width: min-content;
    height: 100%;
    margin-inline: auto;
    padding: 5% 7%;
    background-color: hsl(from var(--project-card-color) h s calc(l - 10));
    border: .15vmax solid hsl(from var(--project-card-color) h calc(s + 20) calc(l - 30));
    border-radius: 4vmax;
    font-weight: bold;
    letter-spacing: 8%;
    color: hsl(from var(--project-card-color) h calc(s - 10) calc(l + 25));
    text-align: center;
    text-wrap: nowrap;
    transition:
        background-color .3s ease-out,
        scale .2s;

    &:hover, &:focus-visible {
        background-color: var(--project-card-color);
        color: hsl(from var(--project-card-color) h calc(s - 10) calc(l + 35));
        filter: drop-shadow(0 0 .3vmax hsl(from var(--project-card-color) h calc(s + 10) calc(l + 20)));
    }
    
    &:active {
        background-color: hsl(from var(--project-card-color) h calc(s + 20) calc(l - 30));
        scale: .95;
    }
    
    &:focus-visible {
        outline:  solid .15vmax hsl(from var(--project-card-color) h calc(s - 10) calc(l + 35));
        outline-offset: .1vmax;
    }
}

.projects-card-links li:nth-child(2) a {
    background-color: hsl(from var(--project-card-color) h calc(s - 10) calc(l + 15));
    color: hsl(from var(--project-card-color) h calc(s + 20) calc(l - 30)); 
    
    &:hover, &:focus-visible {
        background-color: hsl(from var(--project-card-color) h calc(s + 10) calc(l + 20));
    }
    
    &:active {
        background-color: hsl(from var(--project-card-color) h calc(s + 5) calc(l + 5));
    }
}


/* MAIN PROJECTS STYLE */

#projects-item-main-1, #projects-item-main-2 {
    & .projects-card {
        width: 95%;
        margin-block: 1.5% 0;
    }

    & .projects-card-title {
        width: 90%;
        margin-top: 6%;
        padding-block: 1.5%;
    }

    & .projects-card-img-container {
        width: 90%;
        aspect-ratio: 2.02;
        margin: 3% 5% auto;
    }

    & .projects-card-techs {
        inset: 30% 4% 9%;
        row-gap: 2.5%;

        & li {
            min-width: 10%;
            padding: .45% 1% .45% 2%;

            &:nth-child(n + 4) {
                padding: .45% 2% .45% 1%;
            }
        }
    }

    & .projects-card-description {
        inset: 8% 3.5% auto;
    }

    & .projects-card-links {
        flex-direction: row;
        width: 90%;
        margin: 3% auto;

        & a {
            width: 85%;
        }
    }
}

#projects-item-main-1 {
    grid-area: 1/2/span 1/span 2;
}

#projects-item-main-2 {
    grid-area: 3/1/span 1/span 2;
}

/****************************************
                CONTACT
*****************************************/

.contact-content-wrapper {
    --contact-form-color: hsl(from var(--main-text-color) h s calc(l + 15));
    position: absolute;
    inset: 16% 12% 5% 12%;
    font: 16px var(--font-sans);
    color: var(--contact-form-color);
}

@supports (font-size: 1cqw) {
    .contact-content-wrapper {
        container-type: inline-size;

        & > * {
            font-size: 3.05cqw;
        }
    }
}

.contact-content-wrapper h2, 
.contact-fake-text {
    color: hsl(from var(--main-text-color) h s l / 40%);
    filter: blur(.05vmax);
}

.contact-fake-text > div {
    font-size: 85%;
    text-align: justify;
    line-height: 1.3;
    margin-bottom: 1.5%;
}

.contact-content-wrapper h2 {
    font-size: 180%;
    text-align: center;
    letter-spacing: 15%;
    text-decoration: underline solid 7% currentColor;
    text-transform: uppercase;
    margin-bottom: 2%;
}

/* CONTACT FORM */

.contact-form-container {
    height: 28%;
    padding: 2.5% 1.5% 3.3%;
    margin: 3% 2%;
    border: .2vmax solid var(--contact-form-color);
    border-radius: .2vmax;
    background-color: hsl(from var(--contact-form-color) h s l / 25%);
}

.contact-form-container form {
    display: grid;
    justify-items: center;
    height: 85%;
    margin-bottom: 2%;
    gap: 5% 1.5%;
    grid-template: 
        "name email" 1fr
        "message message" 3fr
        "submit submit" 1fr / 35% auto;
}

.contact-form-container :is(input, textarea, button) {
    display: block;
    width: 100%;
    padding: .2vmax .3vmax;
    background-color: hsl(from var(--contact-form-color) h s calc(l + 60) / 40%);
    color: inherit;
    border: .15vmax solid var(--contact-form-color);
    border-radius: .2vmax;
}
    
.contact-form-container label {
    position: absolute;
    font-size: 80%;
    background-color: var(--contact-form-color);
    color: hsl(from var(--contact-form-color) h s calc(l + 60));
    letter-spacing: 20%;
    padding: .1vmax .5vmax;
    border-radius: .2vmax;
    top: -35%;
    right: .5vmax;
}

.contact-form-container form div {
    width: 100%;
    position: relative;
    &:has(input[name="name"]) {
        grid-area: name;
    }
    &:has(input[name="email"]) {
        grid-area: email;
    }
}

.contact-form-container textarea {
    display: block;
    height: 100%;
    width: 100%;
    scrollbar-color: var(--contact-form-color) transparent;
    scrollbar-width: thin;
    max-width: 100%;
    resize: none;
    grid-area: message;
}

.contact-form-container :is(input, textarea)::placeholder {
    color: hsl(from var(--contact-form-color) h calc(s - 15) calc(l + 30));
    font-style: italic;
}

.contact-form-container button {
    display: block;
    width: 60%;
    background-color: var(--contact-form-color);
    color: hsl(from var(--contact-form-color) h s calc(l + 60));
    letter-spacing: 20%;
    cursor: pointer;
    grid-area: submit;
}

.contact-form-container a {
    display: flex;
    align-items: center;
    padding-inline: .5%;
    column-gap: 1%;
    height: 15%;
    font-style: italic;
    border-radius: .2vmax;
}

.contact-mail-icon {
    height: 100%;
    aspect-ratio: 1.1;
    background-size: 200% 200%;
    background-image: url(../src/sprites/socialmedia_sprite_alt.png);
    background-image: url(../src/sprites/socialmedia_sprite_small.webp);
    background-position: 100% 100%;
    filter: invert(14%) sepia(13%) saturate(1639%) hue-rotate(325deg) brightness(96%) contrast(83%); /* Converted with https://codepen.io/sosuke/pen/Pjoqqp */ 
}

/* FORM TRANSITIONS */

.contact-form-container :is(input, textarea) {
    transition:
        background-color .3s ease-out;

    &:hover, &:focus-visible {
        background-color:  hsl(from var(--contact-form-color) h s calc(l + 80) / 40%);
    }

    &:focus-visible {
        outline: #D4C079CC solid .1vmax;
    }
}

.contact-form-container button {
    transition:
        background-color .2s ease-out;

    &:hover, &:focus-visible {
        background-color: hsl(from var(--contact-form-color) h calc(s - 10) calc(l + 20));
    }

    &:active {
        background-color: hsl(from var(--contact-form-color) h calc(s + 10) calc(l - 10));
    }

    &:focus-visible {
        outline: #D4C079 solid .15vmax;
        outline-offset: .1vmax;
    }
}

.contact-form-container a {
    transition:
        background-color .2s ease-out;

    &:hover, &:focus-visible {
        background-color:  hsl(from var(--contact-form-color) h s calc(l + 60) / 40%);
        color: hsl(from var(--contact-form-color) h calc(s - 10) calc(l + 15));

        & .contact-mail-icon {
            filter: invert(34%) sepia(18%) saturate(461%) hue-rotate(317deg) brightness(92%) contrast(87%); /* Converted with https://codepen.io/sosuke/pen/Pjoqqp */
        }
    }

    &:active {
        background-color: hsl(from var(--contact-form-color) h calc(s - 10) calc(l + 20) / 40%);
        color: hsl(from var(--contact-form-color) h calc(s - 10) calc(l + 15));

        & .contact-mail-icon {
            filter: invert(34%) sepia(18%) saturate(461%) hue-rotate(317deg) brightness(92%) contrast(87%); /* Converted with https://codepen.io/sosuke/pen/Pjoqqp */
        }
    }

    &:focus-visible {
        outline: #D4C079 solid .15vmax;
        outline-offset: 0;
    }
}

/****************************************
         SECTION MOBILE LAYOUTS
*****************************************/

@media (orientation: portrait) and (max-width: 1200px) {
    .about-me-content-wrapper,
    .skills-content-wrapper,
    .projects-content-wrapper,
    .contact-content-wrapper {
        overflow-y: auto;
        width: 100vw;
        height: 105vh;
        inset: 0;
        box-sizing: border-box;
        margin: auto;
        padding: 20vh 5vw 25vh 5vw;
        scrollbar-width: none;

        & > * {
            font-size: clamp(1.15rem, 5vw, 4rem);
        }
    }

    /* ABOUT ME MOBILE LAYOUT */

    .about-me-content-wrapper header {
        margin-bottom: 5%;
    }

    .about-me-content-wrapper h2 {
        font-size: 300%;
    }

    .about-me-timeline ul {
        column-gap: 4%;

        &::before {
            width: 85%;
        }
    }

    .about-me-timeline li {
        padding-top: 3%;

        &::before {
            width: 1vmax;
            left: calc(50% - .5vmax);
            top: -2%;
        }
    }

    .about-me-timeline time {
        font-size: 95%;
    }

    .about-me-text h3 {
        margin-block: 15% 3%;
    }

    .about-me-text p {
        text-align: left;
        line-height: 1.5;
    }

    /* SKILLS MOBILE LAYOUT */

    .skills-content-wrapper header {
        position: static;

        & h2 {
            font-size: 300%;
            text-align: right;
            padding-right: 6%;
        }
    }

    .skills-group {
        position: relative;
        flex: 0 0 auto;
        padding-block: 8%;
        margin-block: 17%;
        border-block: .4vmax dashed #784E4877;

        & h3 {
            position: static;
            font-size: 160%;
            writing-mode: horizontal-tb;
        }
    }

    .skills-list {
        width: 100%;
        border-bottom: none;
        font-size: 95%;
        column-gap: 5%;

        & li {
            flex: 0 0 30%;
        }
    }

    .skills-group:first-of-type {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }

    .skills-description {
        position: absolute;
        inset: 103% 5% auto;
        letter-spacing: 10%;
        font-size: 85%;
    }

    .skills-description-container {
        display: none;
    }

    /* PROJECTS MOBILE LAYOUT */

    .projects-content-wrapper {
        padding-inline: 2vw;
    }

    .projects-content-wrapper > header {
        position: static;
        margin-bottom: 10%;

        & h2 {
            font: 180% var(--font-sans);
        }
    }
    
    .projects-list {
        height: 270%;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(5, 1fr);
    }

    .projects-list > li {
        aspect-ratio: .71;
        height: auto;
        padding: 5% 4% 3%;
    }

    .projects-cardsleeve {
        inset: 0;
        border-width: .3vmax;
        border-bottom-left-radius: .5vmax;
        border-bottom-right-radius: .5vmax;
    }

    .projects-card {
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 1.5vmax;
    }

    .projects-card-front,
    .projects-card-back {
        border-width: .3vmax;
        border-radius: 1.5vmax;

        &::before {
            border-width: .5vmax;
        }
    }

    .projects-card-title {
        font-size: 90%;
    }

    .projects-card-techs {
        top: 26.5%;
        bottom: 7.5%;
        font-size: 75%;

        & li {
            display: grid;
            align-content: center;
            border-width: .2vmax;
        }
    }

    .projects-card-description {
        font-size: 70%;
    }

    .projects-card-links a {
        border-width: .3vmax;
    }

    #projects-item-main-1, 
    #projects-item-main-2 {
        aspect-ratio: 1.45;
        padding: 2.5% 2% 1.5%;

        & .projects-card {
            width: 100%;
            margin: 0;
        }
        & .projects-card-techs {
            top: 31%;
            bottom: 8.5%;
        }
    }

    #projects-item-main-1 {
        grid-area: 2/1/span 1/span 2;
    }

    #projects-item-main-2 {
        grid-area: 3/1/span 1/span 2;
    }

    /* CONTACT MOBILE LAYOUT */

    .contact-content-wrapper {
        top: 15vh;
    }

    .contact-content-wrapper h2 {
        font-size: 180%;
        margin-bottom: 6%;
    }

    .contact-content-wrapper h2,
    .contact-fake-text {
        filter: blur(.08vmax);
    }

    .contact-fake-text > div {
        font-size: 70%;
        margin-bottom: 2%;
        line-height: 1.4;
    }

    .contact-fake-text > div:nth-child(2) {
        display: none;
    }

    .contact-form-container {
        height: auto;
        padding: 3% 4% 2.5%;
        margin: 10% 4%;
        border-width: .4vmax;
        border-radius: .4vmax;
    }

    .contact-form-container form {
        margin-bottom: 6%;
        gap: 4% 0;
        grid-template:
            "name" 1fr
            "email" 1fr
            "message" 3fr
            "submit" 1fr / auto;
    }

    .contact-form-container :is(input, textarea, button) {
        padding: .8vmax;
        border-width: .25vmax;
        border-radius: .4vmax;
    }

    .contact-form-container input {
        margin-top: 2%;
    }

    .contact-form-container label {
        padding-inline: .8vmax;
        top: -8%;
        right: 1.5vmax;
    }

    .contact-form-container a {
        font-size: 80%;
        height: 4.5vmax;
        column-gap: 2%;
        padding-right: 2%;
    }
}

/****************************************
                FOOTER
*****************************************/

footer {
    position: fixed;
    inset: 0 0 10% 80%;
    font: bold 25px var(--font-handwritten);
    color: var(--contact-form-color);
    z-index: 30;
}

@supports (font-size: 1cqw) {
    footer {
        container-type: inline-size;

        & > * {
            font-size: 8cqw;
        }
    }
}

.socialmedia-list {
    display: flex;
    flex-flow: column nowrap;
    row-gap: 10%;
    justify-content: center;
    height: 100%;
}

.socialmedia-list li {   
    &:nth-child(2) a {
        border-radius: 1.8vmax;

        & .socialmedia-icon {
            border-radius: 1.8vmax;
        }
    }
}

.socialmedia-list a {
    display: block;
    position: relative;
    height: 20vh;
    aspect-ratio: 1;
    margin: auto;
    border-radius: 50%;
    background-color: var(--light-ui-color);
    filter: drop-shadow(0 0 .3vmax #130D0C);
}

.socialmedia-icon {
    position: absolute;
    inset: -1%;
    margin: auto;
    border-radius: 50%;
    background-size: 200% 200%;
    background-image: url(../src/sprites/socialmedia_sprite_alt.png);
    background-image:
        image-set(
            url(../src/sprites/socialmedia_sprite_medium.webp) 1x,
            url(../src/sprites/socialmedia_sprite_large.webp) 2x
        );
    filter: invert(10%) sepia(13%) saturate(1818%) hue-rotate(343deg) brightness(92%) contrast(83%); /* Converted with https://codepen.io/sosuke/pen/Pjoqqp */
}

@media (max-width: 1200px) {
    .socialmedia-icon {
        background-image:         
            image-set(
                url(../src/sprites/socialmedia_sprite_small.webp) 1x,
                url(../src/sprites/socialmedia_sprite_medium.webp) 2x
            );
    }
}

.socialmedia-icon-1 {
    background-position: 0 0;
}

.socialmedia-icon-2 {
    background-position: 100% 0;
}

.socialmedia-icon-3 {
    background-position: 0 100%;
}

/* TOOLTIPS */

.socialmedia-list p {
    visibility: hidden;
    position: absolute;
    inset: 100% -20% auto;
    width: min-content;
    height: min-content;
    padding: 1% 5%;
    margin-top: 5%;
    margin-inline: auto;
    border: .15vmax solid var(--light-ui-color);
    border-radius: .7vmax;
    background-color: var(--dark-ui-color);
    color: var(--light-ui-color);
    text-wrap: nowrap;
    letter-spacing: 10%;
    z-index: 100;
    user-select: none;
} 

.socialmedia-list a:hover p {
    visibility: visible;
}

.socialmedia-list a:focus-visible p {
    visibility: visible;
    margin-top: 8%;
}

/* TRANSITIONS */

.socialmedia-list a {
    transition:
        background-color .5s,
        filter .2s ease-in-out;
    
    &:hover, &:focus-visible {
        background-color: hsl(from var(--light-ui-color) h s calc(l + 10));
        filter: drop-shadow(0 0 .3vmax #DFCEAC);
    }
    
    &:active {
        background-color: hsl(from var(--light-ui-color) h calc(s - 10) calc(l - 20));
    }
    
    &:focus-visible {
        outline: #C4AA76 solid .2vmax;
        outline-offset: .4vmax;
    }
}

/* SCROLL ANIMATION */

.socialmedia-list li:first-child {
    animation: 1ms linear both scroll-grow-socialmedia-icon-1; /* 'animation-duration: 1ms' is a Firefox requirement (MDN) */
    animation-timeline: scroll();
}

.socialmedia-list li:nth-child(2) {
    animation: 1ms linear both scroll-grow-socialmedia-icon-2; /* 'animation-duration: 1ms' is a Firefox requirement (MDN) */
    animation-timeline: scroll();
}

.socialmedia-list li:last-child {
    animation: 1ms linear both scroll-grow-socialmedia-icon-3; /* 'animation-duration: 1ms' is a Firefox requirement (MDN) */
    animation-timeline: scroll();
}

@keyframes scroll-grow-socialmedia-icon-1 {
    5%, 65% { scale: 1; }
    30%, 40% { scale: 1.07; }
}

@keyframes scroll-grow-socialmedia-icon-2 {
    22.5%, 82.5% { scale: 1; }
    47.5%, 57.5% { scale: 1.07; }
}

@keyframes scroll-grow-socialmedia-icon-3 {
    40%, 100% { scale: 1; }
    65%, 75% { scale: 1.07; }
}

/* FOOTER MEDIA QUERIES */

@media (orientation: portrait) and (max-width: 1200px), (orientation: landscape) and (max-width: 1500px) {
    footer {
        position: absolute;
        inset: 87% 0 0;
    }

    @supports (font-size: 1cqw) {
        footer > * {
            font-size: 4cqw;
        }
    }

    .socialmedia-list {
        flex-flow: row nowrap;
        column-gap: 2%;
    }

    .socialmedia-list li {   
        &:nth-child(2) a {
            transform: translateY(-8%);
        }
    }

    .socialmedia-list a {
        width: 20vw;
        height: auto;
    }

    .socialmedia-list p {
        visibility: visible;
    }

    @keyframes scroll-grow-socialmedia-icon-1 {
        0%, 80% { transform: translate(0, 0); scale: .8; opacity: 0; }
        100% { transform: translate(-40%, -50%); scale: 1; opacity: 1; }
    }

    @keyframes scroll-grow-socialmedia-icon-2 {
        0%, 80% { transform: translateY(0); scale: .8; opacity: 0; }
        100% { transform: translateY(-50%); scale: 1; opacity: 1; }
    }

    @keyframes scroll-grow-socialmedia-icon-3 {
        0%, 80% { transform: translate(0, 0); scale: .8; opacity: 0; }
        100% { transform: translate(40%, -50%); scale: 1; opacity: 1; }
    }
}

@media (orientation: portrait) and (max-width: 1200px) {
    footer {
        transform: translateY(-20%)
    }
}

@media (orientation: landscape) and (max-width: 1500px) {
    footer {
        left: 30vw;
        width: 50vw;
        max-width: 80rem;
        margin: 0 auto;
    }

    .socialmedia-list a {
        width: 12vw;
    }
}