@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;800&display=swap');

.container__gray,
.container__grayFinished {
  margin: 0;
  box-sizing: border-box; /* reset */
  overflow: hidden;
  width: 100%; /* restrict the page width to viewport */

  background: radial-gradient(circle, #202020 0%, #121212 80%);
  height: 100vh;
  color: #fffd;
  display: grid;
  grid-template-columns: 1fr 1fr 5vw 1fr 1fr;
  grid-template-rows: auto 1fr auto auto;
  grid-template-areas:
    ' clck .... .... .... ....'
    ' timr timr timr timr timr'
    ' prog prog prog prog prog'
    ' now  now  .... next next';
  gap: 1vw;
  padding: 1vw;
}

.container__graySimple,
.container__grayFinishedSimple {
  background: radial-gradient(circle, #202020 0%, #121212 80%);
  height: 100vh;
  color: #fffd;
  display: grid;
  grid-template-columns: 1fr 1fr 5vw 1fr 1fr;
  grid-template-rows: auto 1fr 30vh;
  grid-template-areas:
    ' clck .... .... .... ....'
    ' timr timr timr timr timr'
    ' prog prog prog prog prog';
  gap: 1vw;
}

.label {
  font-size: 1.3vw;
  color: #ff7597;
}
/* =================== TITLES ===================*/

.nowContainer,
.nextContainer {
  background-color: rgba(255, 255, 255, 0.05);
  padding: 1vh 2vw;
  border-radius: 1vw;
}

.nowContainer {
  grid-area: now;
}
.nextContainer {
  grid-area: next;
}

/* =================== MAIN ===================*/

.timerContainer,
.timerContainerFinished {
  grid-area: timr;
  justify-self: center;
  align-self: center;
  color: white;
}

.finished {
  font-size: 18vw;
  line-height: 18vw;
  font-weight: 600;
  color: #ff6969;
  padding: 0;
}

.countdown {
  opacity: 1;
}

.progressContainer,
.progressContainerPaused {
  grid-area: prog;
  width: 80%;
  margin: 0 auto;
  opacity: 1;
  transition: 0.5s;
}

.countdownPaused,
.progressContainerPaused {
  opacity: 0.6;
  transition: 0.5s;
}

.container__grayFinished {
  border: 1vw solid #ff6969;
}

/* =================== OVERLAY ===================*/

.messageOverlay,
.messageOverlayActive {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: -1;
  opacity: 0;
  transition: 0.5s;
}

.messageOverlayActive {
  opacity: 1;
  transition: 0.5s;
  transition-property: opacity;
  z-index: 2;
}

.message {
  width: inherit;
  padding: 2vw;
  position: absolute;
  top: 50%;
  left: 50%;
  color: white;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  font-size: 15vw;
  line-height: 30vh;
  text-align: center;
  font-weight: 600;
}

/* =================== MAIN ===================*/

.clockContainer {
  grid-area: clck;
  padding: 1vh 2vw;
}

.clock {
  font-family: 'Open Sans', sans-serif;
  font-size: 4vw;
  letter-spacing: 0.4vw;
  color: #ddd;
}