body {
  background: #42A5F5;
  perspective: 1000px;
  transform-style: preserve-3d;
  overflow: hidden;
}

.comp {
  margin: 30vh auto 0;
  width: 600px;
  height: 600px;
}
.comp-screen {
  position: relative;
  margin: 0 auto;
  padding-top: 5px;
  width: 280px;
  height: 180px;
  background: #a6a6a6;
  border-radius: 5px 5px 0 0;
  transform: rotateX(0deg) translateY(0px) scale(1);
  transform-origin: 50% 100%;
  transition: transform 300ms ease-in-out;
  z-index: -2;
}
.comp-screen-cam {
  margin: 2px auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #00E676;
  animation: webcam 1000ms linear 800ms infinite;
}
.comp-screen-inner {
  margin: 5px auto;
  width: 90%;
  height: 85%;
  border-radius: 2px;
  background: black;
  overflow: hidden;
}
.comp-screen-inner p {
  position: absolute;
  top: 30px;
  left: 30px;
  color: #ccc;
  font-family: monospace;
}
.comp-screen-inner-shine {
  width: 100%;
  height: 200%;
  background: #333333;
  opacity: .6;
  transform: translateY(-130px) translateX(-120px) rotate(20deg);
  animation: shimmer 6s ease-in-out 800ms infinite;
}
.comp-screen-closed {
  transform: rotateX(-95deg) translateY(0px) scale(0.9);
}
.comp-top {
  margin: 0 auto;
  width: 300px;
  height: 0px;
  background: #ccc;
  border-radius: 5px 5px 2px 2px;
  transform: translateY(0px) scale(0.7);
  transition: all 300ms ease-in-out;
}
.comp-top-closed {
  transform: translateY(182px) scale(1);
  height: 10px;
}
.comp-base {
  z-index: 100;
}
.comp-base_shadow {
  margin: 0 auto;
  width: 342.85714px;
  height: 20px;
  transform: translateY(-10px);
  background: #0c80df;
  border-radius: 10px;
  z-index: -1;
}
.comp-base_comp {
  position: relative;
  margin: 0 auto;
  width: 300px;
  height: 20px;
  border-radius: 2px 2px 10px 10px;
  background: #ccc;
  z-index: 100;
}
.comp-base_comp_handle {
  margin: 0 auto;
  width: 75px;
  height: 10px;
  border-radius: 0 0 5px 5px;
  background: gray;
}

@keyframes webcam {
  0% {
    background: #000;
  }
  10% {
    background: #000;
  }
  11% {
    background: #00E676;
  }
  30% {
    background: #00E676;
  }
  31% {
    background: #000;
  }
  60% {
    background: #000;
  }
  61% {
    background: #00E676;
  }
  99% {
    background: #00E676;
  }
  100% {
    background: #000;
  }
}
@keyframes shimmer {
  0% {
    transform: translateY(-130px) translateX(-120px) rotate(20deg);
  }
  50% {
    transform: translateY(-130px) translateX(-80px) rotate(20deg);
  }
  100% {
    transform: translateY(-130px) translateX(-120px) rotate(20deg);
  }
}