@import url("https://fonts.googleapis.com/css2?family=Coiny&display=swap");
html, body {
  height: 100%; }

body {
  background: white; }

nav {
  display: block;
  position: fixed;
  width: 500px;
  height: 500px;
  user-select: none;
  transform: translate3d(25px, -25px, 0);
  transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9); }
  nav.open {
    transform: translate3d(0, 0, 0); }
  nav.top-right {
    top: -140px;
    right: -140px; }

.disc {
  position: absolute;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  font: 25px Coiny, cursive;
  line-height: 40px;
  padding-top: 10px;
  border-radius: 250px;
  transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 0, 1, 190deg);
  pointer-events: none;
  opacity: 0;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9), opacity 0.5s; }
  .disc div {
    transform: rotate(180deg); }
  .open .disc {
    pointer-events: auto;
    opacity: 1; }

.l1 {
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: #a770ef;
  transition-delay: 0s; }
  .open .l1 {
    transition-delay: 0s;
    transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
    opacity: 1; }
    .open .l1:hover {
      background: shade(#a770ef, 90%);
      color: #a770ef;
      transition-delay: 0s; }
    .open .l1:active {
      background: shade(#a770ef, 50%);
      color: #a770ef; }
    .open .l1.toggle {
      transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg); }

.l2 {
  top: 50px;
  left: 50px;
  right: 50px;
  bottom: 50px;
  background: #a18df2;
  transition-delay: 0.1s; }
  .open .l2 {
    transition-delay: 0.1s;
    transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
    opacity: 1; }
    .open .l2:hover {
      background: shade(#a18df2, 90%);
      color: #a18df2;
      transition-delay: 0s; }
    .open .l2:active {
      background: shade(#a18df2, 50%);
      color: #a18df2; }
    .open .l2.toggle {
      transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg); }

.l3 {
  top: 100px;
  left: 100px;
  right: 100px;
  bottom: 100px;
  background: #9ba9f5;
  transition-delay: 0.2s; }
  .open .l3 {
    transition-delay: 0.2s;
    transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
    opacity: 1; }
    .open .l3:hover {
      background: shade(#9ba9f5, 90%);
      color: #9ba9f5;
      transition-delay: 0s; }
    .open .l3:active {
      background: shade(#9ba9f5, 50%);
      color: #9ba9f5; }
    .open .l3.toggle {
      transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg); }

.l4 {
  top: 150px;
  left: 150px;
  right: 150px;
  bottom: 150px;
  background: #95c6f7;
  transition-delay: 0.3s; }
  .open .l4 {
    transition-delay: 0.3s;
    transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
    opacity: 1; }
    .open .l4:hover {
      background: shade(#95c6f7, 90%);
      color: #95c6f7;
      transition-delay: 0s; }
    .open .l4:active {
      background: shade(#95c6f7, 50%);
      color: #95c6f7; }
    .open .l4.toggle {
      transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg); }

.l5 {
  top: 200px;
  left: 200px;
  right: 200px;
  bottom: 200px;
  background: #8fe2fa;
  transition-delay: 0.4s; }
  .open .l5 {
    transition-delay: 0.4s;
    transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
    opacity: 1; }
    .open .l5:hover {
      background: shade(#8fe2fa, 90%);
      color: #8fe2fa;
      transition-delay: 0s; }
    .open .l5:active {
      background: shade(#8fe2fa, 50%);
      color: #8fe2fa; }
    .open .l5.toggle {
      transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg); }

.toggle {
  line-height: 100px;
  padding: 0;
  width: 100px;
  background: #89fffd;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s; }
  .open .toggle {
    transform: rotate3d(0, 0, 1, 0deg); }
  .toggle:hover {
    background: shade(#89fffd, 90%);
    text-decoration: underline; }
  .toggle:active {
    background: shade(#89fffd, 50%);
    color: rgba(137, 255, 253, 0.5);
    transform: scale(0.9);
    transition-duration: 0s; }