@import url("https://fonts.googleapis.com/css?family=Archivo+Black");

body {
  font-family: "Archivo Black", sans-serif;
  background-color: #2c2c2c;
  // background: radial-gradient(ellipse at center, #444756 0%,#1d1b26 100%);
  background: radial-gradient(ellipse at center, #29382c 0%, #0c100d 100%);
  color: #fff;
}

html,
body {
  height: 100%;
}

.main-wrapper {
  position: relative;
  padding: 0;
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background: transparent no-repeat center/80%
    url("../../images/tv.png"); */
}

.loader {
  position: relative;
  font-size: 60px;
  text-align: center;
  margin: 0;
  padding: 0;
  z-index: 1;
}

.noise-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  overflow: hidden;
  z-index: 10;

  &:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.75) 100%
    );
  }
}

.noise {
  position: absolute;
  top: -600px;
  right: -600px;
  bottom: -600px;
  left: -600px;
  background: transparent
    url("../../images/noise.png") 0 0;
  background-size: 300px 300px;
  opacity: 0.30;
  animation: noise 1s steps(8, end) infinite both;
}

.tv-wrapper {
  position: relative;
  padding: 0;
  min-height: 100%;
  justify-content: center;
  align-items: center;
  background: transparent no-repeat center/80%
    url("../../images/tv.png");
}

@keyframes noise {
  0% {
    transform: translateX(0px, 0px);
  }
  10% {
    transform: translate(-100px, 100px);
  }
  20% {
    transform: translate(150px, -100px);
  }
  30% {
    transform: translate(-100px, 100px);
  }
  40% {
    transform: translate(100px, -150px);
  }
  50% {
    transform: translate(-100px, 200px);
  }
  60% {
    transform: translate(-200px, -100px);
  }
  70% {
    transform: translateY(50px, 100px);
  }
  80% {
    transform: translate(100px, -150px);
  }
  90% {
    transform: translate(0px, 200px);
  }
  100% {
    transform: translate(-100px, 100px);
  }
}