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

}

:root {
    font-family: "Ubuntu", sans-serif;
    --primary: oklch(0.99 0.003 325);
    --bg: oklch(0.4608 0.1108 246.69);
    line-height: 1.6;
    scroll-behavior: smooth;
}

body{
    margin: 0;
}

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


header {
    background-color: var(--bg);
    color: var(--primary)
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0 0 0 -2em;
    display: flex;
    flex-wrap: wrap;
}

nav a {
    display: inline-block;
    padding: 1rem 2rem;
    color: inherit;
    text-decoration: none;
}

.cards {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;

    li {
        flex-basis: 18rem;
        flex-shrink: 1;
        flex-grow: 0;
        display: flex;
        flex-direction: column;
        box-shadow: 0 0 .2rem oklch(0 0 0 / .2), 0 0 2rem oklch(0 0 0 / .1);
        
        .content {
            padding: 0 1rem 1rem 1rem;
        }

        img {
            width: 100%;
            order: -1;
        }

    }

}