/* .........Generelle stylings......... */
    h3{
        margin: 0 0 var(--space-xs) 0;
    }

    body{
        background-image: linear-gradient(170deg, var(--color-accent-sky), var(--color-neutral) 45%);
    }

    h2, h1{
        color: var(--color-cta-strong);
    }

    /* Active page */
        nav ul>li:nth-child(1)>a{
            background-size: 100% 2px;
            background-position-x: 0%;
        }

/* HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO */
    .hero{
        height: 70vh;
        padding: var(--space-s);
        display: flex;
        align-items: flex-end;
        background: url(img/portrait_rebecca.webp) no-repeat top center;
        background-size: cover;
    }


/* ABOUT RESUME EXPERIENCE ABOUT RESUME EXPERIENCE ABOUT RESUME EXPERIENCE ABOUT RESUME EXPERIENCE ABOUT RESUME EXPERIENCE ABOUT RESUME EXPERIENCE ABOUT RESUME EXPERIENCE */
    .aboutme, .education, .experience, .facts{
        width: 100%;
    }

    /* Animerede fact lister */
        .facts{
            width: 80%;
            padding-bottom: var(--space-m);
        }

        .facts h3{
            font-family: var(--font-header);
            font-style: italic;
            font-weight: 500;
            margin: 0 auto var(--space-s);
        }

        .liste{
            margin: 0;
            padding-inline: 0;
        }

        .liste li{
            padding: var(--space-xs) var(--space-s);
            background-color: var(--color-accent-sky);
            color: var(--color-cta-strong);
            border-radius: var(--radius-xl);
            border: 1px solid var(--color-cta-strong);
            text-align: center;
            margin-bottom: 0;
            list-style-type: none;
            font-family: 'DM Sans', sans-serif;
            font-style: normal;
            color: var(--color-text);
        }

        .scroller{
            max-width: 100%;
        }

        .scroller__inner{
            padding-block: var(--space-s);
            display: flex;
            flex-wrap: wrap;
            /* Denne del hjælper på eventuelle hop i loopet (sætter gappet til en variabel så man tager højde for hvis gappet ikke lige præcis bliver 1rem) */
            --gap: 2rem;
            gap: var(--gap);
            width: max-content;
            will-change: transform;
            transform: translate(0);
        }

        /* Stylings der kun gælder når bar'en animeres */
        .scroller[data-animated="true"] {
            overflow: hidden;
            -webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
            mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
        }
        
        .scroller[data-animated="true"] .scroller__inner {
            flex-wrap: nowrap;
            animation: scroll 40s linear infinite;
        }

            /* Animationen af bar'en */
            @keyframes scroll{
                to{
                    transform: translate(calc(-50% - (var(--gap) / 2)));
                }
            }

        /* Slukker for animationen for brugere der foretrækker minimal bevægelse */
            @media (prefers-reduced-motion: reduce) {
                .scroller{
                    display: flex;
                    flex-wrap: wrap;
                }

                .scroller__inner{
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                }

                .liste li{
                    margin: 0;
                }
            }

            

    /* CV og introduktions afsnit styling */
        .education article, .experience article{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .education h3:first-child, .experience h3:first-child{
            position: relative;
            max-width: 65%;
        }

        .about h3:last-child {
            font-weight: 500;
            color: var(--color-cta-strong);
        }

        .education h3:last-child, .experience h3:last-child{
            position: relative;
            right: 0;
        }

        .education li, .experience li {
            font-family: var(--font-body);
            font-style: normal;
            margin-bottom: var(--space-xs);
            color: var(--color-text);
            padding-right: 4rem;
            position: relative;
            margin-left: 4rem;
        }

        .abouttext{
            width: 100%;
        }

        .abouttext p{
            position: relative;
            margin-left: 0;
        }

        .abouttext p a{
            color: var(--color-cta-strong);
        }

        .about .content div{
            margin-bottom: var(--space-l);
        }

        .aboutme, .education, .experience, .facts h3{
            max-width: 1000px;
        }


/* Vises på mellemstore skærme */
@media screen and (max-width:768px){
/* .........Active page......... */
    nav>ul>li:nth-child(1)>a{
            font-weight: 800;
    }

    /* Fjern active page fra desktop*/
        nav ul>li:nth-child(1)>a{
            background-size: 0% 0px;
            background-position-x: 0%;
        }

    header a{
        background-color: var(--color-accent-sky);
    }

/* HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO */
    .hero{
        flex-direction: column;
        gap: var(--space-s);
        justify-content: flex-end;
    }

    .hero button{
        width: 100%;
    }


/* ABOUT RESUME EXPERIENCE ABOUT RESUME EXPERIENCE ABOUT RESUME EXPERIENCE ABOUT RESUME EXPERIENCE ABOUT RESUME EXPERIENCE ABOUT RESUME EXPERIENCE ABOUT RESUME EXPERIENCE */
    .aboutme, .education, .experience {
    width: 100%;
    }

    .about article{
        flex-direction: column;
    }

    .about h3:last-child{
        margin-bottom: var(--space-s);
    }

    .education h3:first-child, .experience h3:first-child{
        left: 0;
        margin-bottom: var(--space-xs);
    }

    .education div .medie, .education div .highschool, .education div .typo, .education div .motiongraphics, .education div .animation, 
    .education div .photoone, .experience div .elevplads, .experience div .ambassadør{
        width: 97%;
    }

    .aboutme div .abouttext{
        width: 100%;
    }

    .education li, .experience li {
        margin-left: 1.5rem;
    }


}

/* Vises på små skærme */
@media screen and (max-width:480px){     
/* HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO HERO */
    .hero{
        flex-direction: column;
        gap: var(--space-s);
        justify-content: flex-end;
    }

/* ABOUT RESUME EXPERIENCE ABOUT RESUME EXPERIENCE ABOUT RESUME EXPERIENCE ABOUT RESUME EXPERIENCE ABOUT RESUME EXPERIENCE ABOUT RESUME EXPERIENCE ABOUT RESUME EXPERIENCE */
    .education li, .experience li {
        margin-left: 1.3rem;
    }

    .education h3:first-child, .experience h3:first-child{
        max-width: 100%;
    }

}