@font-face {
    font-family: "Roboto";
    src: url("./fonts/Roboto-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Roboto";
    src: url("./fonts/Roboto-Bold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: "Roboto";
    src: url("./fonts/Roboto-SemiBoldItalic.woff2") format("woff2");
    font-weight: 600;
    font-style: italic;
}
/* Zet box-sizing voor alle elementen op “border-box”  */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Stel een font en default/fallback font in op het :root element */
:root {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.6;
    scroll-behavior: smooth;
    --bg: oklch(0.99 0.003 325);
    --primary: oklch(0.25 0.01 325);
}
p {
    font-size: 1.125rem;

    + p {
        margin-block-start: 1.5rem;
    }
}

h1, h2, h3, h4, h5,h6{
    margin-block-start: 3rem;
}

h1 + p,
h2 + p,
h3 + p,
h4 + p,
h5 + p,
h6 + p{
    margin-block-start: 0.5rem;
}

h2 + h3{
    margin-block-start: 1.5rem;
}

h1{
font-size: calc(16px*1.5*1.5*1.5);
}
h2{
    font-size: calc(16px*1.5*1.5);
}
h3{
    font-size: calc(16px*1.5);
}
/* Zet de body margin op 0 */
body {
    margin: 0;
}

/* Maak een .container class */
.container {
    max-width: 40em;
    margin-inline: auto;
    padding-inline: 1rem;
    line-height: inherit;

}

.metadetails{
    font-style: italic;
}

.introduction{
    color: oklch(1 0 89.876);
    background-color: oklch(0 0 0);
}

header{
    background-color: oklch(0.2878 0.1994 264.05);
    color: var(--bg);

    nav {

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


        }

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


        }
    }
}



.content {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;

}