body {
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    color: red;
    height: 100vh;
    background-color: rgb(32, 32, 32);
}

h1 {
    margin-top: 8px;
}

#cell-holder {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    aspect-ratio: 1 / 1;
    height: 75%;
    gap: 8px;
    transform: rotate(var(--angle));
}

.cell {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: xx-large;
    /* background: lightgray; */
    overflow-wrap: anywhere;
    transform: rotate(calc(var(--angle) * -1)) rotate3d(0, 1, 0, calc(var(--angle) * e));
    background-image: url("bat2.png");
    background-size: contain;
    background-repeat: no-repeat;
    /* background-color: rgba(32, 32, 32, .5); */

}

.bat .cell {
    transform: rotate(calc(var(--angle) * -1)) rotate3d(-1, 1, 0, calc(var(--angle) * e));
    background-image: url("bat.png");
    background-color: transparent;
}

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

#static {
    position: absolute;
    background-image: repeating-radial-gradient(transparent, transparent, black, white .0085px);
    width: 300vw;
    height: 100%;
    mix-blend-mode: difference;
    transform: translateX(calc(var(--random) * -200vw))
}


#static-holder {
    overflow: hidden;
    position: absolute;
    pointer-events: none;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.grow {
    flex-grow: 1;
}

#bat-button {
    display: block;
    width: 100%;
    justify-self: end;
    font-size: xx-large;
    padding: 1em 0;
    color: red;
    background-color: slategray;
}

#jumpscare-holder {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: absolute;
    pointer-events: none;
    width: 100%;
    height: 100%;
    z-index: 1;
}

#jumpscare {
    background-image: url("bat2.png");
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    position: absolute;

    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10em;
}

.bat #jumpscare {
    background-image: url("bat.png");
}

.hidden {
    visibility: hidden;
}

#thunder {
    background: white;
    opacity: 0;
    transition: opacity .1s;

    z-index: 3;
    position: absolute;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

#thunder.thunder {
    opacity: 1;
    transition: opacity 0s;
}