@font-face {
  font-family: 'Bitso';
  src: url('assets/font/Bitso-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Bitso-bold';
  src: url('assets/font/Bitso-Bold.woff') format('woff');
}

@font-face {
  font-family: 'Bitso-black';
  src: url('assets/font/Bitso-Black.woff') format('woff');
}

html,
body {
  font-family: 'Bitso', 'Roboto', Arial, Helvetica, sans-serif;
  color: #191e23;
  overflow: hidden;
}

h1 {
  display: flex;
  font-size: 4vw;
  width: 40vw;
  margin: 0;
  position: absolute;
  left: 3vw;
  top: 3vh;
  font-family: 'Bitso-Black', 'Roboto', Arial, Helvetica, sans-serif;
  height: 10vw;
  align-items: center;
}

#mainWrapper {
  width: 100vw;
  height: 100vh;
  animation-name: background-wiggle;
  animation-iteration-count: infinite;
  background-image: url(/assets/images/Countdown-background-1.webp),
    url(/assets/images/Countdown-background-1.jpg);
  animation-duration: 0.7s;
  background-size: cover;
  transition: 0s ease;
}

@keyframes background-wiggle {
  from {
    background-image: url(/assets/images/Countdown-background-1.webp),
      url(/assets/images/Countdown-background-1.jpg);
  }

  to {
    background-image: url(/assets/images/Countdown-background-2.webp),
      url(/assets/images/Countdown-background-2.jpg);
  }
}

#agenda {
  position: absolute;
  top: 28vh;
  left: 4vw;
}

#agenda h2 {
  font-size: 2.5vw;
  font-family: 'Bitso-Bold', 'Roboto', Arial, Helvetica, sans-serif;
  margin-top: 7vh;
  margin-bottom: 1.6vh;
}

#agenda li {
  font-size: 1.2vw;
  margin: 0 0 1.2vh 0;
}

#videoWrapper {
  position: absolute;
  top: 2vh;
  right: 3vw;
  background-image: url('/assets/images/video-board.webp'),
    url('/assets/images/video-board.png');
  width: 45vw;
  height: 61.8vw;
  background-size: 100% 100%;
  padding-left: 2vw;
}

#framedVideo {
  width: 43.5vw;
  height: 24.46vw;
  margin-top: 4.5vw;
  margin-bottom: 1vh;
}

#videoWrapper h3 {
  font-size: 1.8vw;
  margin: 0;
}

#videoWrapper p {
  font-size: 1.2vw;
  margin: 0;
}

#countdown {
  position: absolute;
  background-image: url(/assets/images/countdown-board.webp),
    url(/assets/images/countdown-board.png);
  background-size: 100% 100%;
  width: 30vw;
  height: 21.78vw;
  bottom: -7vh;
  left: 20vw;
  padding: 0;
}

#countdownTerrain {
  position: absolute;
  background-image: url(/assets/images/Countdown-terrain.webp),
    url(/assets/images/Countdown-terrain.png);
  background-size: 100% 100%;
  width: 100vw;
  height: 11.5625vw;
  bottom: 0;
  left: 0;
  padding: 0;
}

#countdown #timer {
  font-size: 8vw;
  font-family: 'Bitso-Black', 'Roboto', Arial, Helvetica, sans-serif;
  margin: 0;
  width: 100%;
  text-align: center;
}

#countdown h4 {
  font-size: 2.5vw;
  font-family: 'Bitso-Black', 'Roboto', Arial, Helvetica, sans-serif;
  margin: 7vh 0 0 0;
  width: 100%;
  line-height: 2vw;
  text-align: center;
}

#countdownActions {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
  padding: 10px 50px;
  border-radius: 4px;
  border: 4px solid #191e23;
  max-height: 70vh;
  transition: 1s ease;
  overflow: auto;
}

#countdownActions:hover {
  transition: 0.3s ease;
  opacity: 1 !important;
}

#countdownActions label {
  display: flex;
  flex-direction: column;
  font-family: 'Bitso', 'Roboto', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 20px;
}

#countdownActions input,
#countdownActions textarea {
  background: #ffffff;
  border: 1px solid #d1d8df;
  border-radius: 4px;
  padding: 8px;
  width: 270px;
}

#countdownActions textarea {
  min-height: 200px;
}

#countdownActions input:hover,
#countdownActions textarea:hover {
  border: 1px solid #29ac00;
}

#countdownActions input:disabled,
#countdownActions textarea:disabled {
  color: #afbcc6;
  border: 1px solid #d1d8df;
  background: #f8f9fc;
}

#countdownActions input:focus,
#countdownActions textarea:focus {
  outline: 2px solid #29ac00;
}

.timeInputs {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

#countdownActions .timeInputs input {
  width: 120px;
}

#countdownActions button {
  margin-bottom: 20px;
  background-color: #29ac00;
  border: none;
  color: white;
  display: table;
  padding: 8px 24px;
  border-radius: 32px;
  font-family: 'Bitso-Bold', 'Roboto', Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 24px;
  text-shadow: 0px 0px 8px rgba(12, 15, 18, 0.35);
}

#countdownActions button#secondaryButton {
    margin-bottom: 20px;
    background-color: transparent;
    border: none;
    color: #098300;
    display: table;
    padding: 8px 24px;
    border-radius: 32px;
    font-family: 'Bitso-Bold', 'Roboto', Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 24px;
    text-shadow: none;
  }

  #countdownActions button#secondaryButton:hover{
    background-color: #EEF0F7;
  }

#countdownActions button.playing {
  background-color: #d11328;
}

#countdownActions button.playing:hover {
  background-color: #8f1320;
}

#countdownActions button:hover {
  background-color: #098300;
  cursor: pointer;
}