:root {
    --text-rgb: 20, 20, 20;
    --pineapple-rgb: 175, 138, 49;
    --pattern-bg: transparent;
    --pattern-line: rgba(var(--pineapple-rgb), 0.4);
    --emoji-size: 24vw;
}

@font-face {
    font-family: "Salade-De-Fruits-Raisin";
    src: url("fonts/salade-de-fruits-raisin-subset.woff2") format("woff2");
}

@font-face {
    font-family: "Basier-Mono-Circle-Medium";
    src: url("fonts/basiercirclemono-medium-webfont.woff2") format("woff2");
}

@font-face {
    font-family: "Basier-Mono-Circle-Semibold";
    src: url("fonts/basiercirclemono-semibold-webfont.woff2") format("woff2");
}

::selection {
    background-color: rgba(var(--pineapple-rgb), 0.9);
}

html {
    position: relative;
    background-color: rgba(var(--pineapple-rgb), 0.8);

    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        background-image: url("images/concrete-wall-2_1.avif");
        background-position: center;
        mix-blend-mode: screen;
        opacity: 0.45;
        z-index: -1;
    }
}

body {
    font-family: "Basier-Mono-Circle-Medium", fantasy;
    font-weight: 500;
    color: rgb(var(--text-rgb));
    margin: 0;
    counter-reset: row-counter;
    background-size: 6.25rem 6.25rem;
    background-position: center top;
    background-image: linear-gradient(
            45deg,
            var(--pattern-bg) 24%,
            var(--pattern-line) 25%,
            var(--pattern-line) 26%,
            var(--pattern-bg) 26%,
            var(--pattern-bg) 74%,
            var(--pattern-line) 75%,
            var(--pattern-line) 76%,
            var(--pattern-bg) 76%
        ),
        linear-gradient(
            -45deg,
            var(--pattern-bg) 24%,
            var(--pattern-line) 25%,
            var(--pattern-line) 26%,
            var(--pattern-bg) 26%,
            var(--pattern-bg) 74%,
            var(--pattern-line) 75%,
            var(--pattern-line) 76%,
            var(--pattern-bg) 76%
        );
}

main {
    padding-top: max(0.5rem, 3vw);
    padding-inline: max(0.5rem, 3vw);
    padding-bottom: max(3rem, 6vw);
}

h1 {
    position: relative;
    font-family: "Salade-De-Fruits-Raisin", monospace;
    font-size: min(4rem, 15.5vw);
    font-weight: 400;
    text-align: center;
    color: rgb(27, 86, 31);
    display: grid;
    grid-template-columns: auto minmax(min-content, auto) auto;
    align-items: center;
    justify-content: center;
    gap: 0.2em;
    margin-top: 0;
    margin-bottom: 1em;
}

h1 span {
    flex: 0 0 auto;
}

h1 span:last-of-type {
    transform: scaleX(-1);
}

h1:hover {
    cursor: pointer;
}

a {
    text-decoration-style: dotted;
    text-decoration-thickness: 0.2ex;
}

b,
strong,
th {
    font-family: "Basier-Mono-Circle-Semibold", monospace;
    font-weight: 400;
}

.table-wrap {
    max-width: 100dvw;
    overflow-x: auto;
}

table {
    overflow: scroll;
    border-collapse: collapse;
}

table,
th,
td {
    border: 0.0625rem solid;
}

th,
td {
    padding: 0.333em 1em;
    min-width: 6em;
}

th {
    position: relative;
    text-align: center;
    white-space: nowrap;
}

tr {
    position: relative;
}

thead tr {
    background-color: rgba(var(--pineapple-rgb), 0.6);
    mix-blend-mode: darken;
}

thead tr::before,
tbody tr::before {
    position: relative;
    display: table-cell;
    padding: 0.333em 0.666em;
    border: 0.0625rem solid;
    width: 2em;
    z-index: 2;
}

thead tr::before {
    content: "#";
}

tbody tr::before {
    counter-increment: row-counter;
    content: counter(row-counter);
}

tr:nth-of-type(even) {
    background-color: rgba(var(--pineapple-rgb), 0.3);
    mix-blend-mode: darken;
}

.week-no,
.film-name,
.film-year,
.chosen {
    text-align: left;
    white-space: nowrap;
}

.week-no {
    min-width: 5em;
}

.chosen {
    min-width: 8em;
}

th:hover {
    cursor: pointer;
}

th::after {
    content: "↓";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0.3em;
    color: transparent;
}

th.sorted span {
    text-decoration: underline;
    text-decoration-thickness: 0.2ex;
    text-underline-offset: 0.2ex;
}

th.sorted::after {
    color: currentColor;
}

th.sorted.asc::after {
    content: "↑";
}

td[class*="score"] {
    text-align: center;
}

td[class*="score"]::after {
    position: relative;
}

td[class*="score"]:not(:empty):not(.nw)::after {
    content: "%";
}

td[class*="score"]:empty::after {
    content: "?%";
    color: rgba(var(--text-rgb), 0.6);
}

td[class*="score"].nw:empty::after {
    content: "N/W";
    color: rgb(var(--text-rgb));
}

.emoji {
    font-size: var(--emoji-size);
    position: fixed;
    bottom: -10vw;
    left: calc(50% - calc(var(--emoji-size) / 2));
    will-change: transform;
    z-index: 2;
    opacity: 1;
    transition: opacity 500ms ease;
    transition-delay: 1s;
    pointer-events: none;
}

.emoji.show {
    opacity: 0;
}