:root {
  --break-color: #8CD5CA;
  --focus-color: #EED59F;
  --bg-color: #1E202F;
  --stage-color: var(--break-color);
  --clip-path: none;
}


.timer-box{
  height: 175px;
  width: 397px;
  padding: 5px;
}

.timer-bg {
  height: 100%;
  width: 100%;
  height: 175px;
  width: 397px;
  position: absolute;
  background-color: var(--bg-color);
  border-radius: 40px;
  outline-offset: -3px;
  outline: dotted 6px #534F72;
}
.timer-bg:before {
  content: "";
  position: absolute;
  height: 175px;
  width: 397px;
  border-radius: 40px;
  outline-offset: -3px;
  outline: dotted 6px var(--stage-color);
  border-radius: 40px;
  clip-path: var(--clip-path);
}


.timer-time {
  font-size: 100px;
  font-family: Inter;
  font-weight: 400;
  letter-spacing: 0%;
  text-align: center;
  color: var(--break-color);
}

.timer-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  width: 65%;
  margin: auto;
  margin-top: -2%;
  color: #FFFFFF;
}

.timer-details-stage img {
  height: 30px;
  margin-right: 5%;
}

.timer-details-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.timer-details-stage-text {
  font-size: 30px;
  font-family: Inter;
  font-weight: 400;
  letter-spacing: 6px;
  text-align: center;
}

.timer-details-block {
  font-size: 30px;
  font-family: Inter;
  font-weight: 400;
  letter-spacing: 0%;
  text-align: center;
}