@import url('https://fonts.googleapis.com/css2?family=Secular+One&display=swap');

.bg-blue-gradient {
  background: #8E2DE2;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to top, #4A00E0, #8E2DE2);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to top, #4A00E0, #8E2DE2);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  box-shadow: 0 0 15px 1px rgba(255, 255, 255, 0.5);
}

.result-parent div {
  position: relative !important;
}

.result-number {
  position: relative;
  display: block;
  background: #8E2DE2;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to top, #4A00E0, #8E2DE2);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to top, #4A00E0, #8E2DE2);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.3);
  text-align: center !important;
  border: 1px solid white;
  width: 80px !important;
  height: 80px !important;
  line-height: 80px;
  border-radius: 50%;
  letter-spacing: 3px;
  font-size: 46px;
  text-shadow: 0 0 3px #fff;
  font-family: 'Secular One', sans-serif;
  z-index: 10;
  /* transition is set to 'font-size 12s' */
}

.result-parent .box-rotate {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  border: 1px solid white;
  background-color: #ffffff;
  z-index: 1 !important;
  border-radius: 30%;
  animation: rotateanim 2s infinite;
  animation-timing-function: linear !important;
}

.tv-clock {
  background: #0f0c29;
  background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);
  background: linear-gradient(to right, #24243e, #302b63, #0f0c29);
  border: 1px dashed cyan;
  border-radius: 3rem;
}

@keyframes rotateanim {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(90deg);

  }

  50% {
    transform: rotate(180deg);

  }

  50% {
    transform: rotate(270deg);

  }

  100% {
    transform: rotate(360deg);
  }
}


@keyframes myanim {
  0% {
    font-size: 36px;
  }

  100% {
    font-size: 46px;
  }
}

body {
  background-color: #222;
}

#container {
  max-width: 1024px;
  margin: auto;
}

#monitor {
  background: #000;
  position: relative;
  border-top: 3px solid #888;
  /* margin: 5%; */
  padding: 2% 2% 4% 2%;
  border-radius: 10px;
  border-bottom-left-radius: 50% 2%;
  border-bottom-right-radius: 50% 2%;
  transition: margin-right 1s;
  height: 550px;
}

#monitor:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 3%;
  left: 36%;
  height: 0.5%;
  width: 28%;
  background: #ddd;
  border-radius: 50%;
  box-shadow: 0 0 3px 0 white;
}

#monitorscreen {
  position: relative !important;
  background-size: cover !important;
  background-position: top center;
  height: 100% !important;
  /* padding-bottom: 56.25%; */
  position: relative;
  overflow: hidden;
  background: #41295a;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #2F0743, #41295a);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #2F0743, #41295a);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

@media all and (min-width: 960px) {
  #monitor {
    -webkit-animation: tvflicker 0.2s infinite alternate;
    -moz-animation: tvflicker 0.5s infinite alternate;
    -o-animation: tvflicker 0.5s infinite alternate;
    animation: tvflicker 0.5s infinite alternate;
  }

  @-webkit-keyframes tvflicker {
    0% {
      box-shadow: 0 0 100px 0 rgba(200, 235, 255, 0.4);
    }

    100% {
      box-shadow: 0 0 95px 0 rgba(200, 230, 255, 0.45);
    }
  }

  @-moz-keyframes tvflicker {
    0% {
      box-shadow: 0 0 100px 0 rgba(225, 235, 255, 0.4);
    }

    100% {
      box-shadow: 0 0 60px 0 rgba(200, 220, 255, 0.6);
    }
  }

  @-o-keyframes tvflicker {
    0% {
      box-shadow: 0 0 100px 0 rgba(225, 235, 255, 0.4);
    }

    100% {
      box-shadow: 0 0 60px 0 rgba(200, 220, 255, 0.6);
    }
  }

  @keyframes tvflicker {
    0% {
      box-shadow: 0 0 100px 0 rgba(225, 235, 255, 0.4);
    }

    100% {
      box-shadow: 0 0 60px 0 rgba(200, 220, 255, 0.6);
    }
  }
}