body {
    background-color: lightblue;
}
* {
    font-family: arial sans-serif;
}
.grid {
    display: flex;
    align-items: stretch;
    width: 80vmin;
    height: 80vmin;
    margin: auto;
}

.grid > div {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 1px;
}

.grid > div > div {
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: blue;
    margin: 1px;
    border-radius: 1vmin;
}

.grid > div > div.unsel:hover {
    background-color: aqua;
}

.grid > div > div.sel {
    background-color: white;

}

.msg {
    position: fixed;
    text-align: center;
    top: 47vh;
    left: 0;
    width: 100%;
}

.won {
    background-color: rgba(120, 255, 120, 0.5);
}
.lost {
    background-color: rgba(255, 120, 0, 0.5);
}
.cfg {
    text-align: center;
    margin-bottom: 2rem;
    margin-top: 2rem;
}
.cfg label:last-of-type{
    margin-left: 1rem;
}
.hide {
    visibility: hidden;
}