style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    font-size: 62.5%;
    --whitebg-fc: hsla(240, 6%, 21%, 1);
    --ff-body: "Roboto", sans-serif;
}

main {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    
}
.timer-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.8rem;
}

.timer {
    display: flex;
    font-family: var(--ff-body);
    font-size: clamp(8rem, 8rem + 3vw , 12.6rem);
    color: var(--whitebg-fc);
    padding: 0  5rem;
}

.hide {
    display: none;
}

button {
    background: none;
    border: none;
}

.controls {
    display: flex;
    gap: 2rem;
}
.controls button svg path {
    fill: var(--whitebg-fc);
}

.controls button svg {
    width: clamp(3rem, 3rem + 3vw, 4.8rem);
    height: auto;
}

.sound {
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    gap: clamp(1.8rem, 1.8rem + 3vw, 3.5rem );
}
.twoSounds {
    display: flex;
    gap: clamp(1.8rem, 1.8rem + 3vw, 3.5rem );
}

.sound button svg {
    width: clamp(6rem, 7rem + 3vw, 13.8rem);
    height: auto;
}

.twoSounds button.On svg path:nth-child(1) {
    fill: #02799D;
}
.twoSounds button.On svg path:nth-child(2) {
    fill: white;
}

.alert-error {
    position: absolute;
    background: var(--whitebg-fc);
    font-family: var(--ff-body);
    font-size: 1.6rem;
    color: #ffffff;
    top: 0;
    right: 0;
    left: 0;
    text-align: center;
    padding: .8rem 0;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-3rem);
    transition: transform .5s;
}

.alert-error.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (min-width: 800px ) {
    main {
        flex-direction: row;
        gap: clamp(10rem, 10rem + 3vw, 19rem);
    }
}