style.css

* {
    margin: 0;
    padding: 0;
}

:root {
    --s: 80px;
    /* size  */
    --m: 1px;
    /* margin */
    --f: calc(1.732 * var(--s) + 4 * var(--m) - 1px);
}

body,
html,
.container {
    width: 100vw;
    height: 100vh;
    /* overflow: hidden; */
}

.blurred {
    filter: blur(4px);
}

.hidden {
    display: none !important;
}

.container {
    display: flex;
    background-color: #252424;
    justify-content: center;
    align-items: center;
}

.hive-grid {
    margin: 50px;
    max-width: 900px;
    max-height: 1500px;
}

.hexagon {
    width: var(--s);
    margin: var(--m);
    height: calc(var(--s)*1.1547);
    display: inline-block;
    font-size: initial;
    clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
    background: #4d4a4a;
    margin-bottom: calc(var(--m) - var(--s)*0.2885);
}