.container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-gap: 1em;
    height: 80%;
}

.cell {
    display: block;
    background-color: #34495e;
    border: #95a5a6;
    border-radius: 0;
    color: #ecf0f1;
    font-family: "Roboto Condensed Light", "Roboto Condensed", Roboto, sans-serif;
    font-size: calc((80vh - 4em ) / 15);
}
.cell:hover  {
    background: #2c3e50;
    border-color: #bdc3c7;
}


.cell:active {
    background: #7f8c8d;
    border-color: #bdc3c7;
}

a.hui {
    display: block;
    width: 300px;
    height: 100px;

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    padding: 1em;
    vertical-align: middle;

    text-align: center;

    background-color: #34495e;
    border: #95a5a6;
    border-radius: 0;
    color: #ecf0f1;
    font-family: "Roboto Condensed Light", "Roboto Condensed", Roboto, sans-serif;
}

a.hui:hover {
    color: currentColor;
    cursor: not-allowed;
    opacity: 0;
    text-decoration: none;
}

h1 {
    font-family: "Roboto Condensed", Roboto, sans-serif;
}