style.css

body {
    font-family: Arial, Helvetica, sans-serif;
}

header {
    text-align: center;
}

#simon-says {
    position: relative;
    margin: 0 auto;
    width: 400px;
    height: 400px;
    background-color: rgb(0, 0, 0);
    border-radius: 100%;
    user-select: none;
}

#score-board {
    position: absolute;
    top: 180px;
    width: 100%;
    text-align: center;
    color: white;
}

#red {
    border-color: rgb(200, 0, 0);
    border-width: 80px 0 0 80px;
    border-radius: 100% 0 0 0;
    top: 30px;
    left: 30px;
}

#red.light {
    border-color: rgb(255, 180, 180);
}

#blue {
    border-color: rgb(0, 0, 200);
    border-width: 80px 80px 0 0;
    border-radius: 0 100% 0 0;
    top: 30px;
    right: 30px;
}

#blue.light {
    border-color: rgb(180, 180, 255);
}

#yellow {
    border-color: rgb(200, 200, 0);
    border-width: 0 0 80px 80px;
    border-radius: 0 0 0 100%;
    left: 30px;
    bottom: 30px;
}

#yellow.light {
    border-color: rgb(255, 255, 200);
}

#green {
    border-color: rgb(0, 150, 0);
    border-width: 0 80px 80px 0;
    border-radius: 0 0 100% 0;
    right: 30px;
    bottom: 30px;
}

#green.light {
    border-color: rgb(200, 255, 200);
}

.loss {
    background-color: red !important;
}

.correct {
    background-color: green !important;
}

.segment {
    position: absolute;
    border-style: solid;
    display: inline-block;
    width: 80px;
    height: 80px;
    cursor: pointer;
}

.label {
    position: absolute;
    font-weight: bold;
    font-size: 30px;
}

.label.top {
    top: -20px;
}

.label.right {
    right: -20px;
}

.label.bottom {
    bottom: -20px;
}

.label.left {
    left: -20px;
}