main.css

body {
    background-color: lightgrey;
}

.text-center {
    text-align: center;
}

.container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.cells {
    width: 40px;
    height: 40px;
    border: 1px solid;
    border-radius: 50%;
    margin: 10px 5px;
    cursor: pointer;
}

.hints-cell {
    border-color: rgb(235, 235, 235);
}

.rows {
    display: flex;
    border: 1px solid dimgray;
    padding: 0 10px;
}

.top-section {
    display: flex;
}

.divider-horizontal {
    border: 1px solid;
}

.colors-bar-container {
    display: flex;
    justify-content: space-between;
    margin: 5px;
}

.red {
    background-color: red;
    border-color: red;
}

.green {
    background-color: green;
    border-color: green;
}

.cyan {
    background-color: cyan;
    border-color: cyan;
}

.blue {
    background-color: royalblue;
    border-color: royalblue;
}

.yellow {
    background-color: yellow;
    border-color: yellow;
}

.maroon {
    background-color: maroon;
    border-color: maroon;
}

.pink {
    background-color: pink;
    border-color: pink;
}

.purple {
    background-color: purple;
    border-color: purple;
}

.color-cell--selected {
    border: 2px solid;
    width: 38px;
    height: 38px;
}

.guess-cell--selected {
    background: gray;
    cursor: default;
    border-color: gray;
    opacity: 0.2;
}