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

@font-face {
    font-family: 'Source Sans Pro';
    src: url(../assets/fonts/source-sans-pro/source-sans-pro-latin-200-normal.woff2);
    font-style: normal;
    font-weight: 200;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url(../assets/fonts/source-sans-pro/source-sans-pro-latin-200-italic.woff2);
    font-style: italic;
    font-weight: 200;
}


@font-face {
    font-family: 'Source Sans Pro';
    src: url(../assets/fonts/source-sans-pro/source-sans-pro-latin-300-normal.woff2);
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url(../assets/fonts/source-sans-pro/source-sans-pro-latin-300-italic.woff2);
    font-style: italic;
    font-weight: 300;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url(../assets/fonts/source-sans-pro/source-sans-pro-latin-400-normal.woff2);
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url(../assets/fonts/source-sans-pro/source-sans-pro-latin-400-italic.woff2);
    font-style: italic;
    font-weight: 400;
}



@font-face {
    font-family: 'Source Sans Pro';
    src: url(../assets/fonts/source-sans-pro/source-sans-pro-latin-600-normal.woff2);
    font-style: normal;
    font-weight: 600;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url(../assets/fonts/source-sans-pro/source-sans-pro-latin-600-italic.woff2);
    font-style: italic;
    font-weight: 600;
}


@font-face {
    font-family: 'Source Sans Pro';
    src: url(../assets/fonts/source-sans-pro/source-sans-pro-latin-700-normal.woff2);
    font-style: normal;
    font-weight: 700;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url(../assets/fonts/source-sans-pro/source-sans-pro-latin-700-italic.woff2);
    font-style: italic;
    font-weight: 700;
}


@font-face {
    font-family: 'Source Sans Pro';
    src: url(../assets/fonts/source-sans-pro/source-sans-pro-latin-900-normal.woff2);
    font-style: normal;
    font-weight: 900;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url(../assets/fonts/source-sans-pro/source-sans-pro-latin-900-italic.woff2);
    font-style: italic;
    font-weight: 900;
}

@font-face {
    font-family: 'Kalam';
    src: url(../assets/fonts/Kalam/Kalam-Light.ttf);
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: 'Kalam';
    src: url(../assets/fonts/Kalam/Kalam-Regular.ttf);
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 'Kalam';
    src: url(../assets/fonts/Kalam/Kalam-Bold.ttf);
    font-style: normal;
    font-weight: 700;
}

/*Source sans pro currently loaded via google*/

body,
html {
    /*otherwise height:100vw causes an overflow*/
    margin: 0;
    padding: 0;
    background-color: #e7e8e2;

    /*--color--pink: #915672;*/

    --color-dark-blue: #0A1628;
    --color-dark-blue-transparent: color-mix(in oklab, var(--color-dark-blue) 90%, transparent);
    --color-dark-blue-very-transparent: color-mix(in oklab, var(--color-dark-blue) 60%, transparent);
    ;
    --color-accent: #c5512a;
    --color2--whitish: #d9d1b2;
    --color-grey: #dbe9ea;
    --color-dark-grey: #39465a;
    --shadow-default: 2px 4px 6px #0000006d;

    --button-corner-radius: 0.2em;
    --light-text-color: #d9d1b2;
    font-family: "Source Sans Pro", sans-serif;

    --animation-duration: 0.25s;
    animation-duration: var(--animation-duration);
    background-color: var(--color-dark-blue);

    --color-brown-orange: #9e4a2d;
    --color-orange: #ff7c38;
    --color-grey: #b9af9d;
}

main {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    grid-template-rows: repeat(24, 1fr);
    height: 100vh;
    background-color: var(--color-dark-blue);
}

#ecorpusContainerId {
    z-index: 0;
    grid-column: 1/25;
    grid-row: 1/25;
}

#backdropBlurId {
    grid-column: 1/25;
    grid-row: 1 /25;
    z-index: 4;
    /*backdrop-filter: blur(5px);*/
}


button {
    font-family: "Source Sans Pro", sans-serif;
    background-color: var(--color-dark-blue);
    color: var(--color2--whitish);
    border: solid 1px var(--color-grey);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow-default);
    border-radius: var(--button-corner-radius);
    font-weight: normal;
}

.simpleButton {
    z-index: 5;
    background-color: var(--color-dark-blue);
    color: var(--light-text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border: none;
    font-size: 1.3rem;
    box-shadow: var(--shadow-default);
}


/* --------- LOGOS -------------*/
/* 
#logosId {
    pointer-events: none;
    grid-column: 11/13;
    grid-row: 11/13;
    z-index: 7;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    opacity: 80%;

    .logo {
        filter: brightness(0) invert(1) drop-shadow(2px 4px 6px #00000098);
        height: 7vh;
    }

    .logo_lille {
        height: 9vh;
    }
} */

/* ---------- TOOLTIPS ---------- */
.tooltip {
    color: var(--color-dark-blue);
    position: absolute;
    background-color: var(--color2--whitish);
    font-size: 1.3rem;
    padding: 6px 12px;
    max-width: 30em;
    border: var(--color-dark-blue) solid 2px;
    width: fit-content;
    z-index: 20;
    position-area: end;
    animation: fade-in var(--animation-duration) ease-in;
    min-width: 15rem;
}

.tooltip-text {
    border-bottom: 2px dotted var(--color-accent);
    cursor: help;
}

/* tool tip shrink wrap - ideas comming from https://kizu.dev/shrinkwrap-problem/*/
@supports (anchor-name: --tooltip-text) {
    .tooltip {
        background: none;
        border: none;

        &>span {
            anchor-name: --tooltip-text;
        }

        &::after {
            content: "";
            position: absolute;
            inset: 0px calc(anchor(inside) - 12px);
            border: var(--color-dark-blue) solid 2px;
            position-anchor: --tooltip-text;
            background: var(--color2--whitish);
            z-index: -1;
        }
    }
}


/*----------------- TRANSITION ANIMATION ---------------*/
.fade-in-delayed {
    animation: fade-in-delayed calc(var(--animation-duration) *2) ease-in;
    opacity: 1;

    &#historyPage,
    &#zodiacRangeContainer {
        animation: '';
        opacity: 1;
    }
}

.fade-in {
    animation: fade-in var(--animation-duration) ease-in;
    opacity: 1;


    &#historyPage,
    &#zodiacRangeContainer {
        animation: '';
        opacity: 1;
    }
}


.fade-out {
    animation: fade-out var(--animation-duration) ease-out;
    opacity: 0;

    &#zodiacRangeContainer {
        animation: '';
        opacity: 1;
    }
}

@keyframes fade-in-delayed {
    0% {
        opacity: 0;
        display: none;
    }

    50% {
        opacity: 0;
        display: none;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
        display: none;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
        display: none;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}


/* --------- FULL SCREEN IMAGES -------------*/

#fullScreenImageId {
    z-index: 15;
    background-color: transparent;
    grid-column: 3/23;
    grid-row: 3/23;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: visible;

    img {
        max-width: 100%;
        max-height: 100%;
    }
}

#overlayArticleBlur {
    &.overEverythingBlur {
        z-index: 14;
    }
}


/* ------------ Tour article common ------------ */

.toursArticleContainer {
    background-color: var(--color-dark-blue-transparent);
    padding: calc(100vw/96);
    color: var(--color2--whitish);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent) var(--color-dark-blue-transparent);
    z-index: 6;
    box-shadow: 2px 4px 6px #0000006d;

    img {
        width: 100%;
        height: auto;
    }

    figure[data-scene] {
        img {
            border: 3px solid var(--color-accent);
        }
    }

    figcaption {
        font-size: 1rem;
    }

    h1 {
        margin-top: 0;
        font-size: 2rem;
        max-width: calc(100% - 100vw/96);
        /*To not overlap with the close button*/
    }

    font-size: 1.4rem;

    .closeArticleButton {
        position: fixed;
        top: calc(200vh / 12 + 0.2rem);
        left: auto;
        right: 0.2rem;
    }
}



.borderImage {
    --border-size: 27px;
    border-image-slice: 27 27 27 27;
    border-image-width: var(--border-size);
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: round round;
    border-image-source: url(../assets/border-images/brique_borders_.png);
    border-style: solid;
    width: calc(var(--border-size) * 3 + var(--border-size) * 1.5);
    height: calc(var(--border-size) * 3 + var(--border-size));
}


.borderVerticalImage {
    border-image-slice: 15 24 15 24;
    border-image-width: 15px 24px 15px 24px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: round round;
    border-image-source: url(../assets/border-images/brique_vertical_borders_4.png);
    border-style: solid;
    width: calc(15px * 3 + 24px * 2);
    height: calc(24px * 3 + 30px);
}


/* ------------------------------
 | MODULAR TYPE SCALE
 | ------------------------------
 | Helps you create type scales that bring natural rhythm,
 | consistency, and balance to your designs.
 |
 | BASE VALUES:
 | - Font Size: 16px / 1rem
 | - Line Height: 24px / 1.5
 | - Letter Spacing: 3.5% / 0.035em
 |
 | SCALE:
 | - Ratio: 1.33 - Perfect Fourth
 |
 | LINE GRID:
 | - Grid Unit: 4px / 0.25rem
 |
 |
 | Scale ratio is calculated using an equal temperament tuning system.
 | Created with Precise Type / https://precise-type.com
 | Tools & Models by Adonis Raul Raduca
 */

/* --- Font Sizes --- */

:root {
  /* below the base */
  --font-size-2b: 0.5625rem;
  --font-size-1b: 0.75rem;

  /* the base */
  --font-size: 1rem;

  /* above the base */
  --font-size-1: 1.3125rem;
  --font-size-2: 1.8125rem;
  --font-size-3: 2.375rem;
  --font-size-4: 3.1875rem;
  --font-size-5: 4.25rem;
  --font-size-6: 5.6875rem;
}

/* --- Line Heights --- */

:root {
  /* below the base */
  --line-height-2b: 1.7778;
  --line-height-1b: 1.6667;

  /* the base */
  --line-height: 1.5;

  /* above the base */
  --line-height-1: 1.3333;
  --line-height-2: 1.2414;
  --line-height-3: 1.2632;
  --line-height-4: 1.1765;
  --line-height-5: 1.1176;
  --line-height-6: 1.0989;
}

/* --- Letter Spacings --- */

:root {
  /* below the base */
  --letter-space-2b: 0.0856em;
  --letter-space-1b: 0.0567em;

  /* the base */
  --letter-space: 0.035em;

  /* above the base */
  --letter-space-1: 0.0195em;
  --letter-space-2: 0.0059em;
  --letter-space-3: -0.0026em;
  --letter-space-4: -0.0096em;
  --letter-space-5: -0.0147em;
  --letter-space-6: -0.0186em;
}

/* ------------------------------
 | Examples
 */