* {
    box-sizing: border-box;
}
body {
    background-color: black;
    color: #eeeeee;
    overflow-x: hidden;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100dvh;
    /* font-size: 2rem; */
}
main, footer {
    max-width: min(80rem, calc(100dvw - 2rem));
    width: calc(100dvw - 2rem);
    margin: 0 auto;
    padding: 1ch;
}
main {
    border-radius: 1ch;
    white-space: wrap;
    flex-grow: 1;
    box-shadow: 0 0 10px green;
    /* max-width: ; */
    margin: 1ch auto;
}
table {
    td {
        vertical-align: top;
        height: fit-content;
    }
    tr {
        height: fit-content;
    }
}
/* * {
    border: 1px solid white;
} */
header {
    overflow: hidden;
    width: 100vw;
}
/* header, body, footer {
} */
a {
    color: white;
    /* text-decoration: none; */
}
@media screen and (max-width: 500px) {
    .rainbow {
        display: none;
    }
}
.title {
    display: inline-block;
    width: 10ch;
    text-decoration: none;
}
/* .rainbow {
    user-select: none;
    :nth-child(10n+1) {
        --delay: -10s;
    }
    :nth-child(10n+2) {
        --delay: -9s;
    }
    :nth-child(10n+3) {
        --delay: -8s;
    }
    :nth-child(10n+4) {
        --delay: -7s;
    }
    :nth-child(10n+5) {
        --delay: -6s;
    }
    :nth-child(10n+6) {
        --delay: -5s;
    }
    :nth-child(10n+7) {
        --delay: -4s;
    }
    :nth-child(10n+8) {
        --delay: -3s;
    }
    :nth-child(10n+9) {
        --delay: -2s;
    }
    :nth-child(10n+10) {
        --delay: -1s;
    }
    span {
        animation: rainbow 10s infinite linear forwards var(--delay);
    }
    &.left, &.right {
        display: inline-flex;
        width: calc(50% - 5ch);
    }
    &.left {
        flex-direction: row-reverse;
        justify-content: end;
    }
} */
/* Na górze normalna wersja na dole wersja dla starych przeglądarek */
.rainbow {
    user-select: none;
}
.rainbow :nth-child(10n+1) {
    --delay: -10s;
}
.rainbow :nth-child(10n+2) {
    --delay: -9s;
}
.rainbow :nth-child(10n+3) {
    --delay: -8s;
}
.rainbow :nth-child(10n+4) {
    --delay: -7s;
}
.rainbow :nth-child(10n+5) {
    --delay: -6s;
}
.rainbow :nth-child(10n+6) {
    --delay: -5s;
}
.rainbow :nth-child(10n+7) {
    --delay: -4s;
}
.rainbow :nth-child(10n+8) {
    --delay: -3s;
}
.rainbow :nth-child(10n+9) {
    --delay: -2s;
}
.rainbow :nth-child(10n+10) {
    --delay: -1s;
}
.rainbow span {
    animation: rainbow 10s infinite linear forwards var(--delay);
}
.rainbow.left, .rainbow.right {
    display: inline-flex;
    width: calc(50% - 5ch);
}
.rainbow.left {
    flex-direction: row-reverse;
    justify-content: end;
}
@keyframes rainbow {
    0% {
        color: hsl(120, 100%, 0%);
    }
    5% {
        color: hsl(120, 100%, 0%);
    }
    10% {
        color: hsl(120, 100%, 0%);
    }
    15% {
        color: hsl(120, 100%, 0%);
    }
    20% {
        color: hsl(120, 100%, 0%);
    }
    25% {
        color: hsl(120, 100%, 5%);
    }
    30% {
        color: hsl(120, 100%, 15%);
    }
    35% {
        color: hsl(120, 100%, 35%);
    }
    40% {
        color: hsl(120, 100%, 50%);
    }
    45% {
        color: hsl(120, 100%, 50%);
    }
    50% {
        color: hsl(120, 100%, 50%);
    }
    55% {
        color: hsl(120, 100%, 40%);
    }
    60% {
        color: hsl(120, 100%, 30%);
    }
    65% {
        color: hsl(120, 100%, 20%);
    }
    70% {
        color: hsl(120, 100%, 10%);
    }
    75% {
        color: hsl(120, 100%, 0%);
    }
    80% {
        color: hsl(120, 100%, 0%);
    }
    85% {
        color: hsl(120, 100%, 0%);
    }
    90% {
        color: hsl(120, 100%, 0%);
    }
    95% {
        color: hsl(120, 100%, 0%);
    }
    100% {
        color: hsl(120, 100%, 0%);
    }
}

/* main {
    animation: open-main 1s;
} */
@keyframes open-main {
    0% {
        transform: scale(0.9);
        /* filter: contrast(0) sepia(100%) hue-rotate(60deg) contrast(2); */
    }
    100% {
        transform: scale(1);
    }
}