BODY {
  margin: 0;
}

.rdm { position: absolute; width: 100%; height: 100%; background-size: 100% 100%; }

.t3d { position:absolute; left:50%; top:50%; margin-top:-125px; font-size:200px; font-family:'Fredoka One'; letter-spacing:-0.1em; color:#111; } 

@media (max-width: 767px) {
  .t3d {
    font-size: 100px; /* Устанавливаем размер шрифта 100px для мобильных устройств */
  }
} 

.bf div { position:absolute; background:transparent; text-align:center; width:1000px; height:250px; }

.t3d > div { transform-style:preserve-3d; animation:spin 5s linear infinite; }

@keyframes spin { 
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

@keyframes wobble { 
  0% { transform: rotateX(0deg) rotateX(0deg); }
  25% { transform: rotateX(-10deg) rotateX(10deg); }
  60% { transform: rotateX(20deg) rotateX(10deg); }
  75% { transform: rotateX(20deg) rotateX(-10deg); }   
  100% { transform: rotateX(0deg) rotateX(0deg); }
}

.t3d { transform-style:preserve-3d; transform:perspective(2000px); } 

.t3d > div > div { transform-style:preserve-3d; transform:translateX(-500px); }

.bf { transform-style:preserve-3d; transform:rotatex(0deg); animation:wobble 7s ease-out infinite; }

.bf div:nth-child(1) { transform:translateZ( 12px); }
.bf div:nth-child(2) { transform:translateZ(  9px); }
.bf div:nth-child(3) { transform:translateZ(  6px); }
.bf div:nth-child(4) { transform:translateZ(  3px); }
.bf div:nth-child(5) { transform:translateZ(  0px); }
.bf div:nth-child(6) { transform:translateZ( -3px); }
.bf div:nth-child(7) { transform:translateZ( -6px); }
.bf div:nth-child(8) { transform:translateZ( -9px); }
.bf div:nth-child(9) { transform:translateZ(-12px); }

.bf div {
  color: #111;
  text-shadow: 0px 0p 14px rgba(145,245,225,.3);
}
.bf div:first-child,
.bf div:last-child {color: #111;}
.bf div:first-child { 
  _color: rgba(145, 195, 245, 1);
  _color: rgba(255, 255, 95, 1);
  
  _background-clip:text;}

.bf div:nth-child(5) {}