@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;900&display=swap');

@font-face {
    font-family: "New Computer Modern";
    src: url("/static/axiom/fonts/NewCM10-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "New Computer Modern";
    src: url("/static/axiom/fonts/NewCM10-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "New Computer Modern";
    src: url("/static/axiom/fonts/NewCM10-Italic.woff") format("woff");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "New Computer Modern";
    src: url("/static/axiom/fonts/NewCM10-BoldItalic.woff") format("woff");
    font-weight: 700;
    font-style: italic;
}

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

:root {
    --primary-text-color: #000;
    --secondary-text-color: #454547;
    --tertiary-text-color: #fafafc;
    --accent-color: #8a6ca8;
    --primary-background-color: #fafafc;

}

* {
    font-family: "New Computer Modern", serif;
}

:root {
    /*AFBLIJVEN*/
    --p-text: var(--primary-text-color);
    --s-text: var(--secondary-text-color);
    --t-text: var(--tertiary-text-color);
    --q-text: var(--accent-color);
    --a-text: var(--accent-color);

    --p-color: var(--primary-text-color);
    --s-color: var(--secondary-text-color);
    --t-color: var(--tertiary-text-color);
    --a-color: var(--accent-color);
    --quaternary-text-color: var(--accent-color);

    --background-color: var(--primary-background-color);
    --secondary-background-color: var(--accent-color);
    --p-background: var(--primary-background-color);
    --s-background: var(--secondary-background-color);
}

body {
    /* font-family: "Barlow", sans-serif; */
    color: var(--p-text);
    font-size: 120%;
    font-weight: 500;
}

hr,
.hr {
    border: none;
    opacity: .25;
    border-top: 2px solid var(--a-color);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.2;
    font-weight: 700;
    font-family: inherit;
}

h1,
.h1 {
    font-size: calc(1.375rem + 1.5vw);
    margin-bottom: .5rem;
}

h2,
.h2 {
    font-size: calc(1.325rem + 0.9vw);
    margin-bottom: .5rem;
}

h3,
.h3 {
    font-size: calc(1.3rem + 0.6vw);
}

h4,
.h4 {
    font-size: calc(1.275rem + 0.3vw);
}

h5,
.h5 {
    font-size: 1.25rem;
}

h6,
.h6 {
    font-size: 1rem;
}

@media (min-width: 1200px) {

    h1,
    .h1 {
        font-size: 2.5rem;
    }

    h2,
    .h2 {
        font-size: 2rem;
    }

    h3,
    .h3 {
        font-size: 1.75rem;
    }

    h4,
    .h4 {
        font-size: 1.5rem;
    }
}

.link {
    text-decoration: none;
    color: inherit;
}

.primary-text,
.p-text {
    color: var(--p-text);
    font-size: 120%;
}

.secondary-text,
.s-text {
    color: var(--s-text);
    font-size: 90%;
}

.mobile-only {
    display: none;
}

@media (max-width: 600px) {
    .desktop-only {
        display: none;
    }

    .mobile-only {
        display: block;
    }
}

button {
    cursor: pointer;
}