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

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

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

header {
    background-color: oklch(24.102% 0.08683 298.869);
    color: var(--primary);
}

nav {
    ul {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        padding-inline: 0;
        margin-block: inherit;
        margin-inline-start: -2rem;
    }

    a {
        display: block;
        padding-block: 1rem;
        padding-inline: 2rem;
        color: var(--bg);
        text-decoration: none;
    }
}

body {
    margin: 0;
}

main {
    nav {
        --bg: oklch(48.06% 0.15965 25.546);
        --text: oklch(88.796% 0.03401 48.205);

        a {
            background-color: var(--bg);
            color: var(--text);
            height: 100%;

            transition: color .1s ease-in-out,
                background-color .1s ease-in-out,
                height .2s ease-in-out,
                border-radius .1s .1s ease-in-out;

            &:hover,
            &:focus-visible {
                background-color: var(--text);
                color: var(--bg);
                height: 130%;
                border-radius: 0 0 1rem 1rem;
            }
        }

        li:first-child {
            margin-inline-end: auto;

            a {
                background-color: inherit;
                color: inherit;
                font-weight: bold;
            }
        }
    }
}

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

.cards {
    --overlaycolor: oklch(53.399% 0.21083 311.591 / 0.534);
    --radius: 1rem;

    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    gap: 2rem;
        
    li {
        --width: 18rem;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        flex-basis: 18rem;
        max-width: var(--width);
        transition: transform .2s ease-in-out;
        
        border-radius: var(--radius);
        box-shadow: 0 0 .2rem oklch(0 0 0 / 0.2), 0 0 2rem oklch(0 0 0 / 0.1);
        background-color: white;
        
        >img {
            max-width: var(--width);
            border-radius: var(--radius) var(--radius) 0 0;
            order: -1;
        }
    }

    li:hover {
        transform: scale(1.1);
    }

    a:not(.overlay-link) {
        display: block;
        position: relative;
        margin-block-end: 2rem;
        z-index: 1;
    }
}

.overlay-link {
    position: absolute;
    inset: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;

    border-radius: var(--radius);
    transition: background-color .3s ease-in-out;
    
    &:hover,
    &:focus-visible {
        background-color: oklch(50.384% 0.29377 285.384 / 0.453);
    }
}

.content {
    :not(.overlay-link) {
        padding-inline: 1rem;
    }
}

.row {
    display: flex;
    gap: 2rem;

    >* {
        border-style: dashed;
        border-radius: 1px;
        border-color: oklch(52.613% 0.12528 251.507);
        flex-grow: 1;
        padding: 1rem;
    }

    div:first-child {
        flex-grow: 2;
    }
}

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