/* Force no animations or transitions in finished state - for testing purposes */
    /* * {
        animation-duration: 0s !important;
        animation-delay: 0s !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    } */

    /* Disable all animations and transitions - for testing purposes*/
    /* *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    } */

    .animations-disabled * {
        animation-duration: 0s !important;
        animation-delay: 0s !important;
    }

/* #region ========== CSS RESET ========== */

    /* Box sizing rules */
    *,
    *::before,
    *::after {
    box-sizing: border-box;
    }

    /* Prevent font size inflation */
    html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    }

    /* Remove default margin in favour of better control in authored CSS */
    body, h1, h2, h3, h4, p,
    figure, blockquote, dl, dd {
    margin-block-end: 0;
    }

    /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
    ul[role='list'],
    ol[role='list'] {
    list-style: none;
    }

    /* Set core body defaults */
    body {
    min-height: 100vh;
    line-height: 1.5;
    }

    /* Set shorter line heights on headings and interactive elements */
    h1, h2, h3, h4,
    button, input, label {
    line-height: 1.1;
    }

    /* Balance text wrapping on headings */

    /* A elements that don't have a class get default styles */
    a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
    }

    /* Make images easier to work with */
    img,
    picture {
    max-width: 100%;
    display: block;
    }

    /* Inherit fonts for inputs and buttons */
    input, button,
    textarea, select {
    font-family: inherit;
    font-size: inherit;
    }

    /* Make sure textareas without a rows attribute are not tiny */
    textarea:not([rows]) {
    min-height: 10em;
    }

    /* Anything that has been anchored to should have extra scroll margin */
    :target {
    scroll-margin-block: 5ex;
    }

/* #endregion */

/* #region ========== VARIABLES ========== */
    :root{

        --main-font:'Fira Sans', sans-serif;
        --headline-font:'Fira Sans', sans-serif;

        --background-img: url(images/background.png);
        --background-color: #e7dfdc;
        --main-color: #2D2D2D;
        --accent-color-1: #EC3A04;
        --accent-color-2: #188D82;
        --accent-color-3: #337F22;
        --footer-focus-color: #195115;
        --focus-color: var(--accent-color-3);

        --curtain-center-distance: 5em;

        --animation-speed-curtain: .9s;
        --delay-curtain: 2s;

        --animation-speed-rotation: .9s;
        --delay-rotation: calc(var(--delay-curtain) + var(--animation-speed-curtain) + 0.5s);
        --animation-function-rotate: ease-in-out;

        --animation-speed-typewriter: .12s;
        --delay-typewriter: calc(var(--delay-rotation) + var(--animation-speed-rotation) + 0.5s);
        --caret: 2px solid;

        --animation-speed-skills: 0.2s;
        --animation-function-skills: ease-out;
        --delay-skills: calc(var(--delay-typewriter) + 30 * var(--animation-speed-typewriter));

        --delay-hobbies: calc(var(--delay-skills) + 8 * var(--animation-speed-skills));

        --delay-about-me: 0.3s;
    }


    :root[data-theme="dark"] {
        --background-img: url(images/background-night.png);
        --background-color: #0a0a0a;
        --main-color: #eeeeee;
        --accent-color-1: #FF5F1F;
        --accent-color-2: #1BF0D7;
        --accent-color-3: #39FF3F;
        --focus-color: var(--accent-color-3);
        --footer-focus-color: var(--accent-color-3);
    }

    
/* #endregion */




/* ==================================================

   *****                 BODY                   *****

   ================================================== */
/* #region BODY */

    html {
        font-size: clamp(.2rem, 0.5rem + 0.5vw, 2rem);
    }

    html, body {
    height: 100%;
    margin: 0;
    }

    body{
        background-color: var(--background-color);
        font-family: var(--main-font);
        color: var(--main-color);
        display: grid;
        
        background-image: var(--background-img);
        background-size: 70%;

        background-position: center top; 
        background-repeat:repeat;
    }

    :focus{
        outline: none;
    }

    :focus-visible{
        outline: 2px solid var(--focus-color);
        outline-offset: 2px;
    }

    footer :focus-visible{
        outline-color: var(--footer-focus-color);
    }

    .accent-color-1{
        color: var(--accent-color-1);
    }

    .accent-color-2{
        color: var(--accent-color-2);
    }

    .accent-color-3{
        color: var(--accent-color-3);
    }

    a{
        text-decoration: none;
    }

    h1{
        grid-row: 1;
        grid-column: 1;
        justify-self: center;
        font-size: 3em;
    }



    /* #region ========  THEME-TOGGLE  ======== */

        div.theme-toggle{
            position: fixed;
            left: 2em;
            z-index: 99;
        }

        .theme-toggle label{
            width: 3em;
            height: 3em;
            border-radius: 3em;
            border: var(--accent-color-1) 2px solid;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--background-color);
            cursor: pointer;
            transition: 0.3s;
        }

        .theme-toggle input:checked + label{
            border-color: var(--accent-color-2);
        }


        .theme-toggle label:hover{
            transform: scale(1.1);
        }

        .theme-toggle input {
            width: 0; height: 0;
            visibility: hidden;
        }

        .theme-toggle label svg{
            width: 70%;
            height: 70%;
            z-index: 100;
        }

        .theme-toggle label svg.sun{
            fill: transparent;
            stroke: var(--accent-color-1);
            transition: 0.3s;
        }

        .theme-toggle label svg.moon{
            display: none;
            transition: 0.3s;
        }

        .theme-toggle input:checked + label svg.sun{
            display: none;
        }

        .theme-toggle input:checked + label svg.moon{
            display: block;
            fill: var(--accent-color-2);
        }

    /* #endregion THEME-TOGGLE */

/* #endregion BODY*/




/* ==================================================

   *****                 MAIN                   *****

   ================================================== */
/* #region MAIN*/

    main{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: 
            "cloud nav"
            "cloud img";
        margin-bottom: auto;
        margin-top: 2em;
    }


    /* #region ========== NAVIGATION ========== */

        nav{
            grid-area: nav;
            display: flex;
            transform: translateX(calc(-1 * var(--curtain-center-distance)));
            width: 100%;
            justify-content: center;
            gap: .9em;

            position: relative;
            z-index: 2;
        }

        nav a{
            color: var(--main-color);
            font-size: 1em;
        }

        nav a:hover,
        nav a:focus-within{
            color: var(--accent-color-1);
            font-weight: bolder;
        }

        .skip-link {
            position: absolute;
            left: 8em;
            top: -4em;
            z-index: 99;
            color: var(--main-color);
        }

        a.skip-link:focus-within {
            top: 2em; 
            color: var(--accent-color-1);
            font-weight: bolder;
        }
        
    /* #endregion NAVIGATION */

    .my-photo{
        grid-area: img;
        display: flex;
        width: 20em;
        height: 20em;
        margin: auto;
        place-items: center;
        transform: translateX(calc(-1 * var(--curtain-center-distance)));

        animation: 
            curtain-photo var(--animation-speed-curtain) var(--delay-curtain) backwards,
            element-appear var(--animation-speed-curtain) var(--delay-curtain) backwards;
    }

    .index img{
        filter: grayscale(100%);
    }

    .word-cloud{
        grid-area: cloud;

        display: grid;   
        grid-template-columns: auto auto;
        grid-template-rows: repeat(4, auto);
        grid-template-areas:
            "skills hello"
            "name name"
            "occup occup"
            "hobbies-2 hobbies-1";

        width: fit-content;     
        height: fit-content;    

        margin: 2em;

        gap: 0;

        transform: translateX(var(--curtain-center-distance)) rotate(-45deg);
        font-size: 1.2rem;
        
        animation: curtain-cloud var(--animation-speed-curtain) var(--delay-curtain) backwards;
    }

    @keyframes curtain-cloud {
        from { transform:  translate(25vw, 0) rotate(-45deg); }
        to { transform:  translate(var(--curtain-center-distance), 0) rotate(-45deg); }
    }

    @keyframes curtain-photo {
        from { transform: translate(-25vw, 0); }
    }

    @keyframes element-appear{
        from{ opacity: 0; }
    }

/* #endregion MAIN*/




/* ==================================================

   *****          WORD CLOUD CONTENT            *****

   ================================================== */
/* #region WORD CLOUD CONTENT */


    /* #region ========  INTRODUCTION  ======== */

        .hello{
            grid-area: hello;
            display: inline-block;
            width: fit-content;
            height: fit-content;
            margin: 0;

            transform: rotate(90deg) translate(80%, 20%);
            transform-origin: bottom right;

            font-size: 2.4em;

            animation: rotate-hello var(--animation-speed-rotation) var(--delay-rotation) var(--animation-function-rotate) backwards;
        }

        @keyframes rotate-hello{
            from{
                transform-origin: 100% 84%;
                transform: rotate(45deg) translate(57%, 110%);
            }
        }
        
        .my-name{
            display: block;
            grid-area: name;
            width: fit-content;
            height: fit-content;
            margin: 0;

            font-weight: bold;
            font-size: 4em;
            line-height: 1em; 

            animation: rotate-name var(--animation-speed-rotation) var(--delay-rotation) var(--animation-function-rotate) backwards;
        }
        
        @keyframes rotate-name{
            from{
                transform: rotate(45deg) translate(0%, 0%);
                transform-origin: 60% 0%;
            }
        }

        .my-name span{
            display: block;
            overflow: hidden;
            white-space: nowrap;      
        }

        .my-name span:nth-child(2){
            padding-left: 3.5ch;
        }

    /* #endregion */



    /* #region ========   OCCUPATION   ======== */

        .occupation{
            grid-area: occup;
            width: 23ch;
            height: fit-content;
            justify-self: end;
            align-self: end;
            margin: 0;

            transform: translate(8%, 0);

            font-weight: bold;
            font-size: 2em;
            line-height: 1em;
            font-family: 'Fira Mono', monospace;
        }    

        .occupation span.line-1{

            display: block;
            overflow: hidden;
            white-space: nowrap;
            animation: 
                typing-line-1 calc(23 * var(--animation-speed-typewriter))  steps(23) var(--delay-typewriter) backwards,
                caret-line-1 calc(23 * var(--animation-speed-typewriter))  steps(23) var(--delay-typewriter) backwards;
        }

        .occupation span.line-2{

            display: inline-block;
            padding-right: 0;
            overflow: hidden;
            white-space: nowrap;
            padding-left: 8ch;
            animation: 
                typing-line-2 calc(7 * var(--animation-speed-typewriter)) steps(7) calc(23 * var(--animation-speed-typewriter) + var(--delay-typewriter)) backwards,
                caret-line-2 calc(7 * var(--animation-speed-typewriter)) steps(7) calc(23 * var(--animation-speed-typewriter) + var(--delay-typewriter)) backwards,
                blinking-caret calc(7 * var(--animation-speed-typewriter)) steps(1, start) calc(30 * var(--animation-speed-typewriter) + var(--delay-typewriter)) infinite;
        }

        @keyframes typing-line-1 { from { width: 0ch } to { width: 23ch } }
        @keyframes caret-line-1 {
            0% {border-right: var(--caret) transparent;}
            1% {border-right: var(--caret) var(--main-color);}
            13% {border-right: var(--caret) var(--accent-color-1);}
            100% {border-right: var(--caret) var(--accent-color-1);}
        }

        @keyframes typing-line-2 { from { width: 8ch } to { width: 15ch } }
        @keyframes caret-line-2 {
            0% {border-right: var(--caret) transparent;}
            1% {border-right: var(--caret) var(--main-color);}
            100% {border-right: var(--caret) var(--main-color);}
        }

        @keyframes blinking-caret {
            50% {border-right: var(--caret) var(--main-color);}
        }

        @media (prefers-reduced-motion: reduce) {
            .typewriter { animation: none; border-right: none }
        }

    /* #endregion OCCUPATION*/



    /* #region ========     SKILLS     ======== */

        .skills{
            grid-area: skills;
            display: grid;
            width: fit-content;
            height: fit-content;

            font-size: 1.3em;
            line-height: 1em;
            
            transform: rotate(90deg) translate(-20%, -5%);
            transform-origin: bottom right;

            margin: 0;
        }

        .skills span {
            opacity: 0;
        }    

        .skills span:nth-child(1) { 
            transform: translateX(2em);
            animation-name: skills-down, skills-appear;
            animation-duration: calc(1 * var(--animation-speed-skills));
            animation-delay: var(--delay-skills);        
            animation-fill-mode: forwards;
        }

        .skills span:nth-child(2) { 
            animation-name: skills-appear;
            animation-duration: calc(1 * var(--animation-speed-skills));  
            animation-delay: 
                calc(var(--delay-skills) + 6 * var(--animation-speed-skills));              
            animation-fill-mode: forwards;
        }

        .skills span:nth-child(2) { 
            transform: translateY(-1em);
            animation-name: skills-down, skills-appear;
            animation-duration: calc(2 * var(--animation-speed-skills)), calc(1 * var(--animation-speed-skills));
            animation-delay: 
                calc(var(--delay-skills) + 6 * var(--animation-speed-skills)), 
                calc(var(--delay-skills) + 6 * var(--animation-speed-skills));
            animation-fill-mode: forwards, forwards;
            animation-timing-function: var(--animation-function-skills);    
        }

        .skills span:nth-child(3) { 
            transform: translateY(-2em);
            animation-name: skills-down, skills-appear;
            animation-duration: calc(3 * var(--animation-speed-skills)), calc(1 * var(--animation-speed-skills));
            animation-delay: 
                calc(var(--delay-skills) + 5 * var(--animation-speed-skills)), 
                calc(var(--delay-skills) + 5 * var(--animation-speed-skills));
            animation-fill-mode: forwards, forwards;
            animation-timing-function: var(--animation-function-skills);    
        }

        .skills span:nth-child(4) { 
            transform: translateY(-3em);
            animation-name: skills-down, skills-appear;
            animation-duration: calc(4 * var(--animation-speed-skills)), calc(1 * var(--animation-speed-skills));
            animation-delay: 
                calc(var(--delay-skills) + 4 * var(--animation-speed-skills)), 
                calc(var(--delay-skills) + 4 * var(--animation-speed-skills));
            animation-fill-mode: forwards, forwards;
            animation-timing-function: var(--animation-function-skills)    
        }

        .skills span:nth-child(5) { 
            transform: translateY(-4em);
            animation-name: skills-down, skills-appear;
            animation-duration: calc(5 * var(--animation-speed-skills)), calc(1 * var(--animation-speed-skills));
            animation-delay: 
                calc(var(--delay-skills) + 3 * var(--animation-speed-skills)), 
                calc(var(--delay-skills) + 3 * var(--animation-speed-skills));
            animation-fill-mode: forwards, forwards; 
            animation-timing-function: var(--animation-function-skills)
        }
        
        .skills span:nth-child(6) { 
            transform: translateY(-5em);
            animation-name: skills-down, skills-appear;
            animation-duration: calc(6 * var(--animation-speed-skills)), calc(1 * var(--animation-speed-skills));
            animation-delay: 
                calc(var(--delay-skills) + 2 * var(--animation-speed-skills)), 
                calc(var(--delay-skills) + 2 * var(--animation-speed-skills));
            animation-fill-mode: forwards, forwards;
            animation-timing-function: var(--animation-function-skills)    
        }

        .skills span:nth-child(7) { 
            transform: translateY(-6em);
            animation-name: skills-down, skills-appear;
            animation-duration: calc(7 * var(--animation-speed-skills)), calc(1 * var(--animation-speed-skills));
            animation-delay: 
                calc(var(--delay-skills) + 1 * var(--animation-speed-skills)), 
                calc(var(--delay-skills) + 1 * var(--animation-speed-skills));
            animation-fill-mode: forwards, forwards;
            animation-timing-function: var(--animation-function-skills)    
        }
        @keyframes skills-down {
            to { transform: translateY(0) translateX(0); }
        }
        @keyframes skills-appear {
            to { opacity: 1; }
        }

    /* #endregion SKILLS*/



    /* #region ========    HOBBIES     ======== */
        .hobbies-1{
            grid-area: hobbies-1;
            transform: rotate(90deg);
            display: inline-block;
            width: fit-content;
            height: fit-content;
            margin: 0 0;     

            font-size: 1em;
            line-height: 1em;

            opacity: 0;
            transform: rotate(90deg) translate(-100%, 150%); 
            transform-origin: top left;
            animation: hobbies-1-slide 1.5s forwards;
            animation-delay: var(--delay-hobbies);
        }

        @keyframes hobbies-1-slide {
            to {
                transform: rotate(90deg) translate(0%, 150%);  
                opacity: 1;                  
            }
        }    

        .hobbies-2{

            grid-area: hobbies-2;
            transform: rotate(90deg);
            display: inline-block;
            width: fit-content;
            height: fit-content;
            margin: 0 0;

            font-size: 1em;
            line-height: 1em;

            opacity: 0;
            transform: rotate(90deg) translate(-180%, -200%);
            transform-origin: top left;  
            
            animation: hobbies-2-slide 1.5s forwards;
            animation-delay: var(--delay-hobbies);

        }

        @keyframes hobbies-2-slide {
            to {
                transform: rotate(90deg) translate(-80%, -200%); 
                opacity: 1;                  
            }
        }

    /* #endregion HOBBIES*/


/* #endregion WORD CLOUD CONTENT */




/* ==================================================

   *****                FOOTER                  *****

   ================================================== */
/* #region  FOOTER  */
    footer{
        display: grid;
        grid-template-columns: 0.5fr 1fr 0.5fr;

        margin-top: auto;
        margin-bottom: 0;
        gap: 0.3em;
        width: 100%;
        height: 5em;
        background-color: #2d2d2d69;    
    }

    .social {
        display: flex;
        width: fit-content;
        gap: 1.5em;

        grid-column: 2;
        margin: auto;
    }

    footer svg{
        display: block;
        fill: var(--main-color);
        width: 2em;
        transition: transform 0.2s, fill 0.2s;
    }

    footer svg:hover{
        fill: var(--accent-color-2);
        transform: scale(1.2);
    }

    p.copyright{
        font-size: 0.8em;
        grid-column: 3;
        margin: auto 1.5em 0.4em auto;
    }
/* #endregion FOOTER */




/* ==================================================

   *****            ABOUT ME PAGE               *****

   ================================================== */
/* #region ABOUT ME PAGE */

    h1.about-me{
        text-shadow: 2px 2px 2px rgb(from var( --accent-color-1) r g b / 0.6);
    } 

    .my-photo.about-me{
        grid-row: 2;
        grid-column: 1;
        transform: translateX(var(--curtain-center-distance));
        animation: 
            curtain-cloud-about var(--animation-speed-curtain) var(--delay-about-me) backwards,
            appear-about var(--animation-speed-curtain) var(--delay-about-me) backwards;
    }
    @keyframes curtain-cloud-about {
        from { transform:  translate(25vw, 0);}
        to { transform:  translate(var(--curtain-center-distance));}
    }

    .text.about-me{
        grid-row: 2;
        grid-column: 2;
        padding: 8em;
        transform: translateX(calc(-1 * var(--curtain-center-distance)));
        animation: 
            curtain-photo-about var(--animation-speed-curtain) var(--delay-about-me) backwards,
            appear-about var(--animation-speed-curtain) var(--delay-about-me) backwards;
    }

    .about-me p{
        margin-top: 0.6em;
    }

    @keyframes curtain-photo-about {
        from { transform:  translateX(-25vw);}
        to { transform:  translate(calc(-1 * var(--curtain-center-distance)));}
    }

    @keyframes appear-about{
        from{opacity: 0;}
        to{opacity: 1;}
    }

/* #endregion ABOUT ME */




/* ==================================================

   *****          HOBBIES & PROJECTS            *****

   ================================================== */
/* #region HOBBIES & PROJECTS */

    a.arrow-link{
        text-decoration:underline;
        color: var(--main-color);
    }

    a.arrow-link svg{
        width: 1.1em;
        height: 1.1em;
        vertical-align: middle;
        fill: var(--main-color);
        margin-left: 0.2em;
    }

    a.arrow-link::after{
        content: "↗";
        font-size: 1em;
    }

    a.arrow-link:hover,
    a.arrow-link:focus{
        color: var(--accent-color-1);
    }

    a.arrow-link:hover svg,
    a.arrow-link:focus svg{
        fill: var(--accent-color-1);
    }


    div.my-hobbies,
    div.my-projects{
        grid-row: 2;
        grid-column: 1 / -1;
        display: grid;
        grid-auto-rows: auto;
        align-items: center;
        justify-content: center;
        margin-top: 5em;
        margin-bottom: 5em;
        gap: 14em;
    }

    .hobby,
    .project{
        display: grid;
        grid-auto-rows: auto;
        gap: 3em;
        opacity: 0;
        transform: translateY(50px);
        transition: all 0.6s ease-out;
    }

    .hobby.show,
    .project.show {
        opacity: 1;
        transform: translateY(0);
    }

    .hobby p,
    .project p {
        width: 80ch;
        margin: auto;
    } 
    
    .hobby h2,
    .project h2 {
        width: 52ch;
        margin: auto;
    }
    
    .project-links{
        display: flex;
        justify-content: center;
        gap: 2em;
        margin-top: -1em;
        font-size: 1.2em;
    }
    
    .project.img,
    .hobby.img{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 1.5em;
        margin: 1em auto;
        max-width: 70%;
    }

    .project.img img,
    .hobby.img img{
        height: 10em;
        width: auto;
        border-radius: 1em;
        border: var(--main-color) 1px solid;
        filter: grayscale();
        transition: transform 0.2s;
    }

    .project.img img:hover,
    .project.img img:focus,
    .hobby.img img:hover,
    .hobby.img img:focus{
        transform: scale(1.1);
        filter: grayscale(0);
        cursor: pointer;
    }

    .separator{
        text-align: center;
        font-size: 1.5rem;
        margin: 0.5;
        letter-spacing: 0.5rem;
    }

    .project.separator {
        color: var(--accent-color-2);
    }

    .hobby.separator{
        color: var(--accent-color-3);
    }

    /* #region ========== LIGHTBOX ========== */
        .lightbox {
            display: none;
            position: fixed;
            z-index: 999;
            top: 0; left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.9);
            justify-content: center;
            align-items: center;
        }

        .lightbox-content {
            position: relative;
            display: inline-block;
        }

        .lightbox-img {
            max-width: 90vw;
            max-height: 80vh;
            display: block;
            border-radius: 0.5em;
        }

        .lightbox-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            text-align: center;
            padding: 0.5em 0;
            font-size: 1em;
            border-bottom-left-radius: 0.5em;
            border-bottom-right-radius: 0.5em;
            box-sizing: border-box;
        }

        .lightbox .close {
            position: absolute;
            top: 0px; right: 0px;
            color: white;
            font-size: 3em;
            width: 1.5em; height: 1.5em;
            text-align: center;
            cursor: pointer;
        }

        .lightbox .prev,
        .lightbox .next{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            color: white;
            font-size: 3em;
            width: 2em; height: 2em;
            text-shadow: 0 0 3px black;
            border: none;
            cursor: pointer;
            user-select: none;
        }

        .lightbox .prev {left: 20px;}
        .lightbox .next {right: 20px;}

        .lightbox .prev:hover,
        .lightbox .next:hover,
        .lightbox .close:hover{
            color: var(--accent-color-1);
        }
    /* #endregion LIGHTBOX */


    /* #region ========== MY HOBBIES ========== */

        h1.my-hobbies,
        .my-hobbies h2{
            text-shadow: 2px 2px 2px rgb(from var( --accent-color-3) r g b / 0.6);
        }

    /* #endregion MY HOBBIESE */

    /* #region ========== MY PROJECTS ========== */

        h1.my-projects,
        .my-projects h2,
        .project-name{
            text-shadow: 2px 2px 2px rgb(from var( --accent-color-2) r g b / 0.6);
        } 

        .project-name{
            font-size: 1em;
            margin: auto;
            font-weight: bold;
        }

    /* #endregion MY PROJECTS */

/* #endregion HOBBIES & PROJECTS */



/* ==================================================

   *****         @MEDIA SCREEN < 1100px         *****

   ================================================== */

@media(max-width: 1100px){

    :root {
        --delay-rotation: var(--delay-curtain);
    }

    main {
        grid-template-rows: 10em auto;
        grid-template-areas: 
            "img nav"
            "cloud cloud";
        gap: 0.5em;
        margin-bottom: 4em;        
    }

    .word-cloud{
        justify-self: center;
        transform:rotate(-45deg);

    }

    .my-photo{
        transform: none;
    }
    
    .my-photo img{
        width: 16em;
        height: 16em;
    }

    @keyframes curtain-cloud { }

    @keyframes curtain-photo { }

    @keyframes element-appear{
        from{ transform: translate(0, 0) scale(0.5); opacity: 0; }
    }

    .hobbies-1 span,
    .hobbies-2 span{
        opacity: 1;
    }

    /* ABOUT ME */

    main.about-me {
        grid-template-rows: 10em 10em auto;
        grid-template-areas: 
            "title nav"
            ". img"
            "text text";
        gap: 0.5em;
        margin-bottom: 4em;        
    }

    h1.about-me {
        grid-area: title;
    }

    .about-me nav {
        grid-area: nav;
    }

    .my-photo.about-me {
        grid-area: img;
        justify-self: center;
        transform: translateY(-40%);
    }

    @keyframes curtain-cloud-about {
        from { transform:  translateY(-40%) scale(0.7);}
        to { transform:  translateY(-40%) scale(1);}
    }

    .about-me.text {
        grid-area: text;
        font-size: 1.2em;
        padding: 2em 8em 2em 8em;
        transform: translateX(0);
    }

    @keyframes curtain-photo-about {
        from { transform:  translateX(0) scale(0.8);}
        to { transform:  translateX(0) scale(1);}
    } 
    
    /* Hobbies */

    .project.img,
    .hobby.img {
        margin: 0 3em 0 3em;
    }

    .project.img,
    .hobby.img{
        max-width: 100%;
        padding: 0 4em 0 4em;
    }

}




/* ==================================================

   *****         @MEDIA SCREEN < 600px          *****

   ================================================== */


@media(max-width: 600px){
    html {
        font-size: clamp(.4rem, 0.4rem + 0.5vw, 2rem);
    }

    main {
        display: flex;
        flex-direction: column;
        font-size: 1.2em;
    }

    div.theme-toggle{
        position: relative;
        left: 0;
        margin: 0 auto;
    }

    nav{
        order: 1;
        justify-content: center;
        transform: none;
        font-size: 1.3em;
        margin-top: 0em;        
    }

    .word-cloud{
        order: 3;
        justify-self: center;
        margin: auto;
        transform: none;
    }

    .my-photo{
        order: 2;        
        margin: auto;
        margin-top: 3em;
        transform: none;
    }

    @keyframes curtain-cloud {
        from { transform: translateY(-50%); }
        to { transform:  none }
    }

    @keyframes curtain-photo {
        from { transform: translateY(50%); }
    }

    @keyframes element-appear{
        from{ opacity: 0; }
    }

    .my-photo img{
        width: 20em;
        height: 20em;
    }

    .hello{
        transform:  translate(-40%, 80%);
    }

    @keyframes rotate-hello { }

    .my-name{
        transform: translate(0%, -20%);
    }

    @keyframes rotate-name { }

    .occupation{
        transform: translate(-8%, -20%);
    }

    .skills{
        opacity: 0;
    }

    @keyframes skills-down { }

    @keyframes skills-appear { }

    .hobbies-1 span,
    .hobbies-2 span{
        opacity: 0;
    }

    @keyframes hobbies-1-slide { }    

    @keyframes hobbies-2-slide { }

    footer{
        display: inline-grid;
        grid-template-columns: auto;
        grid-template-rows: auto auto;

        margin-top: auto;
        margin-bottom: 0;
        gap: 0;
        width: 100%;
        height: fit-content;  
    }

    .social {
        gap: 2.3em;
        grid-column: 1;
        grid-row: 1;
        margin: 3em auto 1em auto;
    }

    .social svg{
        width: 3.7em;
    }

    
    p.copyright{
        font-size: 1.2em;
        grid-column: 1;
        grid-row: 2;
        margin: 0.4em auto 0.4em auto;
    }

    /* ABOUT ME */

    h1 {
        order: 2;
        width: fit-content;
        margin: 1em auto 0 auto;
    }

    .my-photo.about-me {
        transform: translateY(0);
        order: 3;
    }

    @keyframes curtain-cloud-about {
        from { transform:  translateY(0) scale(0.7);}
        to { transform:  translateY(0) scale(1);}
    }

    .about-me.text {
        order: 4;
        padding: 2em 5em 2em 5em;
    }   
    
    /* Hobbies */

    div.my-hobbies,
    div.my-projects{
        order: 3;
    }

    .project p,
    .hobby p{
        font-size: 1.2em;
        margin: 0 3em 0 3em;
        width: fit-content;
    }
    .hobby h2,
    .project h2 {
        width: fit-content;
    } 

    .project.img,
    .hobby.img{
        padding: 0;
    }

    .project.img img,
    .hobby.img img{
        filter: grayscale(0);
    }
}