@import url(https://fonts.googleapis.com/css?family=Megrim);
body {
  background: radial-gradient(circle at 50% 70%, #fbfbf8f9, #fefefc 60%, #fefbfb 100%);
  height: 100vh;
  margin: 0;
  overflow: hidden;
  padding: 0;
  width: 100vw;
}

/*
 * Ball
 */
.m8b {
  height: 300px;
  margin: 25vh auto;
  position: relative;
  width: 300px;
  z-index: 1;
}

.m8b__info {
  border: 1px solid white;
  margin-left: -110%;
  margin-top: 10%;
  padding: 20px;
  position: absolute;
  width: 80%;
}

.m8b__arrow {
  border: 0.5px solid white;
  color: white;
  margin: 10% calc( 100% - 20px);
  position: absolute;
  width: 25%;
  z-index: 2;
}

.m8b__arrow::before {
  border-radius: 50%;
  border: 1px solid white;
  content: "";
  height: 10px;
  margin: -6px 100%;
  position: absolute;
  width: 10px;
}

.m8b__title {
  color: white;
  font-family: "Megrim", cursive;
  font-size: 2em;
  margin-bottom: 10px;
}

.m8b__desc {
  color: white;
  font-family: monospace;
  font-size: 1.2em;
  line-height: 1.2;
}

.m8b--shake {
  -webkit-animation: shake 0.25s ease-out 6 !important;
          animation: shake 0.25s ease-out 6 !important;
}

@-webkit-keyframes shake {
  15% {
    transform: translate(10px, 10px);
  }
  30% {
    transform: translate(-10px, -10px);
  }
  45% {
    transform: translate(-10px, 10px);
  }
  60% {
    transform: translate(10px, -10px);
  }
}

@keyframes shake {
  15% {
    transform: translate(10px, 10px);
  }
  30% {
    transform: translate(-10px, -10px);
  }
  45% {
    transform: translate(-10px, 10px);
  }
  60% {
    transform: translate(10px, -10px);
  }
}
.m8b__ball {
  -webkit-animation: float 3s infinite;
          animation: float 3s infinite;
  background: #000;
  background: radial-gradient(circle at 50% 120%, #fffffd, #0a0a0a 80%, #000000 100%);
  border-radius: 50%;
  display: inline-block;
  height: 100%;
  position: relative;
  width: 100%;
}

@-webkit-keyframes float {
  50% {
    transform: translateY(10px);
  }
}

@keyframes float {
  50% {
    transform: translateY(10px);
  }
}
.m8b__8 {
  align-items: center;
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid transparent;
  display: flex;
  font-family: monospace;
  font-size: 4.5em;
  font-weight: 700;
  height: 50%;
  justify-content: center;
  margin: 15% auto;
  overflow: hidden;
  text-align: center;
  transition: background-color 2.5s ease-out, color 2.5s ease-out, font-size 0s 0.8s ease-out;
  width: 50%;
}

.m8b__8--answer {
  background-color: #000;
  border: 1px solid grey;
  color: #fff;
  font-size: 1.5em;
  position: relative;
  z-index: 2;
}

 */
.m8b__ball:before {
  filter: blur(5px);
  background: radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  bottom: 2.5%;
  content: "";
  height: 100%;
  left: 5%;
  opacity: 0.5;
  position: absolute;
  width: 90%;
  z-index: 2;
}

.m8b__ball::after {
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
  border-radius: 50%;
  content: "";
  filter: blur(15px);
  height: 100%;
  left: 15%;
  opacity: 0.6;
  position: absolute;
  top: 15%;
  transform: translateX(-40%) translateY(-40%) skewX(-20deg);
  width: 100%;
}

.m8b__shadow {
  -webkit-animation: floatShadow 3s infinite;
          animation: floatShadow 3s infinite;
  background: radial-gradient(circle at 50% 50%, rgba(250, 241, 2, 0.3), rgba(246, 241, 241, 0.05) 50%, rgba(0, 0, 0, 0) 70%);
  height: 100%;
  margin-top: -15%;
  position: absolute;
  transform: rotateX(80deg);
  width: 100%;
  z-index: 0;
}

@-webkit-keyframes floatShadow {
  50% {
    margin-top: -20%;
  }
}

@keyframes floatShadow {
  50% {
    margin-top: -20%;
  }
}
/*
 * Objects
 */
.object {
  border: 1px solid rgb(20, 20, 20);
  opacity: 0.2;
  position: absolute;
  z-index: 0;
}

.object--circle {
  border-radius: 50%;
}

.object--diamond {
  transform: rotate(45deg);
}

.object--circle:nth-child(1),
.object--square:nth-child(1),
.object--diamond:nth-child(1) {
  height: 30px;
  width: 30px;
}

.object:nth-child(1) {
  top: 79%;
  left: 32%;
  -webkit-animation-duration: 4823ms;
          animation-duration: 4823ms;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  -webkit-animation-name: oFillUp--1;
          animation-name: oFillUp--1;
}

.object--circle:nth-child(2),
.object--square:nth-child(2),
.object--diamond:nth-child(2) {
  height: 27px;
  width: 27px;
}

.object:nth-child(2) {
  top: 25%;
  left: 8%;
  -webkit-animation-duration: 4432ms;
          animation-duration: 4432ms;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  -webkit-animation-name: oFillUp--2;
          animation-name: oFillUp--2;
}

.object--circle:nth-child(3),
.object--square:nth-child(3),
.object--diamond:nth-child(3) {
  height: 11px;
  width: 11px;
}

.object:nth-child(3) {
  top: 62%;
  left: 49%;
  -webkit-animation-duration: 4373ms;
          animation-duration: 4373ms;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  -webkit-animation-name: oFillUp--3;
          animation-name: oFillUp--3;
}

.object--circle:nth-child(4),
.object--square:nth-child(4),
.object--diamond:nth-child(4) {
  height: 8px;
  width: 8px;
}

.object:nth-child(4) {
  top: 33%;
  left: 88%;
  -webkit-animation-duration: 4676ms;
          animation-duration: 4676ms;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  -webkit-animation-name: oFillUp--4;
          animation-name: oFillUp--4;
}

.object--circle:nth-child(5),
.object--square:nth-child(5),
.object--diamond:nth-child(5) {
  height: 8px;
  width: 8px;
}

.object:nth-child(5) {
  top: 61%;
  left: 89%;
  -webkit-animation-duration: 3600ms;
          animation-duration: 3600ms;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  -webkit-animation-name: oFillUp--5;
          animation-name: oFillUp--5;
}

.object--circle:nth-child(6),
.object--square:nth-child(6),
.object--diamond:nth-child(6) {
  height: 1px;
  width: 1px;
}

.object:nth-child(6) {
  top: 61%;
  left: 69%;
  -webkit-animation-duration: 4580ms;
          animation-duration: 4580ms;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  -webkit-animation-name: oFillUp--6;
          animation-name: oFillUp--6;
}

.object--circle:nth-child(7),
.object--square:nth-child(7),
.object--diamond:nth-child(7) {
  height: 29px;
  width: 29px;
}

.object:nth-child(7) {
  top: 39%;
  left: 94%;
  -webkit-animation-duration: 3565ms;
          animation-duration: 3565ms;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  -webkit-animation-name: oFillUp--7;
          animation-name: oFillUp--7;
}

.object--circle:nth-child(8),
.object--square:nth-child(8),
.object--diamond:nth-child(8) {
  height: 18px;
  width: 18px;
}

.object:nth-child(8) {
  top: 25%;
  left: 40%;
  -webkit-animation-duration: 4192ms;
          animation-duration: 4192ms;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  -webkit-animation-name: oFillUp--8;
          animation-name: oFillUp--8;
}

.object--circle:nth-child(9),
.object--square:nth-child(9),
.object--diamond:nth-child(9) {
  height: 15px;
  width: 15px;
}

.object:nth-child(9) {
  top: 32%;
  left: 85%;
  -webkit-animation-duration: 3236ms;
          animation-duration: 3236ms;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  -webkit-animation-name: oFillUp--9;
          animation-name: oFillUp--9;
}

.object--circle:nth-child(10),
.object--square:nth-child(10),
.object--diamond:nth-child(10) {
  height: 21px;
  width: 21px;
}

.object:nth-child(10) {
  top: 42%;
  left: 11%;
  -webkit-animation-duration: 2420ms;
          animation-duration: 2420ms;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  -webkit-animation-name: oFillUp--10;
          animation-name: oFillUp--10;
}

.object--circle:nth-child(11),
.object--square:nth-child(11),
.object--diamond:nth-child(11) {
  height: 9px;
  width: 9px;
}

.object:nth-child(11) {
  top: 70%;
  left: 12%;
  -webkit-animation-duration: 4725ms;
          animation-duration: 4725ms;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  -webkit-animation-name: oFillUp--11;
          animation-name: oFillUp--11;
}

.object--circle:nth-child(12),
.object--square:nth-child(12),
.object--diamond:nth-child(12) {
  height: 12px;
  width: 12px;
}

.object:nth-child(12) {
  top: 40%;
  left: 19%;
  -webkit-animation-duration: 4172ms;
          animation-duration: 4172ms;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  -webkit-animation-name: oFillUp--12;
          animation-name: oFillUp--12;
}

.object--circle:nth-child(13),
.object--square:nth-child(13),
.object--diamond:nth-child(13) {
  height: 10px;
  width: 10px;
}

.object:nth-child(13) {
  top: 44%;
  left: 91%;
  -webkit-animation-duration: 1685ms;
          animation-duration: 1685ms;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  -webkit-animation-name: oFillUp--13;
          animation-name: oFillUp--13;
}

.object--circle:nth-child(14),
.object--square:nth-child(14),
.object--diamond:nth-child(14) {
  height: 25px;
  width: 25px;
}

.object:nth-child(14) {
  top: 75%;
  left: 7%;
  -webkit-animation-duration: 4048ms;
          animation-duration: 4048ms;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  -webkit-animation-name: oFillUp--14;
          animation-name: oFillUp--14;
}

.object--circle:nth-child(15),
.object--square:nth-child(15),
.object--diamond:nth-child(15) {
  height: 2px;
  width: 2px;
}

.object:nth-child(15) {
  top: 82%;
  left: 82%;
  -webkit-animation-duration: 800ms;
          animation-duration: 800ms;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  -webkit-animation-name: oFillUp--15;
          animation-name: oFillUp--15;
}

.object--circle:nth-child(16),
.object--square:nth-child(16),
.object--diamond:nth-child(16) {
  height: 22px;
  width: 22px;
}

.object:nth-child(16) {
  top: 90%;
  left: 32%;
  -webkit-animation-duration: 1160ms;
          animation-duration: 1160ms;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  -webkit-animation-name: oFillUp--16;
          animation-name: oFillUp--16;
}

.object--circle:nth-child(17),
.object--square:nth-child(17),
.object--diamond:nth-child(17) {
  height: 13px;
  width: 13px;
}

.object:nth-child(17) {
  top: 59%;
  left: 72%;
  -webkit-animation-duration: 223ms;
          animation-duration: 223ms;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  -webkit-animation-name: oFillUp--17;
          animation-name: oFillUp--17;
}

.object--circle:nth-child(18),
.object--square:nth-child(18),
.object--diamond:nth-child(18) {
  height: 1px;
  width: 1px;
}

.object:nth-child(18) {
  top: 73%;
  left: 34%;
  -webkit-animation-duration: 4334ms;
          animation-duration: 4334ms;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  -webkit-animation-name: oFillUp--18;
          animation-name: oFillUp--18;
}

.object--circle:nth-child(19),
.object--square:nth-child(19),
.object--diamond:nth-child(19) {
  height: 30px;
  width: 30px;
}

.object:nth-child(19) {
  top: 11%;
  left: 99%;
  -webkit-animation-duration: 1466ms;
          animation-duration: 1466ms;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  -webkit-animation-name: oFillUp--19;
          animation-name: oFillUp--19;
}

.object--circle:nth-child(20),
.object--square:nth-child(20),
.object--diamond:nth-child(20) {
  height: 2px;
  width: 2px;
}

.object:nth-child(20) {
  top: 85%;
  left: 8%;
  -webkit-animation-duration: 4440ms;
          animation-duration: 4440ms;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  -webkit-animation-name: oFillUp--20;
          animation-name: oFillUp--20;
}

.object--circle:nth-child(21),
.object--square:nth-child(21),
.object--diamond:nth-child(21) {
  height: 26px;
  width: 26px;
}

.object:nth-child(21) {
  top: 18%;
  left: 9%;
  -webkit-animation-duration: -82ms;
          animation-duration: -82ms;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  -webkit-animation-name: oFillUp--21;
          animation-name: oFillUp--21;
}

.object--circle:nth-child(22),
.object--square:nth-child(22),
.object--diamond:nth-child(22) {
  height: 20px;
  width: 20px;
}

.object:nth-child(22) {
  top: 19%;
  left: 80%;
  -webkit-animation-duration: 4098ms;
          animation-duration: 4098ms;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  -webkit-animation-name: oFillUp--22;
          animation-name: oFillUp--22;
}

.object--circle:nth-child(23),
.object--square:nth-child(23),
.object--diamond:nth-child(23) {
  height: 29px;
  width: 29px;
}

.object:nth-child(23) {
  top: 58%;
  left: 59%;
  -webkit-animation-duration: 2102ms;
          animation-duration: 2102ms;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  -webkit-animation-name: oFillUp--23;
          animation-name: oFillUp--23;
}

.object--circle:nth-child(24),
.object--square:nth-child(24),
.object--diamond:nth-child(24) {
  height: 2px;
  width: 2px;
}

.object:nth-child(24) {
  top: 56%;
  left: 73%;
  -webkit-animation-duration: 4856ms;
          animation-duration: 4856ms;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  -webkit-animation-name: oFillUp--24;
          animation-name: oFillUp--24;
}

.object--circle:nth-child(25),
.object--square:nth-child(25),
.object--diamond:nth-child(25) {
  height: 9px;
  width: 9px;
}

.object:nth-child(25) {
  top: 85%;
  left: 75%;
  -webkit-animation-duration: -1775ms;
          animation-duration: -1775ms;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  -webkit-animation-name: oFillUp--25;
          animation-name: oFillUp--25;
}

.object--circle:nth-child(26),
.object--square:nth-child(26),
.object--diamond:nth-child(26) {
  height: 23px;
  width: 23px;
}

.object:nth-child(26) {
  top: 49%;
  left: 23%;
  -webkit-animation-duration: 3830ms;
          animation-duration: 3830ms;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  -webkit-animation-name: oFillUp--26;
          animation-name: oFillUp--26;
}

.object--circle:nth-child(27),
.object--square:nth-child(27),
.object--diamond:nth-child(27) {
  height: 19px;
  width: 19px;
}

.object:nth-child(27) {
  top: 52%;
  left: 42%;
  -webkit-animation-duration: 842ms;
          animation-duration: 842ms;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  -webkit-animation-name: oFillUp--27;
          animation-name: oFillUp--27;
}

.object--circle:nth-child(28),
.object--square:nth-child(28),
.object--diamond:nth-child(28) {
  height: 1px;
  width: 1px;
}

.object:nth-child(28) {
  top: 71%;
  left: 60%;
  -webkit-animation-duration: 4636ms;
          animation-duration: 4636ms;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  -webkit-animation-name: oFillUp--28;
          animation-name: oFillUp--28;
}

.object--circle:nth-child(29),
.object--square:nth-child(29),
.object--diamond:nth-child(29) {
  height: 25px;
  width: 25px;
}

.object:nth-child(29) {
  top: 64%;
  left: 17%;
  -webkit-animation-duration: -133ms;
          animation-duration: -133ms;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  -webkit-animation-name: oFillUp--29;
          animation-name: oFillUp--29;
}

.object--circle:nth-child(30),
.object--square:nth-child(30),
.object--diamond:nth-child(30) {
  height: 24px;
  width: 24px;
}

.object:nth-child(30) {
  top: 42%;
  left: 75%;
  -webkit-animation-duration: 3530ms;
          animation-duration: 3530ms;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  -webkit-animation-name: oFillUp--30;
          animation-name: oFillUp--30;
}