html {
    font-size: 1.1vw;
    --bg: white;
    --forDiff: white;
    --color: black;
    --contrast: #888;
    --m: 1.2rem;
    --n: 0.6rem;
    --lh: 1.3rem;
    --border: 2px;
    --ls: 0.01;
}
.revert {
    --bg: black;
    --color: white;
}

body {
    background-color: var(--bg);
    font-size: 1rem;
    letter-spacing: calc(var(--ls) * 1em);
    line-height: var(--lh);
    font-family: "alter", serif;
    overflow: hidden;
    color: var(--color);

    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* height: 100%; */

    /* height: 100vh;
    height: -moz-available;
    height: -webkit-fill-available;
    height: fill-available; */
}

/* ------------------------------------------------------------------------ */
h1, .sizeBig {
    font-size: 5.8rem;
    letter-spacing: calc(var(--ls) * 1em);
    font-family: "alter", serif;
    line-height: 1em;
    margin: calc(calc(1em - var(--m)) * -0.5) 0px;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
}

h2, .sizeMedium {
    font-size: 3.7rem;
    letter-spacing: calc(var(--ls) * 1em);
    font-family: "alter", serif;
    line-height: 1em;
    margin: calc(calc(1em - var(--m)) * -0.5) 0px;
    text-transform: uppercase;
}

.sizeSmall {
    font-size: 1.2rem;
    letter-spacing: calc(var(--ls) * 1em);
    font-family: "alter", serif;
    line-height: 1.3em;
    margin: calc(calc(1em - var(--m)) * -0.5) 0px;
}

h3 {
    font-size: 2.2rem;
    letter-spacing: calc(var(--ls) * 1em);
    font-family: "alter", serif;
    line-height: 1em;
    margin: calc(calc(1em - var(--m)) * -0.5) 0px;
    text-transform: uppercase;
}

h4 {
    font-size: 2rem;
    letter-spacing: calc(var(--ls) * 1em);
    font-family: "process", sans-serif;
    font-weight: 600;
    line-height: 1em;
    margin: calc(calc(1em - var(--m)) * -0.5) 0px;
    text-transform: uppercase;
}

h5 {
    font-size: 1rem;
    letter-spacing: calc(var(--ls) * 1em);
    font-family: "process", sans-serif;
    text-transform: uppercase;
    line-height: 1em;
    margin: calc(calc(1em - var(--m)) * -0.5) 0px;
    text-transform: uppercase;
}

hr {
    padding: 0px;
    margin: 0px;
    border-width: 0px;
    border-bottom: var(--border) solid var(--color);
}

h1+h1, h1+h2, h1+h3, h1+h4, h1+h5, h1+h6, h1+p, h1+hr, h1+.t,
h2+h1, h2+h2, h2+h3, h2+h4, h2+h5, h2+h6, h2+p, h2+hr, h2+.t,
h3+h1, h3+h2, h3+h3, h3+h4, h3+h5, h3+h6, h3+p, h3+hr, h3+.t,
h4+h1, h4+h2, h4+h3, h4+h4, h4+h5, h4+h6, h4+p, h4+hr, h4+.t,
h5+h1, h5+h2, h5+h3, h5+h4, h5+h5, h5+h6, h5+p, h5+hr, h5+.t,
h6+h1, h6+h2, h6+h3, h6+h4, h6+h5, h6+h6, h6+p, h6+hr, h6+.t,
p+h1, p+h2, p+h3, p+h4, p+h5, p+h6, p+p, p+hr, p+.t,
hr+h1, hr+h2, hr+h3, hr+h4, hr+h5, hr+h6, hr+p, hr+hr, hr+.t,
.t+h1, .t+h2, .t+h3, .t+h4, .t+h5, .t+h6, .t+p, .t+hr, .t+.t {
    margin-top: var(--m);
}
p+hr, p+.t, p+p, p+h5,
hr+hr, hr+.t, hr+p, hr+h5,
.t+hr, .t+.t, .t+p, .t+h5,
h5+hr, h5+.t, h5+p, h5+h5 {
    margin-top: var(--n);
}
p {
    /* line-height: 1.3em; */
}
a {
    color: inherit;
    text-decoration: none !important;
}
strong {
    font-family: "alter", sans-serif;
}
a:hover {
    /* color: var(--contrast); */
    text-decoration: none !important;
}
.underlinedLinks a{
    text-decoration: underline !important;
}
.arrowLinks a:before {
    padding-right: var(--n);
    font-family: "alter", serif;
    /* content: "→"; */
    content: "\2192";
    text-transform: uppercase;              /* high-level property          */
    -moz-font-feature-settings: 'case';     /* low-level (old Firefox)      */
    -webkit-font-feature-settings: 'case';  /* low-level (old Webkit)       */
    font-feature-settings: 'case' on;       /* low-level (all new browsers) */
    /* text-transform: uppercase; */
}
.grayLinks a {
    color: var(--contrast);
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.diff {
    mix-blend-mode: difference;
    --color: white !important;
    color: var(--forDiff);
    /* color: gray; */
    /* border-bottom-color: var(--forDiff) !important; */
}

.caps {
    text-transform: uppercase;
}

/* ------------------------------------------------------------------------ */
#main {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    /* height: auto !important;
    min-height: 100%; */
    /* max-height: 100vh; */
    /* scroll-snap-type: y proximity; */
    overflow-x: hidden;
    overflow-y: scroll;

}

#canvasContainer, #canvasContainer canvas {
    position: fixed;
    width: 100% !important;
    height: 100% !important;
    top: 0px;
    left: 0px;
    pointer-events: none;
    z-index: -1;
}
.projectBg {
    background-color: white;
}
.revert .projectBg {
    background-color: black;
}
canvas {
}

/* ------------------------------------------------------------------------ */
.frame {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    position: relative;
    overflow: hidden;
    /* scroll-snap-align: start; */
}
.frameBottom>div {
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
}

/* ------------------------------------------------------------------------ */
.outer {
    position: relative;
    border-top: var(--border) solid var(--color);
    border-bottom: var(--border) solid var(--color);
}

.inner {
    position: absolute;
    padding: var(--m) 0px;
    font-family: "process", sans-serif;
    min-height: 100%;
}

.relative {
    position: relative;
}

.date {
    position: absolute;
    bottom: 0px;
    left: 0px;
}

.date span {
    display: block;
    padding: 1rem 0.5rem;
    float: left;
    border: var(--border) solid var(--color);
}

.date span+span {
    margin-left: var(--n);
}

.back {
    line-height: 1em;
    position: absolute;
    bottom: 0px;
    right: 0px;
    border: var(--border) solid var(--color);
    border-style: dashed;
    padding: 0rem 2rem;
    height: 20vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.spacer {
    height: 20vh;
    margin-top: 2rem;
}

.back:hover {
    border-style: solid;
}

.gridSmallBig {
    grid-template-rows: min-content auto;
    height: 100%;
}
.maxContent {
    grid-template-rows: max-content;
}

.gridSmallBigSmall {
    grid-template-rows: min-content auto min-content;
    height: 100%;
}

.gridGap {
    grid-column-gap: calc(var(--m) * 2);
    grid-row-gap: var(--m);
}

.gridGapHalf {
    grid-column-gap: calc(var(--m) * 2);
    grid-row-gap: var(--m);
}

.gridPad {
    padding: var(--m);
}

.column {
    width: 50%;
    background-color: blue;
    float: left;
}

.vLine {
    position: relative;
}

.vLine::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(var(--m) * 1);
    height: calc(100% - var(--m) * 2);
    border-left: var(--border) solid var(--color);
}

.vLine2 {
    position: relative;
}

.vLine2::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(var(--m) * 3);
    height: calc(100% - var(--m) * 4);
    border-left: var(--border) solid var(--color);
}

/* ------------------------------------------------------------------------ */
.button, button {
    padding: 0.5rem;
    border: var(--border) solid var(--color);
    background-color: var(--bg);
    font-size: 1rem;
    letter-spacing: calc(var(--ls) * 1em);
    text-transform: uppercase;
    display: block;
    font-family: "process", sans-serif;
    /* font-weight: 600; */
    float: left;
}

.button:hover, button:hover {
    border-style: dashed;
    cursor: pointer;
}

button+button, .button+.button {
    margin-left: 1rem;
}

.floatRight {
    float: right;
}

/* ------------------------------------------------------------------------ */
.behind {
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
}

.layout .cline {
    position: absolute;
    left: var(--m);
    right: var(--m);
    top: 50%;
    transform: translateY(-50%);
    padding: 0px;
    margin: 0px;
    border-width: 0px;
    border-bottom: var(--border) solid var(--color);
}

.layout h3 {
    display: block;
    position: absolute;
    bottom: calc(calc(100% / 2) + var(--m));
    width: calc(calc(100% - calc(2 * var(--m))) / 1);
    left: var(--m);
    text-align: center;
    margin: 0px;
}

.layout h4 {
    position: absolute;
    top: calc(calc(100% / 2) + var(--m));
    width: calc(calc(100% - calc(2 * var(--m))) / 1);
    left: var(--m);
    text-align: center;
    margin: 0px;
}

/* ------------------------------------------------------------------------ */
.layout .typo {
    position: absolute;
    --ty: translateY(-50%);
    transform: var(--tx, ) var(--ty, );
    top: 50%;
}

.layout .textLeft {
    left: var(--m);
    width: calc(calc(100% - calc(3 * var(--m))) / 2);
}

.layout .textRight {
    right: var(--m);
    width: calc(calc(100% - calc(3 * var(--m))) / 2);
}

.layout .textCenter {
    width: calc(calc(100% - calc(2 * var(--m))) / 1);
    left: 50%;
    --tx: translateX(-50%);
    text-align: center;
}

/* ------------------------------------------------------------------------ */
/* .layout img.contain {
    object-fit: contain;

}
.layout img.cover {
    object-fit: cover;
} */
.layout img {
    opacity: 0;
    position: absolute;
    transform: var(--tx, ) var(--ty, );
    object-fit: contain;
}

.layout .rowTop {
    top: var(--m);
}

.layout .rowMiddle {
    --ty: translateY(-50%);
    top: 50%;
}

.layout .rowBottom {
    bottom: var(--m);
}

.layout .colLeft {
    left: var(--m);
}

.layout .colMiddle {
    --tx: translateX(-50%);
    left: 50%;
}

.layout .colRight {
    left: unset;
    right: var(--m);
}

.layout .sizeQuarter {
    width: calc(calc(100% - calc(5 * var(--m))) / 4);
    height: auto;
}

.layout .sizeThird {
    width: calc(calc(100% - calc(4 * var(--m))) / 3);
    height: auto;
}

.layout .sizeHalf {
    width: calc(calc(100% - calc(3 * var(--m))) / 2);
    height: auto;
    max-height: calc(calc(100% - calc(2 * var(--m))));
}

.layout .sizeFull {
    left: 50%;
    right: unset;
    top: 50%;
    bottom: unset;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
}

/* ------------------------------------------------------------------------ */
.scrollable {
    overflow-y: scroll;
}

.hideScrollbars {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.hideScrollbars::-webkit-scrollbar {
    display: none;
}

/* ------------------------------------------------------------------------ */
@media screen and (orientation: portrait) {
    html {
        font-size: 1.8vh;
        letter-spacing: calc(var(--ls) * 1em);
        --border: 1px;
    }

   
    .diffGray {
        mix-blend-mode: difference;
        /* --color: #999 !important; */
        color: var(--contrast);
    }

    h1, .sizeBig {
        font-size: 3.5rem;
    }

    h2, .sizeMedium {
        font-size: 2.0rem;
    }


    .vLine::after {
        display: none;
    }

    .vLine2::after {
        display: none;
    }


    .layout .textLeft {
        left: var(--m);
        width: calc(calc(100% - calc(2 * var(--m))) * 1);
        /* width: 100%; */
    }

    .layout .textRight {
        right: var(--m);
        width: calc(calc(100% - calc(2 * var(--m))) * 1);
        text-align: right;
    }


    .rGridSmallSmallBig {
        grid-template-rows: min-content min-content auto;
        height: 100%;
    }
    /* DEVIENT COMME THIRD ! */
    .layout .sizeQuarter {
        width: calc(calc(100% - calc(3 * var(--m))) / 2);
        height: auto;
        max-height: calc(calc(100% - calc(2 * var2(--m))));
    }
    .layout .sizeThird {
        width: calc(calc(100% - calc(3 * var(--m))) / 2);
        height: auto;
        max-height: calc(calc(100% - calc(2 * var(--m))));
    }

}