@keyframes flicker {
    0% {
        filter: brightness(1.05);
    }
    50% {
        filter: brightness(1.2);
    }
    100% {
        filter: brightness(1.1);
    }
}

#main_body {
    position: absolute;
    top: 0;
    overflow-x: auto;
    overflow-y: hidden;
    height: 100%;
    width: 100%;
}

/* HEADER ---------------------------------- */

#header {
    position: absolute;
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    min-width: 700px;
    height: calc(100% - 20px);

    pointer-events: none;
    overflow: hidden;

    z-index: 999;

    mix-blend-mode: difference;
}

#header img {
    width: 100%;
    pointer-events: none;
    user-select: none;

    image-rendering: pixelated;
}

/* CONTENT --------------------------------- */

#content {
    position: relative;

    width: calc(90% - max(15%, 100px));
    height: calc(90% - max(20%, 100px));
    min-width: 600px;
    margin-left: max(12%, 100px);
    margin-top: calc(max(12%, 100px) - 10px);
    padding: 20px;
    padding-bottom: 50px;

    overflow: auto;
}
.content_block {
    padding: 10px;

    background-image: var(--ledBackgroundBlack);
    background-size: 2px 2px;
}

.content_block h1, .content_block h2, .content_block p, .content_block button, .content_block a, .content_block li, .content_block img {
    mix-blend-mode: color-dodge;
}

.column {
    width: fit-content;
    display: inline-block;
}

#left {
    vertical-align: top;
    width: calc(40% - 20px);
}

#right {
    vertical-align: top;
    width: calc(60% - 20px);
    padding-left: 20px;
}

/* affiche event ------------------------------ */

#event_container {
    width: 100%;
    color: var(--lighterGrey);
}

#affiche_container {
    width: calc(100% - 20px);
    aspect-ratio: 210 / 297;
    padding-bottom: 20px;

    border-image: url('../SRC/IMAGES/bordure.png') 170 / 50px round;
}

#affiche_container img {
    width: 100%;
    height: 100%;
}

#event_description_container {
    width: 100%;
    margin-top: 10px;

    text-align: center;}

#event_description_container h1 {
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    padding: 0 20px;
    background-color: rgb(175, 175, 175);
    border-radius: 5px;

    border-image: url('../SRC/IMAGES/bordure.png') 100 / 40px round;
}

#event_description_container p {
    font-size: 1.2em;
}

/* EVENT ARCHIVE --------------------------------------- */

#event_archive_container {
    width: fit-content;
    margin-top: 10px;
    padding: 5px 10px;

    border-image: url('../SRC/IMAGES/bordure_classic.png') 150 / 5px round;
}

#archives_dropdown {
    position: relative;
    color: var(--lighterGrey);
    text-decoration: underline;
}

#archives_dropdown:hover, #archives a:hover {
    filter: brightness(1.05);
}

#archives_dropdown img, #archives_dropdown p {
    display: inline;
    font-size: 1.5em;
}

#archives_dropdown img {
    filter: brightness(0.8);
}

#archives ul {
    margin: 0;
    list-style: none inside;
}

#archives li::before {
    color: var(--lighterGrey);
    content: "- ";
}

#archives a {
    font-size: 1.2em;
    color: var(--lighterGrey);
}

#affiche_container:hover #event_description_container h1 {
    animation: flicker 0.1s infinite alternate;
}

#affiche_container img {
    animation: flicker 2s infinite alternate;
}

/* DESCRIPTION COLLECTIF ---------------------- */

#collectif_description_container {
    width: calc(100% - 20px);
    margin-top: 50px;

    color: var(--lighterGrey);

    border-image: url('../SRC/IMAGES/bordure.png') 170 / 50px round;
}

#collectif_description {
    padding: 10px;

    font-size: 1.3em;
}

.txtExaltat {
    filter: brightness(1.1);
    animation: flicker 0.2s infinite alternate;
}