:root {
    --text: #000;
    --background: #fff;
    --primary: #0f0;
    --secondary: #f0f;
    --cell: #ff0;
    --activated: #0ff;
}

body {
    background-color: var(--background);
    color: var(--text);

    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    margin: 0;
}

* {
    overflow: hidden;
    /* border: 1px solid var(--text); */
}

.container {
    width: 90vh;
    height: 90vh;
    margin: auto;
    background-color: var(--primary);
    border-radius: 5%;
}

.segments {
    display: flex;
    gap: 1%;
    height: 3%;
    width: auto;
}

.segment {
    border-radius: 10%;
    width: 100%;
    height: 100%;
    background: var(--cell);
}

.activated {
    background: var(--activated);
}