style.css

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

body {
     --_color: #49a0dd;
     /* CSS PRIVATE Variables */
     font-family: Roboto, sans-serif;
     width: 12rem;
     padding: 10px;
     box-shadow: rgba(126, 205, 205, 0.4) 0px 0px 0px 2px, rgba(126, 205, 205, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}

#display {
     display: none;
}

#time {
     display: flex;
     gap: 10px;
     justify-content: center;
     color: var(--_color);
     margin-bottom: 5px;
}

#time>h1:nth-of-type(1)::after,
#time>h1:nth-of-type(2)::after {
     content: ":";
}

#time>h1:nth-of-type(3)::after {
     content: "s";
     font-family: Roboto, sans-serif;
     color: rgba(141, 141, 141, 0.644);
     font-size: 15px;
}

#btns {
     display: grid;
     grid-auto-flow: column;
     place-items: center;
}

button {
     padding: 4px 8px;
     cursor: pointer;
     border-width: 4px;
     background-color: #665f71;
     color: #fff;
     text-transform: uppercase;
     letter-spacing: 1px;
     font-weight: 600;
}

button:not(:disabled):active {
     transform: scale(0.96);
}


#inputs {
     display: grid;
     gap: 10px;
}

#timer-inputs {
     display: flex;
     gap: 5px;
}

#timer-inputs>* {
     text-align: center;
     padding: 2px 0px;
     font-size: 17px;
     text-transform: uppercase;
     width: 55px;
     outline: none;
     border: none;
     border-bottom: 3px solid var(--_color);
}


#timer-inputs>*::placeholder {
     text-align: center;
}