html {
    overscroll-behavior: none;
}

body {
    min-width: 100dvw;
    min-height: 100dvh;
    overflow-x: hidden;
    color: var(--mainColor);
    font-family: riforma, sans-serif;
    /* MACOS */
    -webkit-font-smoothing: antialiased;
    /* FIREFOX ON MACOS */
    -moz-osx-font-smoothing: grayscale;
}

body.viewport {
    height: 100%;
    min-height: auto;
}

/* -------------------------------------------------------------- Html tags */
h1 {
    font-size: var(--h1);
}

h2 {
    font-size: var(--h2);
    line-height: var(--lineH);
}

p {
    font-size: var(--font-size);
    line-height: var(--lineH);
}

p>a {
    font-size: var(--font-size);
    color: var(--drawColor);
    text-decoration: underline;
    text-decoration-color: var(--drawColor);
}

a {
    font-size: var(--h2);
    padding-top: 0 !important;
    color: var(--mainColor);
    text-decoration: none;
    text-align: end;
}

a svg {
    display: block;
    width: var(--svgSize);
    height: var(--svgSize);
    background-color: var(--mainColor);
}

em {
    font-style: italic;
}

/* -------------------------------------------------------------- Typo */
.endT {
    text-align: end;
}

.startT {
    text-align: start;
}

.pSmall,
.pSmall p,
.pSmall a {
    font-size: var(--pSmall);
}

.uppercase {
    text-transform: uppercase;
}

/* -------------------------------------------------------------- Layer */
a img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fit {
    width: fit-content;
}

.fixed {
    position: fixed;
    right: 0;
}

.fixed.navItems {
    top: var(--menuHeight);
}

/* -------------------------------------------------------------- Spacing */
.mTop {
    margin-top: var(--hGap);
}

.pLeft {
    padding-left: var(--hGap);
}

.pRight {
    padding-right: var(--hGap);
}

.pBottom {
    padding-bottom: var(--hGap);
}

.pTop {
    padding-top: var(--hGap);
}

.pGRight {
    padding-right: var(--g);
}

.fixB {
    padding-bottom: var(--sG);
}

.gap {
    padding: var(--vGap) var(--hGap) var(--vGap) var(--hGap);
}

.gap-1 {
    gap: var(--hGap);
}

.gap-3 {
    gap: var(--sG);
}

.gapStrke {
    gap: var(--stroke);
}

/* -------------------------------------------------------------- Draw */
.projectLine:nth-child(2n+1) {
    background-color: var(--middleColor);
}

.bgGray {
    background-color: var(--middleColor);
}

.bg {
    background-color: var(--bgColor);
}

.drawColor {
    background-color: var(--drawColor);
}

.colorLightGray,
.colorLightGray a {
    color: var(--lightGray);
    text-decoration-color: var(--lightGray);
}

.bars {
    gap: calc(0.75 * var(--barH));
    padding-left: var(--hGap);
}

.bars span {
    display: inline-block;
    max-width: 100%;
    height: var(--barH);
    background-color: var(--mainColor);
}

.pattern {
    --dotSize: 0.075rem;
    --spacing: 1rem;
    background-image: radial-gradient(circle, var(--drawColor) var(--dotSize), transparent var(--dotSize));
    /* background-size: 6.25% 10%; */
    background-size: 1.0416dvw 10%;
    background-repeat: repeat;
    background-position: 53.125% 55%;
}

.temp {
    background-color: yellow;
}

.temp1 {
    background-color: blue;
}

/* -------------------------------------------------------------- Behavior */
.hover,
.mDesk.hover.left::before {
    transition: background-color var(--animDuration) var(--animType),
        color var(--animDuration) var(--animType),
        border var(--animDuration) var(--animType);
}

.hover:hover {
    background-color: var(--middleColor);
    color: var(--mainColor);
}

.mDesk.hover.left:hover::before {
    border-color: var(--middleColor);
}

.pointer {
    cursor: pointer;
}

.switchImg .imgHover,
.switchImg:hover .imgDefault {
    display: none;
}

.switchImg:hover .imgHover {
    display: block;
}

.inactive,
.hidden {
    display: none !important;
}

.appGridColumn>* {
    transition: width var(--animDuration) var(--animType);
}

/* -------------------------------------------------------------- Components */
#header {
    position: relative;
    z-index: 300;
}

#header.isFixed {
    position: fixed;
    top: 0;
    background-color: var(--bgColor);
}

#header.isFixed+.main>div:nth-of-type(1) {
    margin-top: var(--menuHeight);
}

.sticky {
    position: sticky !important;
    /* top: var(--menuHeight); */
    top: calc(var(--menuHeight) + 0.5px);
    z-index: 300;
}

.sticky2 {
    position: sticky;
    top: calc(var(--menuHeight) + 1px + var(--h1) + var(--hGap));
    background-color: var(--bgColor);
}

#header.isFixed+.main>div {
    position: relative;
    background-color: var(--bgColor);
    z-index: 100;
}

.main {
    overflow-x: clip;
}

.mDesk {
    display: initial;
}

.mMob {
    display: none;
}

#footer {
    position: relative;
    overflow: hidden;
    z-index: 100;
}

#footer.isHome {
    position: fixed;
    bottom: 0;
}

.navItem {
    display: none;
    font-size: var(--h1);
}

.navItems.active>.navItem {
    display: flex;
}

.logo {
    font-size: var(--title);
    /* letter-spacing: -0.01em; */
    white-space: nowrap;
}

.project {
    height: calc(var(--c2) / var(--projImgRatio));
}

.projTitle {
    position: sticky;
    top: calc(var(--menuHeight) + 0.5px);
    z-index: 200;
    padding-bottom: var(--hGap);
}

.asWrapper {
    display: flex;
    width: 100%;
    text-align: start;
}

.cDesk {
    display: block;
}

.cMob {
    display: none;
}

/* .credits {
    background-color: var(--mainColor);

}

.credits>* {
    font-size: var(--pSmall);
    color: var(--bgColor);
} */

/* -------------------------------------------------------------- Img ratio */
.ratio-16-9 {
    aspect-ratio: 16 / 9;
    /* fallback */
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: cover;
}

.ratio-3-2 {
    aspect-ratio: 3 / 2;
    width: 100%;
}

/* -------------------------------------------------------------- Portrait */
@media screen and (orientation: portrait) {
    .rH3 {
        font-size: var(--h3);
        line-height: var(--lineHL);
    }

    .rP {
        font-size: var(--font-size);
        line-height: var(--lineH);
    }

    /* -------------------------------------------------------------- Spacing */
    .rP0 {
        padding: 0;
    }

    .rPLeft {
        padding-left: var(--hGap);
    }

    .rPTop {
        padding-top: var(--vGap);
    }

    .rmTop {
        margin-top: var(--hGap);
    }

    .rGap-3 {
        gap: var(--sG)
    }

    .rGap {
        gap: var(--hGap)
    }

    /* -------------------------------------------------------------- Components */
    #header {
        padding-top: var(--lowerMenu);
    }

    .mDesk {
        display: none;
    }

    .mMob {
        display: flex;
    }

    .projectLine {
        flex-direction: column-reverse !important;
    }

    .projectTitle {
        order: 2;
    }

    .project {
        min-height: calc(var(--c2) * var(--projImgRatio));
    }

    .categorie {
        min-height: calc(var(--c2) * var(--categoryRatio));
        height: auto;
    }

    .panLine {
        background-color: var(--middleColor) !important;
    }

    #footer>* {
        padding-top: calc(0.5 * var(--sG));
        /* padding-bottom: calc(0.5 * var(--sG)); */
    }

    .cDesk {
        display: none;
    }

    .cMob {
        display: block;
    }

    /* -------------------------------------------------------------- Draw */
    .pattern {
        background-size: 2dvw 6.25%;
        /* background-position: 55% 53.125%; */
        background-position: 0% 0%;
    }
}