* {
    background: #222;
    margin: 0;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    display: flex;
    flex-wrap: wrap;
    width: 300px;
    height: 300px;
}

.cell {
    flex: 31%;
    margin: 1%;
    background: #444;
    border-radius: 10%;
    transition: 0.15s;
}

.cell:hover {
    background: #555;
    transform: scale(102%);
}

.cell:active {
    transform: scale(98%);
    background: #555;
}

.cross {
    flex: 31%;
    margin: 1%;
    background: #666;
    border-radius: 31%;
    clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}

.circle {
    flex: 31%;
    margin: 1%;
    background: #666;
    clip-path: circle();
}

.end {
    display: none;
    padding: 1%;
    background: #688051;
    border-radius: 20px;
    position: absolute;
    opacity: 90%;
    color: #dbdbdb;
    font-size: 70px;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Gill Sans', sans-serif;
    cursor: pointer;
}