:root {
    --light-blue: oklch(0.7824 0.1159 240.83);
    --dark-blue: oklch(35.232% 0.07811 250.061);
   
    --light-yellow: oklch(0.8971 0.074 68.04);
    --dark-yellow: oklch(0.612305 0.14375 90);

    --light-orange: oklch(0.7882 0.1209 45.83);
    --dark-orange: oklch(0.626953 0.14375 20);

    --light-pink: oklch(0.8647 0.0666 8.93);
    --dark-pink: oklch(63.395% 0.12696 342.561);

    --light-green: oklch(0.8401 0.0526 152);
    --dark-green: oklch(52.147% 0.0902 180.803);

    --white: oklch(1 0 0);
    --black: oklch(0 0 0);

    --text-color: var(--black);
    --border-color: oklch(0 0 0);
    --focus-color: var(--black);
    --text-color-footer: var(--black);
    --text-color-link: var(--black);

    --main-color: var(--white);
    --secondary-color: var(--light-green);
    --third-color: var(--light-blue);
    --fourth-color: var(--light-orange);
    --fifth-color: var(--light-pink);
    --sixth-color: var(--light-yellow);

    --gradient-1: var(--third-color);
    --gradient-2: var(--sixth-color);
    --gradient-3: var(--fourth-color);
    --gradient-4: var(--fifth-color);

    --border-radius: 20px;
    --border: 3px solid var(--border-color);

    --box-shadow: 0.4rem 0.4rem 0 var(--border-color);
    --box-shadow-translate: 0.4rem 0.4rem;

    --gap: 40px;

    --max-screen-width: 116rem;

    --walking-maja-width: 3rem;

    --focus-styling: 6px dotted var(--focus-color);

    @media (width > 80rem) {
        --walking-maja-width: 4rem;
    }

    /* ***** */
    /* MARK: High contrast
    /* ***** */

    @media (prefers-contrast: more) {
        --contrast-color: #282828;

        --main-color: var(--contrast-color);
        --text-color: var(--white);
        --border-color: var(--white);
        --focus-color: var(--white);
        --secondary-color: var(--contrast-color);
        --third-color: var(--contrast-color);
        --fourth-color: var(--contrast-color);
        --fifth-color: var(--contrast-color);
        --sixth-color: var(--contrast-color);
    }

    @media (prefers-color-scheme: dark) {


        /* --main-color: var(--black);
        --text-color: var(--white);
        --border-color: var(--white);
        --focus-color: var(--white);
        --secondary-color: var(--dark-green); */
        /* --third-color: var(--dark-blue); */
        /*--fourth-color: var(--dark-orange);*/
        /* --fifth-color: var(--dark-pink); */
        /*--sixth-color: var(--dark-yellow); */
        
    }

}


@layer general, utility, specific;

/* *** */
/* MARK: Layer general
/* *** */

@layer general {
    
    /* **** */
    /* MARK: Fonts
    /* **** */
    
    @font-face {
        font-family: "Jersey 10";
        src: url(/assets/fonts/Jersey_10/Jersey10-Regular.ttf);
    }
    
    * {
        font-family: "Jersey 10", "Trebuchet MS", "Arial", sans-serif;
        color: var(--text-color);
    }
    
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }


    img,
    video,
    audio {
        max-width: 100%;
    }
    
    /* *** */
    /* MARK: General
    /* ***** */
    
    .visually-hidden {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: clip;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }
    
    h2 {
        font-size: clamp(1.7rem, 5.5vw, 2.3rem);
    }

    h3 {
        font-size: clamp(1.5rem, 5vw, 2rem);
    }

    h4 {
        font-size: clamp(1.3rem, 4vw, 1.5rem);
        text-decoration: underline;
    }
    
    p, ul, li, dl, dd, dt {
        font-size: clamp(1.3rem, 4vw, 1.5rem);
    }
    
    p, h1, h2, h3, h4, h5, h6 {
        margin: 0;
    }

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

    a {
        color: var(--text-color);
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-decoration-skip-ink: none;


        &:hover {
            text-decoration-style: wavy;
            
        }

    }

    figure {
        margin: 0;
    
        img {
            display: block;  
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    :focus-visible {
        outline: var(--focus-styling);
    }
    
}

/* *** */
/* MARK: Layer utility
/* *** */

@layer utility {

    /* ********** */
    /* MARK: utility classes
    /* ********** */
    
    .visually-hidden {
        border: 0;
        clip-path: inset(50%);
        height: 1px;
        margin: 0;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }
    
    
    .black-border {
        border: var(--border);
        overflow: clip;
    }
    
    .border-radius {
        border-radius: var(--border-radius);
    }
    
    .box-shadow {
        box-shadow: var(--box-shadow);
    }
    
    .input {
        margin: 0;
        border: var(--border);
        background: var(--main-color);
        padding: 0.2rem;
    }
    
    
    .white-on-green-container {
        display: grid;
        max-width: 90vw;
        align-content: start;
        height: max-content;
    }
    
    .white-heading {
        display: flex;
        align-items: center;
        width: 100%;
        height: clamp(2rem, 14cqw, 3rem);
        background: var(--main-color);
        padding: 0 1rem;
        border-bottom: var(--border);
    
        h2, h3 {
            margin: 0;
            max-width: 100%;
            font-size: clamp(1rem, 7cqw, 1.9rem);
        }
    }

    .white-content {
        background: var(--main-color);
    }
    
    .green-content {
        background: var(--secondary-color);
        display: grid;
        padding: 1rem;
        display: grid;
        gap: 1rem;
    }

    .h2-container {
        box-sizing: border-box;
        margin: 0 0 var(--gap) 0;
        padding: 20px;
        width: 90vw;
        max-width: var(--max-screen-width);
        height: min-content;
        background: var(--main-color);
        position: relative;
        text-align: center;

        font-size: clamp(1.5rem, 7vw, 2.5rem);

        @media (width > 116rem) {
           
            width: 100%;
        }
    }
}

/* *** */
/* MARK: Layer specific
/* *** */

@layer specific {


    
    /* **** */
    /* MARK: Body
    /* **** */
    
    body {
        display: grid;
        justify-items: center;
        margin: 0;
        padding: 0;
        min-height: 100vh;
        background: var(--gradient-1);
        background: linear-gradient(
                to bottom right, 
                var(--gradient-1) 0%, 
                var(--gradient-1) 25%, 
                var(--gradient-2) 25%, 
                var(--gradient-2) 50%, 
                var(--gradient-3) 50%, 
                var(--gradient-3) 75%, 
                var(--gradient-4) 75%);
    }
    
    /* **** */
    /* MARK: Header
    /* **** */
    
    header {
        width: 100%;
        height: min-content;
        display: grid;
        place-items: center;
        max-width: var(--max-screen-width);
    
        .h1-container {
            box-sizing: border-box;
            margin: 20px 0 var(--gap) 0;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 90vw;
            max-width: var(--max-screen-width);
            height: min-content;
            background: var(--main-color);
            position: relative;

    
            h1 {
                margin: 0;
                font-size: clamp(1.5rem, 9vw, 3.5rem);
            }
        }

        svg {
            transition: 1s;
            max-height: 6rem;
        }

        svg:hover {
            @media (prefers-reduced-motion: no-preference) {
                transform: rotate(3.25turn);
                transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
            }
            

        }
        
    
    }
    
    
    /* **** */
    /* MARK: Main
    /* **** */
    
    main {
        display: grid;
        align-items: start;
        justify-items: center;
        grid-auto-flow: dense;
        max-width: var(--max-screen-width);
        width: 100%;
        gap: var(--gap);
        
    }

    .main-layout {
        display: grid;
        gap: var(--gap);
        max-width: 90vw;
        

    }
    
    @media (width > 33rem) {
        .main-layout {
            grid-template-columns: 4fr 3fr;

            .profile {
                grid-area: profile;
            }
        
            .bio {
                grid-area: bio;
            }
        
            .skills-container {
                grid-area: skills;
            }
        
            .likes {
                grid-area: likes;
            }
        
            .dislikes {
                grid-area: dislikes;
            }

            .walking-maja-container {
                grid-area: maja;
            }

            grid-template-areas: 
                'profile profile'
                'bio         bio'
                'skills   skills'
                'likes  dislikes'
                'maja       maja'
            ;

            
        }
    }

    @media (width > 45rem) {
        .main-layout {
            grid-template-areas: 
                'profile     likes'
                'bio   bio'
                'skills  dislikes'
                'maja maja'
            ;
        }
    }

    @media (width > 60rem) {
        .main-layout {
            grid-template-columns: 1fr 1fr;

            grid-template-areas: 
                'profile     bio'
                'skills   likes'
                'skills  dislikes'
                'maja  maja'
            ;
        }
    }

     @media (width > 78rem) {
        .main-layout {
            grid-template-areas: 
                'profile     bio'
                'profile maja'
                'skills   likes'
                'skills  dislikes'
            ;

            
            
        }
    }

    @media (width > 116rem) {
        .main-layout {
            max-width: var(--max-screen-width);
            justify-self: start;
        }
    }

     

    
    
    
    /* ********* */
    /* MARK: Profile 
    /* ********* */
    
    .profile {
        .dead-maja {
            display: none;
        }
        

        &.dead {
            .alive-maja {
                display: none;
            }
            .dead-maja {
                display: block;
            }
        }
    
        figure {
            width: 100%;
            height: auto;
            aspect-ratio: 100/70;
            
    
            img {
                object-position: 50% 7%;
    
            }
        }
    
        p {
            margin: 0;
        }
    
        .general-info {
            display: flex;
            justify-content: space-between;
    
            .name {
                width: 40%;
            }
    
            .flag-p-container {
                display: grid; 
                min-width: 40%;  
                grid-template-columns: 3fr 6fr;  
            }
        
            .flag {
                display: grid;
                height: 100%;
                grid-template-rows: 1fr 1fr 1fr;
        
                div:first-of-type {
                    background: black;
                }
        
                div:nth-of-type(2) {
                    background: red;
                }
        
                div:nth-of-type(3) {
                    background: gold;
                }
            }
        
            
        }
    
    
        .hearts-container {
            display: flex;
            .heart {
                appearance: none;
                border: none;
                padding: 0;
                background: none;
                cursor: pointer;
    
                width: 2rem;
                aspect-ratio: 1;

                -webkit-mask: url("/static/media/heart-seethrough.svg") center / contain no-repeat;
                mask: url("/static/media/heart-seethrough.svg") center / contain no-repeat;

                background-color: var(--text-color);

                &.is-active {
                    -webkit-mask: url("/static/media/heart-red.svg") center / contain no-repeat;
                    mask: url("/static/media/heart-red.svg") center / contain no-repeat;
                    background-color: red;
                }

            }

            @media (prefers-contrast: more) {
                .heart {
                    appearance: none;
                    border: none;
                    padding: 0;
                    background: none;
                    cursor: pointer;
        
                    width: 2rem;
                    aspect-ratio: 1;

                    -webkit-mask: url("/static/media/heart-seethrough.svg") center / contain no-repeat;
                    mask: url("/static/media/heart-seethrough.svg") center / contain no-repeat;

                    background-color: var(--text-color);

                    &.is-active {
                        -webkit-mask: url("/static/media/heart-red.svg") center / contain no-repeat;
                        mask: url("/static/media/heart-red.svg") center / contain no-repeat;
                        background-color: red;
                    }

                }
            }
        }
    
       
        
    
    }

     .skills-container {
            display: grid;
    
            h3 {
                margin: 0;
                font-size: clamp(1.3rem, 4vw, 1.5rem);
            }
    
            .skill {
                display: grid;
    
                .skill-slider {
                    height: 1rem;
                    display: grid;
                    border: var(--border);
    
                    div:first-of-type {
                        background: var(--third-color);
                    }
    
                    div:nth-of-type(2) {
                        background: var(--main-color);
                    }
                }
            }
    
            /* skill values */
            .css .skill-slider {
                grid-template-columns: 95% 5%;
            }
            .html .skill-slider {
                grid-template-columns: 90% 10%;
            }
            .accessibility .skill-slider {
                grid-template-columns: 85% 15%;
            }
            .javascript .skill-slider {
                grid-template-columns: 60% 40%;
            }
            .astro .skill-slider {
                grid-template-columns: 50% 50%;
            }
            .wordpress .skill-slider {
                grid-template-columns: 50% 50%;
            }
        }

    
    

    /* **** */
    /* MARK: Likes Dislikes
    /* ***** */
    .likes-dislikes {
        width: 100%;
        background: var(--main-color);
        

        .content {
            padding: 1rem;

            ul {
                margin: 0;
                list-style: square inside url("../../static/media/Duck.svg");
            }
        }


        
    }

    /* **** */
    /* MARK: Walking Maja
    /* ***** */

    .walking-maja-container {
        width: 100%;
        container-type: inline-size;
        

        &:hover {
            .walking-maja {
                @media (prefers-reduced-motion: no-preference) {
                    transform: translate(calc(100cqw - var(--walking-maja-width)));
                }

            }
            svg {
                transform-origin: bottom center;
    
                @media (prefers-reduced-motion: no-preference) {
                    animation: rockingMaja 1.25s infinite steps(1, end);
                }
            }
        }
        

        .walking-maja {
            transition: 15s;
            transition-timing-function: linear;
            width: var(--walking-maja-width);

            
        }

    }

    



    /* **** */
    /* MARK: Projects
    /* ***** */

    .projects {
        width: 100%;
        display: grid;
        justify-items: center;
        background-color: var(--secondary-color);
        padding: var(--gap) 0;

        

    }



    .projects-width {
        width: 90vw;
        max-width: var(--max-screen-width);

        @media (width > 116rem) {
            padding: var(--gap);
        }
    }

    .project-grid {
        display: flex;
        flex-direction: column;
        gap: var(--gap);
        
        grid-auto-flow: row dense;
        max-width: 100vw;

        @media (width > 600px) {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
        }
      

        .project{
            position: relative;
            max-height: 100%;
            max-width: 90vw;
            display: grid;
            gap: 1rem;

            @media (width < 600px) {
                min-width: 90vw;
            }

            

            &:has(details[open]) {

                @media (width > 600rem) {

                    >div {
                        max-height: calc(100% - 25px);
                    }
                }
            }

            details summary {
                position: absolute;
                width: 100%;
                height: 10%;
                text-align: right;
                cursor: pointer;
                

                top: 0.1rem;
                right: 0.1rem;
                font-size: 2.5rem;

                .font {
                    font-size: 1rem;
                }
            }

            

    

            .project-short {
                border: var(--border);
                border-radius: 10px;
                box-shadow: var(--box-shadow);
                background: var(--main-color);
                padding: 0.2rem;
            }

            .visit-site {
                display: block;
                max-width: max-content;
                justify-self: center;
                padding: 0.5rem;
                border: var(--border);
                border-radius: var(--border-radius);
                box-shadow: var(--box-shadow);
                background: var(--fifth-color);
                text-decoration: none;
                color: var(--text-color-link);

                transition: 0.1s;
            }

            .visit-site:hover, .visit-site:focus-visible {
                background-color: var(--third-color);
            }

            .visit-site:active, .visit-site:focus-visible {
                box-shadow: none;
                translate: var(--box-shadow-translate);
            }

            
        }
    }

    /* ***** */
    /* MARK: Footer
    /* ***** */

    footer {
        background-color: var(--third-color);
        padding: var(--gap) 0;
        display: grid;
        place-items: center;
        width: 100%;
        max-width: var(--max-screen-width);
        h2 {

            color: var(--text-color-footer);
        }

        ul {
            max-width: 90vw;
            display: flex;
            gap: 10px;
            svg {
                fill: var(--text-color-footer);
                width: 3rem;
                transition: 0.1s;
            }
        }


        .logo-link {
            @media (prefers-reduced-motion: no-preference) {
                &:hover, &:focus-visible {
                    .logo-svg svg {
                        transform: scale(1.1);
                    }
                }
            }

            &:focus-visible {
                outline: none;

                .logo-svg svg {
                    outline: var(--focus-styling);
                }

            }
        }
    }

    
    
    /* ***** */
    /* MARK: scroll animations
    /* ***** */

    .scroll-animation {
        @media (prefers-reduced-motion: no-preference) {
            transition: 0.2s;
            view-timeline: --block-centered block;
            
            animation-timeline: --block-centered;
            animation-range: cover 30% cover 80%;
    
            animation-name: appear;
            animation-fill-mode: both;
            animation-duration: 1ms;
        }
    }
    
    
    
    
    /* ***** */
    /* MARK: sticky headings
    /* ***** */
    
    
    @media (prefers-reduced-motion: no-preference) {
        @supports (container-type: scroll-state) {
            header {
                position: sticky;
                top: 0;
                z-index: 1000;
        
                container-type: scroll-state;
                container-name: header;
            }
        
            .h1-container {
                transition: 0.1s;
            }
        }
        
       
        @container header scroll-state(stuck: top) {
            header {
    
                .h1-container {
                    width: 100%;
                   
                    margin: 0;
                    border-radius: 0;
                    padding: 10px;
    
                    svg {
                        height: 4em;
                        max-height: 10vw;
                    }
    
                    h1 {
                        font-size: clamp(1rem, 7vw, 2.3rem);
                    }
                }
            }
        }
        
    }

    
}

/* ***** */
/* MARK: Keyframes
/* ***** */


@keyframes appear {

  50% {
    box-shadow: none;
    translate: var(--box-shadow-translate);
  }

}

@keyframes walkingMaja {
    50% {
        transform: translate(calc(100cqw - var(--walking-maja-width)));
    }
}

@keyframes rockingMaja {
    0%, 100% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(5deg);
    }
}