*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 62.5%;
}

:root {
  --text-white: #fff;
  --color-gray: #E0E0E0;
  --color-gray-2: #898989;
  --color-gray-3: #666;
  --color-gray-4: #3D3D3D;
  --text-black: #000;
  --font-system-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100dvh;
  background: linear-gradient(134deg,rgba(255, 255, 255, 1) 0%, rgba(71, 71, 71, 1) 32%);
  font-family: var(--font-system-ui);
}

.main-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  /* border: 3px solid var(--text-black); */
  box-shadow: inset 0px 0px 4px 2px rgba(0, 0, 0, 0.5);
  box-shadow: -4px 5px 8px 0px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  width: 30rem;
  height: 60rem;
  color: var(--text-black);
  background-color: var(--text-white);
  padding: 2rem;
}

.main-container::after {
  content: "o o o o o o o o o o o o o o o o o o";
  position: absolute;
  font-size: 7px;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  width: 6px;
  height: auto;
  border-radius: 50%;
  background-color: none;
  border-color: var(--color-gray);
  border-width: 1px;
}

.title {
  font-size: 4rem;
  font-weight: 100;
  letter-spacing: 5px;
  color: var(--color-gray-4);
  /* text-shadow: -2px 2px 4px var(--text-black); */
}

.counter {
  font-size: 5rem;
  font-weight: 100;
  border: 1px dotted var(--color-gray-2);
  border-radius: 50%;
  width: 13rem;
  height: 13rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-gray-4);
}

.buttons {
  width: 80%;
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

.buttons__plus-minus {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.button {
  height: 5rem;
  border: 0px;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font-system-ui);
  display: flex;
  justify-content: center;
}

.button:active {
  transform: scale(0.98);
}

.buttons__start-stop {
  display: flex;
  justify-content: flex-start;
  gap: 2rem;
  margin-top: 1rem;
}

.button--plus,
.button--minus {
  font-size: 5rem;
  width: 5rem;
  background-color: var(--color-gray);
}

.button--start,
.button--stop {
  font-size: 3rem;
  color: var(--text-black);
  font-weight: 100;
  width: 10rem;
  align-items: center;
}

.button--start {
  background-color: var(--text-white);
  box-shadow: -4px 5px 8px 0px rgba(0, 0, 0, 0.5);
}

.button--stop {
  background-color: var(--text-white);
  box-shadow: -4px 5px 8px 0px rgba(0, 0, 0, 0.5);
}

.slider {
  margin: 2rem;
  width: 80%;
  color: var(--text-black);
  background-color: var(--text-white);
}

input[type=range] {
  appearance: none;
}

input[type=range]::-webkit-slider-runnable-track {
  height: 8px;
  background-color: var(--color-gray);
  border-radius: 4px;
}

input[type=range]::-webkit-slider-thumb {
  appearance: none;
  background: var(--color-gray-2);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-top: -6px;
}

input[type=range]::-moz-range-thumb {
  height: 20px;
  width: 20px;
  background-color: var(--color-gray);
  margin-top: -4px;
  border-radius: 50%;
}

input[type=range]::-moz-range-track {
  height: 8px;
  background: var(--color-gray);
  border-radius: 4px;
}