@font-face {
  font-family: "DroidSansMono", monospace;
  src: url("../assets/fonts/DroidSansMono.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

html {
  font-size: 16px; /* Base font size for rem calculations */
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background-color: #262729;
  font-family: "DroidSansMono", monospace;
  color: white;
}

.mainContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: calc(var(--vh, 1vh) * 100);
  /* Need to use height: 100vh so the container fills the screen and centers the stopwatch. But 100vh causes issues on mobile, so I used a solution combining CSS and JS to fix it.
  If I use height: 100vh, it works well on desktop and laptop devices, 
  but not on mobile devices, because it causes unwanted scroll.
  On mobile, 100vh includes the browser UI (like the address bar), 
  which leads to layout issues.
  This uses a custom CSS variable (--vh), set via JavaScript.
  There is another piece of JS code that works together with this CSS 
  to reflect the actual visible viewport height. */
}

.topContainer {
  display: flex;
  justify-content: center;
}

.unitContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.digits {
  font-size: 3.8rem;
  line-height: .75;
  user-select: none;
}

.digitsSeparator {
  margin-left: -12px;
  margin-right: -12px;
}

#cents {
  font-size: 1.9rem; 
}

.hmsLabel {
  font-size: 1.3rem;
  user-select: none;
}

/* Stopwatch buttons */

.bottomContainer {
  padding-top: 20px;
  display: flex;
  justify-content: center;
  gap: 15px;
}

.icon {
  width: 70%;
  height: 70%; /* Make the icon scale to 70% of the button's size */
}

.iconReset {
  fill: #feffff;
}

.btnStopWatch {
  width: 60px;
  height: 60px; /* Perfectly square button */
  border-radius: 50%; /* Perfect circle button*/
  border: solid #3b3c40 4px;
  background-color: #333438;
  transition: filter 300ms, transform 300ms;
  user-select: none;
  -webkit-tap-highlight-color: transparent; /* Removes the blue highlight that appears when tapping buttons on mobile browsers (especially on Chrome and Safari) */
}

#btnPlay,
#btnPause {
  background-color: #4cc2ff;
  border: none;
  cursor: pointer;
}

.cursorPointer {
  cursor: pointer;
}

.hide {
  display: none;
}

#btnPlay:hover,
#btnPause:hover {
  filter: brightness(0.8);
}

.unhighlighted {
  filter: brightness(0.8);
}

/*Responsive Design */

/* 1. Small mobiles (up to 479px)
  These styles are already applied without media queries
  because this is a mobile-first approach */

/* 2. Large mobiles and small tablets (480px – 767px) */

@media (min-width: 480px) and (max-width: 767px) {

  .digitsSeparator {
  margin-left: -15px;
  margin-right: -15px;
  }

  .digits {
  font-size: 5rem; 
  }

  #cents {
  font-size: 3rem;     
  }

  .hmsLabel {
  font-size: 1.7rem;
  }

  .btnStopWatch {
  width: 70px;  
  height: 70px;
  }

}

/* 3. Large tablets and small laptops (768px – 1023px) */

@media (min-width: 768px) and (max-width: 1023px) {

  .digitsSeparator {
  margin-left: -17px;
  margin-right: -17px;
  }

  .digits {
  font-size: 6rem; 
  }

  #cents {
  font-size: 4rem;     
  }

  .hmsLabel {
  font-size: 2.2rem;
  }

  .btnStopWatch {
  width: 80px;  
  height: 80px;
  }

}

/* 4. Desktop (1024px and up) */

@media (min-width: 1024px) {

  .digitsSeparator {
  margin-left: -19px;
  margin-right: -19px;
  }

  .digits {
  font-size: 7rem; 
  }

  #cents {
  font-size: 5rem;     
  }

  .hmsLabel {
  font-size: 2.7rem;
  }

  .btnStopWatch {
  width: 90px;  
  height: 90px;
  }

}