@font-face {
    font-family: hacker;
    src: url(terminal.ttf);
}

button {
    all: unset;
    background-color: rgb(32, 32, 32);
    padding: 16px;
}

button:hover {
    background-color: rgb(16, 16, 16);
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: black;
    color: rgb(0, 204, 0);
    font-family: hacker;
    font-size: medium;
    /* position: relative; */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* align-items: center; */
}


.header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    font-size: xx-large;
}

.cell-holder {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    width: 50%;
    aspect-ratio: 1/1;
    gap: 8px;
    /* transform: translateX(calc((sin(var(--angle) * 2) + 1)*50%)) rotate(var(--angle)); */
    user-select: none;
    font-size: xx-large;
}

.cell {
    background-color: lightgray;
    font-size: larger;
    overflow-wrap: anywhere;
    background-color: rgb(32, 32, 32);
    /* transform: rotate(calc(-1 * var(--angle))); */
    position: relative;
    /* --new-angle: calc(var(--angle) + var(--x) * pi * 10deg + var(--y) * e * 5deg); */
    --new-angle: calc(var(--angle) + (var(--x) * e + 1) * (var(--y) * pi + 1) * 5deg);
    transform: rotate3d(calc(cos(var(--new-angle)) / pi), calc(sin(var(--new-angle)) / e), 0, var(--new-angle));
}

.cell.empty {
    background: black;
}

.cell .inner {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;

    display: flex;
    justify-content: center;
    align-items: center;
    mix-blend-mode: difference;
    color: white;
}

.cell.empty .inner {
    opacity: 0;
    background-image: repeating-radial-gradient(circle at 17% 32%,
            white, black 0.000085px);
    transition: opacity .1s ease-in-out;
}

.cell.empty:hover .inner {
    opacity: 1;
}

.cell.selected {
    border: yellow solid 8px;
}


.no-margin {
    margin: 0 0;
}

.cell .rr {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    aspect-ratio: 1/1;
    object-fit: cover;
    filter: saturate(10000%)
}

.cell.empty .rr {
    display: none;
}

#start {
    /* position: absolute; */
    /* width: 100%; */
    /* height: 100%; */
    /* top: 0; */
    /* left: 0; */
    /* z-index: 1; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

.hidden {
    display: none !important;
}

#game {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}