style.css

body{
    background: rgb(196, 219, 217);
    margin: 0;
}
.main-game{
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.genius{
    display: grid;
    grid-template-areas: 'verde vermelho'
        'amarelo azul';
        grid-gap: 10px;
        border: 1px solid #ffffff;
        background-color: #ffffff;
        border-radius: 100%;
        margin-top: 6%;
        width: 700px;
        height: 700px;
}
.blue{
    grid-area: azul;
    background: blue;
    border-bottom-right-radius: 100%;
}
.red {
    grid-area: vermelho;
    background: red;
    border-top-right-radius: 100%;
}
.yellow {
    grid-area: amarelo;
    background: yellow;
    border-bottom-left-radius: 100%;
}
.green {
    grid-area: verde;
    background: green;
    border-top-left-radius: 100%;
}
.selected{
    opacity: 0.8;
}