Code CSS_suite

style.css

    .controls{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap:160px;
    }

    .start-break{
        display: flex;
    }

    .reset,
    .start,
    .break {
        background-color: var(--primary-color);
    }
    .reset:hover,
    .start:hover,
    .break:hover {
        background-color: var(--primary-hover);
    }

    .reset,
    .start,
    .break{
        width: var(--button-width);
        height: var(--button-height);
        border-radius: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }


    .start{
        z-index: 1;
        position: relative;
    }
    .reset{
        z-index: 1;
    }

    #start, 
    #break,
    #reset{
        width: var(--button-width);
        height: var(--button-height);
        border: none;
        cursor: pointer;
    }

    #start {
        background: url('https://api.iconify.design/material-symbols/play-arrow.svg') var(--background-settings);
    }
    #break{
        background: url('https://api.iconify.design/ic/baseline-pause.svg') var(--background-settings);
    } 
    #reset{
        background: url('https://api.iconify.design/ic/sharp-stop.svg') var(--background-settings);
    }