* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
}
body {
  min-height: 100%;
  transform-style: preserve-3d;
}
.box {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 400px;
  background: black;
  background: radial-gradient(bottom left, #3C3C3C, black 45%);
  border-radius: 10px;
  border: 1px solid rgb(33, 33, 33);
  border-bottom: 5px solid rgb(26, 26, 26);
  border-top: 1px solid gray;
  box-shadow: 0px 10px 24px -8px rgba(0, 0, 0, 0.8);
  &:before {
    content: "";
    background: rgb(22, 22, 22);
    border: 1px solid rgb(33, 33, 33);
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    box-shadow: 1px 4px 5px 0 rgba(0,0,0,.5) inset;
    position: absolute;
    width: 530px;
    height: 330px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: 20s anim infinite;
    animation-delay: 1s;
  }
  &:after {
    content: "";
    background: transparent;
    position: absolute;
    height: 100%;
    width: 100%;
    background: linear-gradient(45deg, transparent, rgba(180, 180, 180, .2)), url(/images/codepen-logo.svg) no-repeat center 98%;
    background-size: 100% 100%, 100px;
    box-shadow: 0 2px 5px 0 rgba(255, 255, 255, .2) inset;
    border-radius: 10px;
  }
}

@mixin bg($name, $position: false){
  @if($position == false){
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/#{$name}) center center no-repeat;
  } @else {
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/#{$name}) $position no-repeat;
  }
}

@keyframes anim {
  0% {
    @include bg('screen-sprite.png', 0 0);
  }
  13.66% {
    @include bg('screen-sprite.png', 0 0);
  }
  16.66% {
    @include bg('screen-sprite.png', -530px 0);
  }
  30.32% {
    @include bg('screen-sprite.png', -530px 0);
  }
  33.32% {
    @include bg('screen-sprite.png', -530px -330px);
  }
  46.98% {
    @include bg('screen-sprite.png', -530px -330px);
  }
  49.98% {
    @include bg('screen-sprite.png', 0 -330px);
  }
  63.64% {
    @include bg('screen-sprite.png', 0 -330px);
  }
  66.64% {
    @include bg('screen-sprite.png', 0 -660px);
  }
  80.33% {
    @include bg('screen-sprite.png', 0 -660px);
  }
  83.33% {
    @include bg('screen-sprite.png', -530px -660px);
  }
  98% {
    @include bg('screen-sprite.png', -530px -660px);
  }
  100% {
    @include bg('screen-sprite.png', 0 0);
  }
  
}