@font-face {
    font-family: 'calibri';
    src: url('../fonts/Lora-VariableFont_wght.woff2') format("woff2");
}

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

:root {
    font-family: lora, sans-serif;
    line-height: 1.6;
    font-size: 1.125rem;
    scroll-behavior: smooth;
    max-width: 40em;
    margin-inline: auto;
    padding-inline: 1rem;
    --bg:oklch(0.4724 0.1968 291);
    --bs:oklch(0.9135 0.0266 291);
}
h1 {
    font-size: calc(1.125rem * 1.5 * 1.5);
}
h2 {
    font-size: calc(1.125rem * 1.5);
}
h3 {
    font-size: 1.125rem;
}
.metadetails {
    font-style: italic;
}
.introduction {
    font-weight: bold;
    color: #000;
}
body {
    margin: 0;
}
.container{
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1rem;
}
header{
    background-color: var(--bg);
    color: var(--bs);
    nav ul{
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
    }
    nav a{
        padding-block: 1rem;
        padding-inline: 2rem;
        display: block;
        color: inherit;
        text-decoration: none;
    }
    nav a:hover{
        background-color: var(--bs);
        color: var(--bg);
    }
}