@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;
    gap: 1rem;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
    margin-right: 15%;
    text-decoration: none;

    li
    {
        flex-basis: 18rem;

        @media (max-width: 599px)
        {
            flex-basis: 36rem;
        }

        list-style: none;
        display: flex;
        flex-direction: column;
        border: 1px solid lightgrey;
        border-radius: 0.5rem;
        overflow: hidden;
        position: relative;
        transition: box-shadow .2s ease-in-out,  box-shadow .1s ease-in-out;

        &:hover
        {
            box-shadow: 0 0 .9rem oklch(0 0 0 / .2);
            transition: box-shadow .2s ease-in-out,  box-shadow .1s ease-in-out;
        }

        picture
        {
            order: -1;

            img
            {
                width: 100%;
            }
        }

    }

    .content
    {
        padding: 1rem;

        & > h3
        {
            font-weight: bold;
            color: oklch(0 0 0);
        }

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

    }
}


.cards li:hover
{
    box-shadow: 0 0 .2rem oklch(0 0 0 / .2);
}

p
{
    font-size: 1.125rem;
    line-height: 1.5rem;
    margin-bottom: 1.5rem;
}

h3
{
    font-size: 1.5rem;
}
h2
{
    font-size: 2.25rem;
}
h1
{
    font-size: 3.375rem;
}
h2 + h3
{
    margin-block-start: -0.5rem;
}
p + h3
{
    margin-block-start: 1.5rem;
}
.metadetails
{
    font-style: italic;
}
.introduction
{
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.6;
}

.mylink
{
    a
    {
        color: oklch(0.6029 0.2541 24);
        &::before
        {
            content: image-set("../images/deleteicon.png" 1x);
            margin-right: 1rem;
        }
    }
}
.mybutton
{
    a {
        display: inline-block;
        margin-inline-start: 1rem;
        padding: .65rem 1.2rem;

        font-weight: bold;
        text-decoration: none;
        background-color: oklch(0.6324 0.1727 144);
        color: oklch(1 0 144);

        border-radius: 5px;
    }
}