* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bee-scale: 0.5; --cube-scale: 0.5;
  --bee-front: url("https://raw.githubusercontent.com/ifariat/3D-CSS-Minecraft-s-Bee/main/front.png");
  --bee-back: url("https://raw.githubusercontent.com/ifariat/3D-CSS-Minecraft-s-Bee/main/back.png");
  --bee-left: url("https://raw.githubusercontent.com/ifariat/3D-CSS-Minecraft-s-Bee/main/left.png");
  --bee-right: url("https://raw.githubusercontent.com/ifariat/3D-CSS-Minecraft-s-Bee/main/right.png");
  --bee-top: url("https://raw.githubusercontent.com/ifariat/3D-CSS-Minecraft-s-Bee/main/top.png");
  --bee-bottom: url("https://raw.githubusercontent.com/ifariat/3D-CSS-Minecraft-s-Bee/main/bottom.png");
  --bee-antenna: url("https://raw.githubusercontent.com/ifariat/3D-CSS-Minecraft-s-Bee/main/antenna.png");
  --bee-wing: url("https://raw.githubusercontent.com/ifariat/3D-CSS-Minecraft-s-Bee/main/wing.png");
  --bee-leg: url("https://raw.githubusercontent.com/ifariat/3D-CSS-Minecraft-s-Bee/main/leg.png");
  --cube-sides: url("https://raw.githubusercontent.com/ifariat/3D-CSS-Minecraft-s-Bee/main/sides.jpg");
  --cube-top: url("https://raw.githubusercontent.com/ifariat/3D-CSS-Minecraft-s-Bee/main/top.jpg");
  --cube-bottom: url("https://raw.githubusercontent.com/ifariat/3D-CSS-Minecraft-s-Bee/main/bottom.jpg");
}
html, body { width: 100vw; height: 100vh; background: linear-gradient(360deg, #000, #04010C, #23052A, #511826); display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; font-family: 'Roboto', sans-serif; }
body::before { content: ""; position: absolute; width: 100%; height: 100%; background: url('https://i.imgur.com/d3hXLvP.png') repeat; opacity: 0.15; z-index: 1; pointer-events: none; }
.scene { perspective: 700px; transform-style: preserve-3d; width: 100%; display: flex; overflow: hidden; justify-content: center; align-items: center; z-index: 2; }
.bee, .cube { width: 400px; height: 400px; position: relative; transform-style: preserve-3d; display: flex; justify-content: center; align-items: center; animation: shake 8s linear infinite, spin 10s linear infinite; }
.bee_face, .cube_face { position: absolute; width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; filter: saturate(1.2); box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.7); }
.bee_face.front { background: var(--bee-front); transform: translateZ(140px); }
.bee_face.back { background: var(--bee-back); transform: translateZ(-140px) rotateY(180deg); }
.bee_face.right { background: var(--bee-right); transform: translateX(100px) rotateY(90deg); }
.bee_face.left { background: var(--bee-left); transform: translateX(-100px) rotateY(-90deg); }
.bee_face.top { background: var(--bee-top); transform: translateY(-100px) rotateX(90deg); }
.bee_face.bottom { background: var(--bee-bottom); transform: translateY(100px) rotateX(90deg); }
.antenna { position: absolute; width: 70px; height: 55px; background: var(--bee-antenna); }
.antenna_right { transform: translate3d(50px, -71px, 170px) rotateY(90deg); }
.antenna_left { transform: translate3d(-50px, -71px, 170px) rotateY(90deg); }
.leg { position: absolute; width: 30px; height: 50px; background: var(--bee-leg); }
.leg_right_one { transform: translate3d(50px, 125px, -30px); }
.leg_right_two { transform: translate3d(50px, 125px, 30px); }
.leg_right_three { transform: translate3d(50px, 125px, 90px); }
.leg_left_one { transform: translate3d(-50px, 125px, -30px); }
.leg_left_two { transform: translate3d(-50px, 125px, 30px); }
.leg_left_three { transform: translate3d(-50px, 125px, 90px); }
.wing { position: absolute; width: 300px; height: 200px; background: var(--bee-wing); }
.wing_right { transform: translate3d(150px, -1px, -65px) rotateY(90deg) rotateX(90deg) scaleX(-1); animation: fly 120ms infinite linear; }
.wing_left { transform: translate3d(-150px, -1px, 130px) rotateY(90deg) rotateX(90deg) scaleX(-1); animation: fly 120ms infinite linear reverse; }
.stinger { width: 50px; height: 30px; background-color: #1d1d25; transform: translateZ(-160px) rotateY(90deg); position: absolute; }
.cube_face.front { background: var(--cube-sides); transform: translateZ(150px); }
.cube_face.back { background: var(--cube-sides); transform: translateZ(-150px); }
.cube_face.right { background: var(--cube-sides); transform: translateX(-150px) rotateY(-90deg); }
.cube_face.left { background: var(--cube-sides); transform: translateX(150px) rotateY(90deg); }
.cube_face.top { background: var(--cube-top); transform: translateY(-150px) rotateX(90deg); }
.cube_face.bottom { background: var(--cube-bottom); transform: translateY(150px) rotateX(-90deg); }
@keyframes spin { 0%, 100% { transform: rotateY(0deg); } 50% { transform: rotateY(180deg); } }
@keyframes shake { 0%, 100% { transform: translateY(100px) rotateY(0deg); } 50% { transform: translateY(120px) rotateY(180deg); } }
@keyframes fly { 0%, 100% { transform: translateY(-1px) rotateX(90deg); } 50% { transform: translateY(-1px) rotateX(30deg); } }
