@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

body {
  margin: 0;
  height: 100vh;
  /*background: radial-gradient(circle at 50% 50%, #0b0f0a, #050566, #101819);*/
  background-image: url('honeycomb.jpg');
  font-family: 'Orbitron', sans-serif;
  color: #fff;
  overflow: hidden;
  perspective: 1000px;
}

.logo {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 3em;
  text-shadow: 0 0 10px #a4c639, 0 0 20px #a4c639, 0 0 30px #a4c639;
  animation: pulse 2s infinite alternate;
}

@keyframes pulse {
  0% { text-shadow: 0 0 10px #a4c639, 0 0 20px #a4c639, 0 0 30px #a4c639; }
  100% { text-shadow: 0 0 20px #a4c639, 0 0 40px #a4c639, 0 0 60px #a4c639; }
}

.panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(-10deg) rotateY(20deg);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 600px;
  justify-content: center;
  border: 1px solid #a4c639;
  padding: 3px;
  border-radius: 12px;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(5px);
  user-select: none;
}

.btn {
  background: linear-gradient(
    to bottom, 
    #747474 0%,
    #242424 55%,
    #010101 55%,
    #000000 100%
);

  
  padding: 20px 40px;
  text-align: center;
  font-size: 1.2em;
  color: #a4c639;
  cursor: pointer;
  box-shadow: inset -5px -5px 10px rgba(164,198,57,0.2),
              inset 5px 5px 10px rgba(164,198,57,0.2),
              0 5px 15px rgba(164,198,57,0.3);
  transition: all 0.2s ease;
}

.btn:hover {
  border: 2px solid #a4c639;
  transform: translateY(-5px) translateZ(15px) scale(1.05);
  box-shadow: 0 5px 20px rgba(164,198,57,0.7), inset 0 0 15px rgba(164,198,57,0.4);
}

.floor {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 200px;
  background: repeating-linear-gradient(
    to right,
    #a4c639 0 1px,
    transparent 1px 40px
  ), repeating-linear-gradient(
    to top,
    #a4c639 0 1px,
    transparent 1px 40px
  );
  opacity: 0.2;
  transform: rotateX(90deg) translateZ(100px);
}

footer {
  position: absolute;
  bottom: 0;
}

#bee1, #bee2, #bee3, #bee4, #bee5, #bee6, #bee7, #bee8, #bee9, #bee10, #bee11, #bee12, #bee13, #bee14, #bee15, #bee {
    position: absolute;
    width: 50px;
    transition: transform 0.2s linear;
    transform-origin: center center;
  }