ontime/client/src/features/viewers/presenter/PresenterView.module.css

.container__gray,
.container__grayFinished {
  background: radial-gradient(circle, #202020 0%, #121212 80%);
  height: 100vh;
  color: #fffd;
  font-size: 16px;
  padding: 1em;
}

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

.nowContainer,
.nextContainer {
  background-color: rgba(255, 255, 255, 0.05);
  padding: 1em 3em;
  border-radius: 4px;
  width: 40vw;
}

.nowContainer {
  position: absolute;
  bottom: 1em;
  left: 1em;
}
.nextContainer {
  position: absolute;
  bottom: 1em;
  left: calc(50% + 1em);
}

.title {
  color: #ddd;
  font-size: 2.5vw;
}
.subtitle,
.presenter {
  color: #aaa;
  font-size: 1.8vw;
}

.title:after,
.presenter:after,
.subtitle:after {
  content: '\200b';
}

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

.mainContainer,
.mainContainerFinished {
  margin: auto;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 40%;
  left: 50%;
  color: white;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.countdown,
.countdownBig {
  line-height: 1em;
  letter-spacing: 0.1em;
}

.countdown {
  font-size: 25vw;
}

.countdownBig {
  padding-top: 10vh;
  font-size: 30vw;
}

.progress {
  width: 80%;
  margin: auto;
  height: 1em;
  background-color: #333;
}

.progressed {
  width: 30%;
  height: 1em;
  background-color: #ddd;
}

.container__grayFinished {
  border: 1em solid #ff5353;
}

.finished {
  font-size: 23vw;
  font-weight: 600;
  color: #ff5353;
}

/* =================== 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: 2;
  opacity: 0;
}

.messageOverlayActive {
  opacity: 1;
}

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

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

.clockContainer {
  position: absolute;
  top: 2em;
  left: 2em;
}

.clock {
  font-size: 4vw;
  letter-spacing: 0.1em;
  color: #ddd;
}