:root {
    /* colours */
    --dark: #222323;
    --light: #f7ede2;
    --pop-of-colour: #e63946;

    /* tertiary colours */
    --dbl-light-red: #e84550;
    --light-red: #e73f4b;
    --dark-red: #b5343e;
    --dbl-dark-red: #9d313A;

    /* dark met een opacity */
    --see-through-dark: rgb(34, 35, 35, 0.7);

    /* font */
    --h1-size: 4em;
    --h2-size: 2em;
    --h3-size: 1.5em;
    --p-size: 1em;

    /* margin & padding */
    --reg-space: 1em;
    --s-padding: 0.5em;

    /* shadow */
    --shadow:  0 3px 10px rgb(10, 9, 8); 

    /* radius */
    --s-radius: 8px;
}

@font-face {
    font-family: 'Rosemode';
    src: url(fonts/Rosemode.ttf);
}

@font-face {
    font-family: 'Thernaly';
    src: url(/fonts/thernaly.ttf);
}

@font-face {
    font-family: 'Didact gothic';
    src: url(fonts/DidactGothic-Regular.ttf);
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.5s;
}


html {
    background-color: var(--dark);
    scroll-behavior: smooth;
    overflow-x: hidden;
}

main {
    backdrop-filter: blur(90px);
    height: 100%;
}

h1, h2, h3, p, a, li, details, summary {
    color: var(--light);
    font-family: 'Didact gothic';
}

h1 {
    text-align: center;
    text-shadow: 1px 2px 8px var(--pop-of-colour);
}

button {
    background: none;
    cursor: pointer;
}

a {
    text-decoration: none;
  }