body{
  background-color: #333;
  color:aliceblue;

  margin: 0;
  padding: 0;
}
h1{
  text-align: center;
  line-height: 60px;

  padding: 0;
  margin: 0;

  color: black;
  font-size: 60px;
  font-weight: 900;
  text-shadow: -1px -1px 2.5px #fff, 1px -1px 5px #0ce8f4;  /* horizontal-vertical-opacity*/
}
p{
  color: aliceblue;
  font-family: "Roboto Mono", monospace;
  font-size: 15px;
  font-weight: 900;
}

.stopwatch{
  display: grid;
  justify-content: center;
  grid-row-gap: 25px;
  width: 100%;
  padding: 25px;
}

.outer-circle {
  display: flex;
  align-items: center;
  justify-content: center;

  border: 10px double rgb(119, 0, 255);
  border-radius: 50%;

  height: 310px;
  width: 310px;
  margin: 20px;
}

.inner-circle {
  display: flex;
  align-items: center;
  justify-content: center;

  border: 5px dotted rgb(255, 230, 0);
  border-radius: 50%;

  height: 275px;
  width: 275px;
  margin: 20px;
}

.timer {
  font-family: "Roboto Mono", monospace;
  font-size: 50px;
  margin: 20px;
  font-weight: 300;
}

.lapcounter{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 18px;
  font-weight: 600;
  color: rgb(0, 255, 50);
}

.controls {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

#resetBtn img{
  height: 48px;
  width: auto;
}
#lap img{
  transform: scale(1.1);
}

button{
  background: transparent;
  border: none;
  cursor: pointer;
  margin: 3px;
  padding: 0;
}
#stopBtn{
  display: none;
}