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

:root {
    font-family: "Fredoka", Arial, sans-serif;
    line-height: 1.6rem;
    scroll-behavior: smooth;
    --bg: oklch(0.99 0.003 325);
    --primary: oklch(0.25 0.01 325);
}

body {
    margin: 0
}

header {
    background-color: var(--primary);
    color: var(--bg );
    nav ul {
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        margin-inline-start: -2rem;
        a {
            padding-block: 1rem;
            padding-inline: 2rem;
            color: inherit;
            text-decoration: none;
        }
    }
}

.container {
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

.row {
    display:flex;
    flex-direction: row;
    gap:2rem;
    div {
        flex-grow:1;
        &:nth-child(1){
            flex-grow:2;
        }
        padding: 1rem;
        border: dashed 1px blue;
    }
}

h2 + nav ul {
    margin: 0;
    padding-inline-start:0;
    list-style: none;
    a {
        padding-block: 1rem;
        padding-inline: 2rem;
        color: inherit;
        text-decoration: none;


    }
    li {
        padding-block: 1rem;
        background-color: oklch(0.5 0.2 28);
        &:hover {
            background-color: var(--bg);
            color: var(--primary)
        }
        a{
            &:focus-visible {
                background-color: var(--bg);
                color: var(--primary);
            }
        }
    }
    display: flex;
    color: var(--bg);
    li:nth-child(1){
        a{
            padding-inline-start: 0;
        }
        background-color: var(--bg);
        color: var(--primary);
        margin-inline-end: auto;
    }
}

.visually-hidden {
    height: 1px;
    overflow: hidden;
    width: 1px;
    position: absolute;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    white-space: nowrap;
}

@font-face {
    font-family: "Fredoka";
    src: url("../fonts/Fredoka-VariableFont_wdth,wght.woff2") format("woff2")
}

.content {
}


.overlay-link {
    position:absolute;
    inset:0;
    z-index: 3;
    visibility: hidden;
}

.cards {
    display:flex;
    flex-direction: row;
    margin: 0;
    margin-inline-start: 2rem;
    padding: 0;
    gap: 2rem;
    li {
        border-radius: 1rem;
        box-shadow: 0 0 0.2rem oklch(0 0 0 / 0.2), 0 0 2rem oklch(0 0 0 / 0.1);
        flex-basis: 18rem;
        display:flex;
        width: 20%;
        flex-wrap:wrap;
        flex-direction: column;
        position: relative;
        .content {
            margin-inline-start: 0.5rem;
            margin-block-end: 1rem;
            a:hover {
                text-decoration: none;
            }
        }
        &:hover {
            img + div {
                transform: scale(100%, 100%);
            }
        }
    }
    img {
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
        max-width: 100%;
        order:-2;
        &+div{
            position: absolute;
            transform: scale(0, 0);
            transform-origin:center center;
            margin: 0;
            padding: 0;
            order: -1;
            border-radius: 1rem;
            max-width: 100%;
            max-height: 100%;
            width: 100%;
            height: 100%;
            background-color: oklch(1 0.7 280 / 0.2);
            mix-blend-mode: multiply;
            transition: width 0.3s ease-out, height 0.3s ease-out, transform 0.3s ease-out;
        }
    }
}