@font-face {
    font-family: "Fredoka";
    src: url("../fonts/Fredoka-VariableFont_wdth,wght.woff2") format("woff2")
}
*, *::before, *::after{
    box-sizing: border-box;
}

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

body
{
    margin: 0;

}
header
{
    color: var(--bg);
    background-color: oklch(0.2148 0.148 237.04);

}
nav ul
{
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}
nav a
{
    padding-inline: 2rem;
    padding-block: 1rem;
    display: inline-block;
    color: inherit;
    text-decoration: none;
}
nav ul
{
    margin-left: -2rem;
}

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

.row
{
    display: flex;
    gap: 2rem;
    > * {
        border: dashed 1px oklch(0.2148 0.148 237.04);
        padding: 1rem;
        flex-grow: 1;
    }
    >*:first-child{
        flex-grow: 2;
    }


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

main {

    nav {
        --textcolor: oklch(0.99 0.003 325);
        --bg: oklch(0.6214 0.1815 29.08);
    }

    nav a {
        color: var(--textcolor);
        background-color: var(--bg);
        transition: color .2s ease-in-out, background-color .1s ease-in-out;

        &:hover,
        &:focus-visible {
            background-color: oklch(0.7212 0.2211 23.79);
            color: oklch(0.5474 0.2211 23.79);
        }
    }

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

    nav li:first-child a {
        background-color: oklch(0.99 0.003 325);
        color: oklch(0 0 0);
        font-weight: bold;
    }

}

.cards
{
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    list-style: none;
    li
    {
        display: flex;
        flex-direction: column;
        img
        {
            order: -1;
        }
    }
    > *
    {
        flex-basis: 18rem;
        box-shadow: 0 0 .2rem oklch(0 0 0/ .2), 0 0 2rem oklch(0 0 0/ .1);
        border-radius: 10px 10px 10px 10px;

    }
}

.content
{
    margin: 2rem;
}