body {
  font-family: arial, sans-serif; }

.content {
  height: 5000px; }

.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0px;
  left: 0px; }

.box {
  -webkit-box-flex: none;
  -moz-box-flex: none;
  box-flex: none;
  -webkit-flex: none;
  -moz-flex: none;
  -ms-flex: none;
  flex: none;
  height: 100px;
  width: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 25px;
  color: #fff;
  background: #ff8330;
  will-change: transform; }
  .box:nth-of-type(2) {
    background: #E01B5D; }
  .box:nth-of-type(3) {
    background: #30FFFF; }
  .box:nth-of-type(4) {
    background: #B3FF30; }
  .box:nth-of-type(5) {
    background: #308AFF; }
  .box:nth-of-type(6) {
    background: #1BE059; }