body {
    background-color: var(--bg);
    color: var(--main);
    font-family: progress;
    font-size: var(--medium);
    line-height: var(--lineHeight);


    display: flex;
    flex-direction: column;
    align-items: center;
}

i,
em {
    font-style: italic;
}

b,
strong {
    font-weight: 900;
    font-variant: small-caps;
}

sub {
    vertical-align: sub
}

sup {
    vertical-align: super
}

sub,
sup {
    font-size: .83em
}

.superuser {
    position: fixed;
    z-index: 1000;
    left: 0px;
    bottom: 0px;
    background-color: red;
    width: 25%;

}

q {
    quotes: "«\00A0" "\00A0»";
}

q::before {
    content: open-quote;
}

q::after {
    content: close-quote;
}

/* --------------------------------------- Blur */
.blurredLayer {
    top: 0px;
    left: 0px;
    position: fixed;
    filter: blur(10em);
    z-index: -10;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    transform-origin: 50% 50%;
    transform: scale(1.3);
    pointer-events: none;
}

.blurredLayer img {
    mix-blend-mode: difference;
}

.clone {
    position: absolute;
    display: block;
    transform-origin: 50% 50%;
    transform: scale(1);
}

.logos a:hover:has(img) {
    opacity: 0.5;
}

.logos img {
    object-fit: contain;
}

.filler.left {
    position: fixed;
    left: 25vh;
    top: 10vh;
    transform: translate(-50%, -50%);
    height: 100vh;
    width: 100vh;
    z-index: -1;
    opacity: 0;
}

.filler.right {
    position: fixed;
    right: 25vh;
    top: 10vh;
    width: 100vh;
    transform: translate(50%, -50%);
    height: 100vh;
    z-index: -1;
    opacity: 0;
}

.filler.bottom {
    position: fixed;
    left: 50vw;
    bottom: 10vh;
    width: 100vh;
    transform: translate(-50%, 50%);
    height: 100vh;
    z-index: -1;
    opacity: 0;
}

.filler.center {
    position: fixed;
    left: 50vw;
    top: 50vh;
    width: 100vh;
    transform: translate(-50%, -50%);
    height: 100vh;
    z-index: -1;
    opacity: 0;
}

/* --------------------------------------- Intro */
.intro {
    position: fixed;
    display: block;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* --------------------------------------- Nav */

.mainTitle {
    text-decoration: none !important;
}

header::after {
    content: "";
    border-bottom: 1px solid var(--main);
    position: absolute;
    width: var(--c10);
    bottom: 0px;
}

footer::before {
    content: "";
    border-bottom: 1px solid var(--main);
    position: absolute;
    width: var(--c10);
    top: 0px;
}

header {
    top: 0px;
    width: 100vw;
    position: fixed !important;
    /* z-index: 1; */
    z-index: 2;
    /* border-width: 0px 0px 1px 0px; */
    background-color: var(--bg);
    /* min-height: calc(1 * var(--h)); */
    overflow: hidden;
    cursor: pointer;
}

.navH {
    min-height: calc(1 * var(--h));
}


header nav {
    width: 100vw;
    display: none !important;
    padding-top: var(--h);
    padding-bottom: var(--h);
    /* position: fixed !important; */
    /* background-color: var(--bg); */
}



main {
    padding-top: calc(2* var(--h));
    padding-bottom: calc(1* var(--h));
    /* border-bottom: 1px solid var(--main); */
}

main:has(.filters) {
    padding-top: calc(3* var(--h));
}

.navBlur {
    position: absolute;
    z-index: -1;
    width: 150vw;
    height: 150vw;
    left: 50%;
    top: 0px;
    transform: translate(-50%, -50%);
    filter: blur(10em);
    opacity: 0.5;
}

footer {
    position: relative;
    padding-top: calc(1* var(--h));
    padding-bottom: calc(1* var(--h));
}

header .closingLayer {
    display: none;
    background-color: black;
    z-index: -2;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100vw;
    height: 100vh;
    opacity: 0.5;
}

header .menuIcon {
    text-align: right;
    cursor: pointer;
}

header:hover .menuIcon {
    color: var(--contrastLight);
}

header .menuIcon .cross {
    display: none;
}

/* header:hoverXX nav, */
header.open nav {
    display: flex !important;
}

/* header:hoverXX .menuIcon .bars, */
header.open .menuIcon .bars {
    display: none;
}

/* header:hoverXX .menuIcon .cross, */
header.open .menuIcon .cross {
    display: block;
}

header.open .closingLayer {
    display: block;
}

/* --------------------------------------- Base */
.stickyInfos {
    position: sticky;
    top: calc(var(--h));
    height: min-content;
}

a {
    color: var(--main);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

hr {
    border: 1px solid white;
    border-width: 1px 0px 0px 0px;
    padding: 0px;
    margin: 0px;
}

.splitter,
.splitterTop {
    display: inline-block;
    position: relative;
    /* border-bottom: 1px solid var(--main); */
}

.splitter:after {
    content: "";
    position: absolute;
    border-bottom: 1px solid var(--main);
    /* width: calc(var(--c2) + var(--m)); */
    width: calc(100% + var(--c2) + var(--m));
    bottom: -1px;
    /* left: calc(-1 * (var(--c2) + var(--m))); */
    right: 0px;
}

.splitterTop:after {
    content: "";
    position: absolute;
    border-bottom: 1px solid var(--main);
    /* width: calc(var(--c2) + var(--m)); */
    width: calc(100% + var(--c2) + var(--m));
    top: 0px;
    /* left: calc(-1 * (var(--c2) + var(--m))); */
    right: 0px;
}



.socialPictos {
    font-size: var(--big);
}

.socialPictos a {
    text-decoration: none;
}

.socialPictos a:hover {
    color: var(--contrastLight);
}

.content a {
    text-decoration: underline;
}

.content {
    font-family: milo, serif;
    column-gap: var(--m);
    font-size: var(--small);
    line-height: var(--lineHeight);
}

.content a[href^="http://"]::after,
.content a[href^="https://"]::after {
    content: " \ecaf";
    font-family: 'remix' !important;
    font-style: normal;
    font-size: 0.7em;
    /* vertical-align: super */
}

.pre {
    white-space: pre-line;
    ;
}

.content.twoColumns {
    column-count: 2;
}

.content img {
    border-top: 1px solid var(--main);
    width: var(--c2);
    height: auto;
    display: block;
    /* margin-left: calc(var(--c1) + var(--m)); */
    /* text-align: center; */
}

.content h1 {
    font-size: var(--big);
    line-height: var(--lineHeight);
}

.content h2 {
    /* font-family: milo, serif; */
    font-size: var(--medium);
    line-height: var(--lineHeight);
}


.content ul {
    list-style: circle;
    padding-left: 1em;
}

form p {
    font-family: milo, serif;
    font-size: var(--medium);
    line-height: var(--lineHeight);
}

.content h1+h2,
.content h1+h2,
.content h1+img,
.content h1+p,
.content h1+blockquote,

.content h2+h1,
.content h2+h2,
.content h2+img,
.content h2+p,
.content h2+blockquote,

.content img+h1,
.content img+h2,
.content img+img,
.content img+p,
.content img+blockquote,

.content p+h1,
.content p+h2,
.content p+img,
.content p+p,
.content p+blockquote,

.content blockquote+h1,
.content blockquote+h2,
.content blockquote+img,
.content blockquote+p,
.content blockquote+blockquote {
    margin-top: calc(var(--lineHeight) / 1);
}

.content p,
.content ul,
.content ol {
    break-inside: avoid-column;

}


blockquote {
    font-style: italic;
    padding-left: 1em;
    border-left: 1px solid var(--main);
}

.blurContainer {
    position: relative;
    border: 1px solid white;
    cursor: pointer;
    border-width: 1px 0px 0px 0px;
    overflow: hidden;

}

.remix {
    font-family: remix;
}

.debug {
    position: fixed;
    right: 0px;
    bottom: 0px;
}

/* --------------------------------------- Left column */

.tags {
    display: flex;
    flex-direction: row;
    font-size: var(--small);
    line-height: var(--lineHeight);
    padding-top: var(--sm);
    gap: var(--sm);
    flex-wrap: wrap;
}

.tag {
    border: 1px solid white;
    border-radius: var(--sm);
    background-color: var(--bg);
    cursor: pointer;
    padding: var(--sm);
}

.tag {
    text-decoration: none !important;
}

.tag:hover {
    text-decoration: none !important;
    background-color: var(--contrast);
}

/* --------------------------------------- Filters */
.filters {
    position: fixed;
    top: calc(1 * var(--h) + var(--sm));
    top: calc(1 * var(--h));
    font-size: var(--small);
    /* line-height: var(0em); */
    z-index: 1;
    align-items: flex-start;
    /* line-height: var() !important; */
    line-height: var(--lineHeight);
    /* height: var(--small); */
}

.filters .filtersColumn {
    border: 1px solid white;
    /* border-top: none; */
    /* padding: var(--sm); */
    border-radius: var(--sm);
    border-top: 0px;
    border-radius: 0 0 var(--sm) var(--sm);
    /* border-radius: 0px 0px var(--sm) var(--sm); */
    background-color: var(--bg);
    cursor: pointer;
}

.filters .head {
    padding: var(--sm) 0;
}

.filters ul {
    padding-top: var(--lineHeight);
}

.filters ul li,
.filters .type {
    padding: var(--sm);
}

.filters ul li+li {
    margin-top: 1px;
}

.filters .filtersColumn .list {
    display: none;
    line-height: var(--lineHeight) !important;
}

.filters .filtersColumn.open .list {
    display: block;
}

.filters .filtersColumn .list li.selected {
    background-color: var(--contrast);
    border-radius: var(--sm);
}

/* .filters .filtersColumn .list li.selected:after {
    content: " x";
} */

.filters .filtersColumn .list li.selected:hover a {
    text-decoration: line-through;
}

.filters .ellipsis {
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: visible;
    text-overflow: ellipsis;
}

/* --------------------------------------- Events */


.event {
    /* display: block; */
    margin-bottom: var(--m);
    padding-top: var(--sm);
    justify-content: space-between;
}

.event p {
    font-size: var(--small);
    line-height: var(--lineHeight);
}

.eventSize1 {
    width: var(--c2);
    height: var(--c2);
}

.eventSize1 h2 {
    font-size: var(--medium);
    line-height: var(--lineHeight);
}

.eventSize2 {
    width: var(--c2);
    height: var(--c3);
}

.eventSize2 h2 {
    font-size: var(--inter);
    line-height: var(--lineHeight);
}

.eventSize3 {
    width: var(--c2);
    height: var(--c4);
}


.eventSize3 h2 {
    font-size: var(--big);
    line-height: var(--lineHeight);
}

.event {
    text-decoration: none !important;
    break-inside: avoid;
}

/* .eventSizeFull {
    width: var(--c);
} */


.blurNo {
    position: relative;
    display: block;
    /* filter: blur(1em); */
    /* transition: opacity 0.25s, filter 0.25s, object-fit 0.25s 0.25s; */
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
    /* z-index: -1; */
    /* opacity: 0.5; */
    object-fit: contain;
}

.blur,
.blurFix {
    position: relative;
    display: block;
    filter: blur(1em);
    transition: opacity 0.25s, filter 0.25s, object-fit 0.25s 0.25s;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    opacity: 0.5;
}

.event img {
    border: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.blurContainer:hover .blur {
    display: block;
    filter: blur(0em);
    overflow: hidden;
    opacity: 1;
    object-fit: contain;
    z-index: -1;
    /* object-fit: cover; */
}

.blurContainer h2,
.blurContainer p {
    opacity: 1;
    transition: opacity 0.25s;
}

.blurContainer:hover h2,
.blurContainer:hover p {
    opacity: 0;
}







@media screen and (orientation: portrait) {
    .splitter:after {
        width: calc(100%);
    }

    .splitterTop:after {
        width: calc(100%);
    }

    .content.twoColumns {
        column-count: 1;
    }

    .content img {
        width: var(--c8);
    }

    .eventSize1 {
        width: var(--c5);
        height: var(--c8);
    }

    .eventSize2 {
        width: var(--c5);
        height: var(--c10);
    }

    .eventSize3 {
        width: var(--c5);
        height: var(--c12);
    }

    .column {
        column-count: 2;
    }

    main:has(.filters) {
        padding-top: calc(6* var(--h));
    }
}