body {
  overflow: hidden;
  font-size: 100%;
  background-color: #777;
}

.common-docs {
  z-index: 1;
  text-justify: auto;
  position: fixed;
  top: 0;
  bottom: 0;
  transition-property: transform;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
  overflow: hidden;
}
#lua-docs {
  left: -10%;
  right: 50%;
}
#cs-docs {
  right: -10%;
  left: 50%;
}

#cs-docs::before, #lua-docs::before {
  content: "";
  background: url(bg.jpg) repeat;
  background-size: 80%;
  background-blend-mode: luminosity;
  filter: blur(2px);
  position: absolute;
  height: 200%;
  width: 200%;
}
#lua-docs::before {
  background-color: rgba(49, 49, 135, 1);
}
#cs-docs::before {
  background-color: rgba(105, 44, 120, 1);
}

.common-docs:hover {
  z-index: 2;
  font-size: 300%;
  transform: scale(1.05);
}

.inner-bg {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}
.inner-bg:hover {
  background-color: rgba(255, 255, 255, 0.35);
}

.inner-docs {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: radial-gradient(circle, #222, rgba(0, 0, 0, 0));
}

@media (min-width: 80em) {
  .inner-docs img {
    height: 30%;
    width: auto;
  }
  .common-docs {
    transform: skewX(-11deg);
  }
  #cs-docs::before, #lua-docs::before {
    transform: skewX(11deg);
  }
  .common-docs:hover {
    transform: skewX(-11deg) scale(1.05);
  }
  .inner-docs {
    transform: skewX(11deg);
  }
  .inner-docs img {
    height: 30%;
    width: auto;
  }
}
@media (max-width: 80em) {
  .common-docs {
    transform: skewX(-9deg);
  }
  #cs-docs::before, #lua-docs::before {
    transform: skewX(9deg);
  }
  .common-docs:hover {
    transform: skewX(-9deg) scale(1.05);
  }
  .inner-docs {
    transform: skewX(9deg);
  }
  .inner-docs img {
    height: 30%;
    width: auto;
  }
}
@media (max-width: 70em) {
  .common-docs {
    transform: skewX(0deg);
  }
  #cs-docs::before, #lua-docs::before {
    transform: skewX(0deg);
  }
  .common-docs:hover {
    transform: skewX(0deg) scale(1.05);
  }
  .inner-docs {
    transform: skewX(0deg);
  }
  .inner-docs img {
    height: auto;
    width: 50%;
  }
}
