* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --text-number: hsla(240, 6%, 21%, 1);
    --bg-icons: hsla(240, 9%, 89%, 1);
    --bg-iconsClick: hsla(194, 97%, 31%, 1);
    --bg-page: hsla(0, 0%, 100%, 1);

    font-size: clamp(40%, 1% + 2vw, 62.5%);
}

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

    display: grid;
    height: 100vh;
    place-content: center;
}

#app {
    display: flex;
    justify-content: center;
    gap: 19.2rem;
}

.theTimer {
    display: grid;
    place-content: center;
}

#timer {
    display: flex;

    font-family: 'Roboto', sans-serif;
    text-align: center;
    font-size: 12rem;
}

#controls {
    display: flex;
    justify-content: space-between;
}

.ph-bold {
    background-color: transparent;
    border: 0;
    color: var(--text-number);

    cursor: pointer;

    font-size: 4.8rem;
}

html:not(.music-on) #ambient-music {
    display: grid;
    grid-template-columns: 14rem 14rem;
    gap: 3.2rem;
    place-items: center;
}

.ph {
    background-color: var(--bg-icons);
    font-size: 6rem;
    padding: 4rem;
    border-radius: 25%;

    cursor: pointer;
}

.music-on {
    background-color: var(--bg-iconsClick);
    color: var(--bg-page);
}

.running .ph-play-circle,
html:not(.running) .ph-pause-circle {
    display: none;
}