*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}


body
{
display: flex; 
justify-content: center;
align-items: center;
min-height: 100vh;
background:  #000000;
}
.menu
{
position: relative;
width: 800px;
height: 600px;

display: flex;
justify-content: center;
align-items: center;
  
}




.menu li
{
position: absolute;
list-style: none;
left: 0;
transform-origin: 400px;
transition: 1.0s;
transition-delay: caic(0.4s*var(--i));
transform: rotate(0deg) translateX(355px);
z-index: 9;
}

.menu.active li
{
  transform: rotate(calc(360deg / 14* var(--i)));
}

.menu li a
{
display: flex;
justify-content: center;
align-items: center;
width: 90px;
height: 90px;
background:  #2bff00;
border-radius: 90%;
transform: rotate(calc(360deg / -14* var(--i)));
box-shadow:0 3px 4px rgba(0,0,0,0.15);
color: #fff;
transition: 0.5s;
font-size: 3em;
z-index: 9;
  
}
.menu li a:hover
{
color: #2bff00 ;
transform: scale(2);
box-shadow: inset 100px 0 0 0#fff;
  
}
.toggle
{
position: absolute;
width: 90px;
height: 90px;
background: #2bff00;
color: #fff;
display: flex;
justify-content: center;
align-items: center; 
z-index: 10;
border-radius: 50%;
cursor: pointer;
box-shadow:0 3px 4px rgba(0,0,0,0.30);
font-size: 3em;
transition: transform 1.25s;
}
.menu.active .toggle
{
transform: rotate(1turn);
}

#preloader{
  background: #000000 url(intro.gif) no-repeat center center;
  height: 100vh;
  width: 100%;
  position: fixed;
  z-index: 100;
  color:  #2bff00;
  text-align: center;
}

section
{
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap:2px;
  flex-wrap: wrap;
  overflow: hidden;
}
section::before
{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(#000000, #2bff00,#000000);
  animation: animate 5s linear infinite;
}
@keyframes animate
{
  0%
  {
    transform: translateY(-100%) ;
  }
  100%
  {
    transform: translateY(100%) ;
  }
}

section span
{
  position: relative;
  display: block;
  width: calc(6.25vw - 2px);
  height: calc(6.25vw - 2px);
  background: #000000;
  z-index: 1;
  transition: 1.5s;
}

section span:hover
{
  background: #2bff00;
  transition: 0s;
}

@media(max-width: 900px)
{
  section span
{
 
  width: calc(20vw - 2px);
  height: calc(20vw - 2px);

}
}