bees.css

:root {
  --width: 7%;
  --hue: 10deg;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
}
.hexagons {
  display: flex;
  justify-content: center;
}

#logo{
  position:relative;
  right: calc(var(--width) * -18);
  width: var(--width);
  color: green;
  transition: 10s all ease-in-out;
  transition-delay: 0.1s;
  animation-name: turn;
  animation-duration: 5s;
}
#logo:hover{
  filter: drop-shadow(1px 1px 3px red) contrast(200%) hue-rotate(-1440deg) brightness(300%) saturate(200%)invert(100%) sepia(10%);
  width: calc(var(--width) * 1.15);
  cursor: pointer;
  transform: rotate(720deg);
}

#Hexagon2{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * -17);
  --rotate: 60deg;
  --translate: 100%;
  animation-name:slide;
  animation-duration: 0.2s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
}
#Hexagon2:hover{
  cursor: not-allowed;
}
#Hexagon3{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * -16);
  --rotate: 120deg;
  --translate: 100%;
  animation-name:slide;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
}
#Hexagon3:hover{
  cursor: not-allowed;
}
#Hexagon4{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * -15);
  --rotate: 180deg;
  --hue: 30deg;
  --translate: 100%;
  animation-name:slide;
  animation-duration: 0.6s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
}
#Hexagon4:hover{
  cursor: not-allowed;
}

#Hexagon5{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * -14);
  --rotate: 240deg;
  --hue: 40deg;
  --translate: 100%;
  animation-name:slide;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
}
#Hexagon5:hover{
  cursor: not-allowed;
}

#Hexagon6{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * -13);
  --rotate: 300deg;
  --hue: 50deg;
  --translate: 100%;
  animation-name:slide;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;

}
#Hexagon6:hover{
  cursor: not-allowed;
}

#Youtube{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * -12);
  --rotate: 360deg;
  --hue: 60deg;
  --translate: 100%;
  animation-name:slide;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
}
#Youtube:hover{
  filter: drop-shadow(5px 5px 5px #666666) contrast(150%) hue-rotate(-10deg) brightness(120%);
  width: calc(var(--width) * 1.1);
  cursor: pointer;
}
#Hexagon8{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * -11);
  --rotate: 390deg;
  --hue: 70deg;
  --translate: 200%;
  animation-name:slide;
  animation-duration: 1.4s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
}
#Hexagon8:hover{
  cursor: not-allowed;

}
#Discord{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * -10);
  --rotate: 420deg;
  --hue: 80deg;
  --translate: 200%;
  animation-name:slide;
  animation-duration: 1.6s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;

}
#Discord:hover{
  filter: drop-shadow(5px 5px 5px #666) contrast(150%) hue-rotate(10deg) brightness(110%);
  width: calc(var(--width) * 1.1);
  cursor: pointer;
}
#Hexagon10{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * -9);
  --rotate: 450deg;
  --hue: 90deg;
  --translate: 200%;
  animation-name:slide;
  animation-duration: 1.8s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
}
#Hexagon10:hover{
  cursor: not-allowed;

}
#Hexagon11{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * -8);
  --rotate: 480deg;
  --hue: 100deg;
  --translate: 200%;
  animation-name:slide;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
}
#Hexagon11:hover{
  cursor: not-allowed;

}
#Twitter{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * -7);
  --rotate: 510deg;
  --hue: 110deg;
  --translate: 200%;
  animation-name:slide;
  animation-duration: 2.2s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
  transition-delay: 00.1s;
}
#Twitter:hover{
  filter: drop-shadow(5px 5px 5px #666666) contrast(150%) hue-rotate(-10deg) brightness(150%);
  width: calc(var(--width) * 1.1);
  transform: translateX(var(--width)) translateY(calc(var(--width) * -1)) saturate(4);
  cursor: pointer;
}
#Hexagon13{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * -6);
  --rotate: 540deg;
  --hue: 120deg;
  --translate: 200%;
  animation-name:slide;
  animation-duration: 2.4s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
}
#Hexagon13:hover{
  cursor: not-allowed;

}
#Hexagon14{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * -5);
  --rotate: 570deg;
  --hue: 130deg;
  --translate: 200%;
  animation-name:slide;
  animation-duration: 2.6s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
}
#Hexagon14:hover{
  cursor: not-allowed;

}
#Hexagon15{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * -4);
  --rotate: 600deg;
  --hue: 140deg;
  --translate: 200%;
  animation-name:slide;
  animation-duration: 2.8s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
}
#Hexagon15:hover{
  cursor: not-allowed;

}
#Reddit{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * -3);
  --rotate: 630deg;
  --hue: 150deg;
  --translate: 200%;
  animation-name:slide;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
  transition-delay: 00.1s;
}
#Reddit:hover{
  filter: drop-shadow(5px 5px 5px #666666) contrast(150%) hue-rotate(-10deg) brightness(120%);
  width: calc(var(--width) * 1.1);
  transform: translateX(var(--width)) translateY(calc(var(--width) * -1)) saturate(4);
  cursor: pointer;
}
#Hexagon17{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * -2);
  --rotate: 660deg;
  --hue: 160deg;
  --translate: 200%;
  animation-name:slide;
  animation-duration: 3.2s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
}
#Hexagon17:hover{
  cursor: not-allowed;

}
#Hexagon18{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * -1);
  --rotate: 690deg;
  --hue: 170deg;
  --translate: 200%;
  animation-name:slide;
  animation-duration: 3.4s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
}
#Hexagon18:hover{
  cursor: not-allowed;

}
#Hexagon19{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * 0);
  --rotate: 720deg;
  --hue: 180deg;
  --translate: 200%;
  animation-name:slide;
  animation-duration: 3.6s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
}
#Hexagon19:hover{
  cursor: not-allowed;

}
#Hexagon20{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * 1);
  --rotate: 740deg;
  --hue: 190deg;
  --translate: 300%;
  animation-name:slide;
  animation-duration: 3.8s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
}
#Hexagon20:hover{
  cursor: not-allowed;

}
#Hexagon21{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * 2);
  --rotate: 760deg;
  --hue: 200deg;
  --translate: 300%;
  animation-name:slide;
  animation-duration: 4s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
}
#Hexagon21:hover{
  cursor: not-allowed;

}
#Hexagon22{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * 3);
  --rotate: 780deg;
  --hue: 210deg;
  --translate: 300%;
  animation-name:slide;
  animation-duration: 4.2s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
}
#Hexagon22:hover{
  cursor: not-allowed;

}
#Hexagon23{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * 4);
  --rotate: 800deg;
  --hue: 220deg;
  --translate: 300%;
  animation-name:slide;
  animation-duration: 4.4s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
}
#Hexagon23:hover{
  cursor: not-allowed;

}
#Hexagon24{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * 5);
  --rotate: 820deg;
  --hue: 230deg;
  --translate: 300%;
  animation-name:slide;
  animation-duration: 4.6s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
}
#Hexagon24:hover{
  cursor: not-allowed;

}
#Hexagon25{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * 6);
  --rotate: 840deg;
  --hue: 240deg;
  --translate: 300%;
  animation-name:slide;
  animation-duration: 4.8s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
}
#Hexagon25:hover{
  cursor: not-allowed;

}
#Hexagon26{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * 7);
  --rotate: 860deg;
  --hue: 250deg;
  --translate: 300%;
  animation-name:slide;
  animation-duration: 5s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
}
#Hexagon26:hover{
  cursor: not-allowed;

}
#Hexagon27{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * 8);
  --rotate: 880deg;
  --hue: 260deg;
  --translate: 300%;
  animation-name:slide;
  animation-duration: 5.2s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
}
#Hexagon27:hover{
  cursor: not-allowed;

}
#Linkdn{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * 9);
  --rotate: 900deg;
  --hue: 270deg;
  --translate: 300%;
  animation-name:slide;
  animation-duration: 5.4s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
}
#Linkdn:hover{
  filter: drop-shadow(5px 5px 5px #666666) contrast(150%) hue-rotate(-10deg) brightness(120%);
  width: calc(var(--width) * 1.1);
  transform: translateX(var(--width)) translateY(calc(var(--width) * -1)) saturate(4);
  cursor: pointer;
}
#Hexagon29{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * 10);
  --rotate: 920deg;
  --hue: 280deg;
  --translate: 300%;
  animation-name:slide;
  animation-duration: 5.6s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
}
#Hexagon29:hover{
  cursor: not-allowed;

}
#Hexagon30{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * 11);
  --rotate: 940deg;
  --hue: 290deg;
  --translate: 300%;
  animation-name:slide;
  animation-duration: 5.8s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
}
#Hexagon30:hover{
  cursor: not-allowed;

}
#Hexagon31{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * 12);
  --rotate: 960deg;
  --hue: 300deg;
  --translate: 300%;
  animation-name:slide;
  animation-duration: 6s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
}
#Hexagon31:hover{
  cursor: not-allowed;

}
#Hexagon32{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * 13);
  --rotate: 980deg;
  --hue: 310deg;
  --translate: 300%;
  animation-name:slide;
  animation-duration: 6.2s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
}
#Hexagon32:hover{
  cursor: not-allowed;

}
#Hexagon33{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * 14);
  --rotate: 1000deg;
  --hue: 320deg;
  --translate: 300%;
  animation-name:slide;
  animation-duration: 6.4s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
}
#Hexagon33:hover{
  cursor: not-allowed;

}
#Hexagon34{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * 15);
  --rotate: 1020deg;
  --hue: 330deg;
  --translate: 300%;
  animation-name:slide;
  animation-duration: 6.6s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
}
#Hexagon34:hover{
  cursor: not-allowed;

}
#Github{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * 16);
  --rotate: 1040deg;
  --hue: 340deg;
  --translate: 300%;
  animation-name:slide;
  animation-duration: 6.8s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
}
#Github:hover{
  filter: drop-shadow(5px 5px 5px #666666) contrast(150%) hue-rotate(-10deg) brightness(120%);
  width: calc(var(--width) * 1.1);
  transform: translateX(var(--width)) translateY(calc(var(--width) * -1)) saturate(4);
  cursor: pointer;
}
#Hexagon36{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * 17);
  --rotate: 1060deg;
  --hue: 350deg;
  --translate: 300%;
  animation-name:slide;
  animation-duration: 7s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
}
#Hexagon36:hover{
  cursor: not-allowed;

}
#Hexagon37{
  width: var(--width);
  position:relative;
  right: calc(var(--width) * 18);
  --rotate: 1080deg;
  --translate: 300%;
  animation-name:slide;
  animation-duration: 7.2s;
  animation-fill-mode: forwards;
  transition: 1s all ease-in-out;
  transition: 1s all ease-in-out;
}
#Hexagon37:hover{
  cursor: not-allowed;

}

@keyframes slide {
  from {
    transform: none;
    filter: none;
  }

  to {
    transform: rotate(var(--rotate)) translateY(var(--translate));
  }
}
@keyframes turn {
  from {
    transform: none;
  }

  to {
    transform:rotate3d(1, 1, 1, 360deg);
  }
}