/* Oefening 11: zelf gehost lettertype */
@font-face {
    font-family: "Fredoka";
    src: url("./fonts/Fredoka-VariableFont_wdth,wght.woff2") format("woff2");
}

/* De vaste start */
:root {
    line-height: 1.6;
}

body {
    margin: 0;
}

/*
    Oefening 1: monochroom palet, hue 260
    achtergrond: oklch(0.99 0.003 260)
    tekst:       oklch(0.25 0.03 260)
    accent:      oklch(0.88 0.05 260)  zelfde hue, andere lightness, hogere chroma
*/
:root {
    color: oklch(0.25 0.03 260);
    background-color: oklch(0.99 0.003 260);
    font-family: "Fredoka", sans-serif;
}

/* Oefening 4: element selectors */
h1,
h2 {
    color: oklch(0.40 0.16 260);
}

code {
    background-color: oklch(0.94 0.02 260);
}

figcaption {
    color: oklch(0.45 0.03 260);
}

/* Oefening 5: class selectors */
.sitenaam {
    color: oklch(0.42 0.17 260);
}

.waarschuwing {
    color: oklch(0.25 0.03 260);
    background-color: oklch(0.88 0.05 260);
}

/* zelfde specificity als .waarschuwing, staat later: deze wint */
.belangrijk {
    color: oklch(0.40 0.16 260);
}

/* Oefening 6: id selector */
#intro {
    font-weight: bold;
}

/* doet niets: een element selector verliest altijd van een id selector */
p {
    font-weight: normal;
}

/* Oefening 7: attribute selectors */
[lang="en"] {
    font-style: italic;
}

/* decoratieve afbeeldingen (lege alt) krijgen een rand */
img[alt=""] {
    border: 4px dashed oklch(0.40 0.16 260);
}

/* uitbreiding: afbeeldingen zonder alt attribuut vallen meteen op */
img:not([alt]) {
    outline: 6px solid oklch(0.60 0.22 25);
}