style.css

:root {
  --dark-green: #0b5038;
  --dark-blue: #43456b;
  --dark-purple: #6e194a;
  --dark-brown: #876645;
  --light-blue: #7e90d6;
  --light-purple: #a82872;
  --light-brown: #b68049;
  --main-green: #28ab26;
  --main-red: #ff4b4b;
  --timer-output: black;
}
* {
  box-sizing: border-box;
}
body {
  font-family: 'Quantico', sans-serif;
}

.timer-container {
  max-width: 600px;
  max-height: 70vh;
  margin-top: 10vh;
  margin-left: auto;
  margin-right: auto;
  border-radius: 0.5rem;
  box-shadow: inset 0 0 10px #dcdcdc;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  overflow: hidden;
}
.timer-container > :first-child {
  margin-top: 2rem;
}
.main-timer-output {
  font-size: 3rem;
  color: var(--timer-output);
}
.main-timer-output > * {
  display: inline-block;
  width: 4rem;
}
.lap-item> :first-child{
  padding: 0 0.5rem;
  color: var(--dark-brown);
}

/*timer buttons*/
.timer-btns > * {
  padding: 1rem;
  border-radius: 0.2rem;
  border: 1px solid #999895;
  color: white;
  font-weight: 700;
}
.timer-btns > *:hover {
  cursor: pointer;
  box-shadow: inset 0 0 10px #716d64;
}
.start {
  background: var(--main-green);
}
.pause {
  background: var(--main-red);
}
.add-lap {
  background: var(--light-brown);
}
.clear-lap {
  background: var(--light-blue);
}
.reset {
  background-color: var(--light-purple);
}
.add-lap:active {
  background: var(--dark-brown);
}
.clear-lap:active {
  background: var(--dark-blue);
}
.reset:active {
  background: var(--dark-purple);
}
/*end timer buttons*/

/*laps*/
.laps {
  max-height: 100%;
  overflow: hidden;
}
.laps li {
  padding: 0.5rem 2rem 0.5rem 0.5rem;
}
.scroll {
  overflow-y: scroll;
}
/* width */
::-webkit-scrollbar {
  width: 5px;
}
/* Track */
::-webkit-scrollbar-track {
  background: #f7f7f7;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgb(228, 228, 228);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgb(214, 214, 214);
}