index.css

body {
  background-color: #eff3f6;
}
.container {
  width: 655px;
  margin: auto;
  margin-bottom: 40px;
  background-color: #8472a1;
}
nav {
  text-align: center;
  padding-top: 40px;
  margin-bottom: 40px;
}
.stopwatchContainer {
  border: 5px solid greenyellow;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  margin: auto;
  box-shadow: 20px 20px 20px #000, inset 20px 20px 20px #000;
}
#hr {
  border-top: 1px solid none;
  margin: 40px 0 40px 0;
}
.button {
  margin: 5px;
  background-color: #336799;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  text-align: center;
  border-radius: 5px;
  box-shadow: 3px 3px;
}
#startButton {
  background-color: #cd5c5c;
}
#startButton:active {
  position: relative;
  top: 2px;
  left: 2px;
}
#pauseButton:active {
  position: relative;
  top: 2px;
  left: 2px;
}
#resumeButton:active {
  position: relative;
  top: 2px;
  left: 2px;
}
#resetButton:active {
  position: relative;
  top: 2px;
  left: 2px;
}
#startButton:hover {
  background-color: #ba1313;
}
#resumeButton {
  background-color: #79c942;
}
#resumeButton:hover {
  background-color: rgb(41, 70, 22);
}
#resetButton {
  background-color: #d81ca4;
}
#resetButton:hover {
  background-color: #610e49;
}
.button:hover {
  background-color: #113353;
}
.button:active {
  background-color: #1d3c58;
}
.button:focus-visible {
  outline: 14px dashed hotpink;
}
#stopwatch {
  margin-top: 130px;
  text-align: center;
  color: #79c942;
  font-size: 80px;
  text-shadow: 2px 2px 4px #000000;
}