/* :root variables */
@import url("./variables.css");

/* fonts */
@import url("./fonts.css");

body {
    font-family: "BasteleurBold";
    margin: 12mm;
    color: var(--color2);
}

@page {
    size: 210mm 297mm;
    bleed: 3mm;
    margin: 12mm;
}

@page:first {
    background: var(--background);
}

body:first-child {
    background: var(--background);
}

#header {
    margin-top: 15mm;
    width: 145mm;
}

h1 {
    color: var(--color1);
    font-size: 25pt;
    line-height: 26pt;
    margin: 0;
    padding: 0;
}

h2 {
    color: var(--color1);
    font-size: 18pt;
    line-height: 18.5pt;
    position: absolute;
    top: 225mm;
    left: 122mm;
    width: 50mm;
}

h3 {
    color: var(--color1);
}

.category { position: absolute; top: 0; right: 5mm; width: 15mm; height: 15mm; display: block; border-radius: 50%; }

.category-wrapper {
    position: absolute;
    top: 0;
    right: 10mm;
    display: flex;
    gap: 2mm;
}

.category-wrapper .category {
    width: 15mm;
    height: 15mm;
    border-radius: 50%;
    display: block;
}

.category-wrapper .standards {
    background-color: var(--color-standards);
}

.category-wrapper .environment {
    background-color: var(--color-environment);
}

.category-wrapper .geopolitics {
    background-color: var(--color-geopolitics);
}

.category-wrapper .category:nth-child(1) {
    right: -10mm;
}

.category-wrapper .category:nth-child(2) {
    right: -5mm;
}

.category-wrapper .category:nth-child(3) {
    right: 0;
}