:root{
  --n: 1vmin;
  --bg: black;
  --cl: white;
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
  color: var(--cl);
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background: var(--bg);
  overflow: hidden;
}
body > #menu{
  position: relative;
  width: calc(var(--n) * 70);
  height: calc(var(--n) * 70);
  display: flex;
  justify-content: center;
  align-items: center;
}
body > #menu > #logobox{
  position: absolute;
  top: calc(50% - var(--n) * 10);
  left: calc(50% - var(--n) * 10);
  width: calc(var(--n) * 20);
  height: calc(var(--n) * 20);
  background: var(--cl);
  border-radius: 50%;
  transition: transform 0.8s linear, box-shadow 0.8s linear;
}
body > #menu.act > #logobox{
  transform: rotate(-360deg);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--cl);
}
body > #menu > #logobox > img{
  position: absolute;
  top: 12.5%;
  left: 12.5%;
  width: calc(var(--n) * 15);
  height: calc(var(--n) * 15);
}
body > #menu > span{
  position: absolute;
  width: calc(var(--n) * 15);
  height: calc(var(--n) * 15);
  border-radius: 50%;
  transform: rotate(calc(var(--i) * 360deg / 8 + 90deg)) translateX(calc(var(--n) * 0));
  transition: transform 0.28s linear calc((7 - var(--i)) * 0.08s);
}
body > #menu.act > span{
  transform: rotate(calc(var(--i) * 360deg / 8 - 90deg)) translateX(calc(var(--n) * 35));
  transition: transform 0.28s linear calc(var(--i) * 0.08s);
}
body > #menu > span > a{
  position: absolute;
  width: calc(var(--n) * 15);
  height: calc(var(--n) * 15); 
  background: var(--cl);
  border: white 2px solid;
  border-radius: 50%;
  color: var(--bg);
  text-decoration-line: none;
  font-size: calc(var(--n) * 4);
  font-weight: 900;
  text-align: center;
  line-height: calc(var(--n) * 13.6);
  transform: rotate(calc(var(--i) * 360deg / -8 + 90deg));
  transition: background-color linear 0.5s;
}
body > #menu.act > span > a:hover{
  color: var(--cl);
  background: var(--bg);
}