:root {
  --background: #c7dad75e;
  --background-secondary: #FFC107;
  --icon-color: #344955;
  --width: 50px;
  --height: 50px;
  --border-radius: 100%;
}

.action-menu {
  width: var(--width);
  height: var(--height);
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  border-radius: var(--border-radius);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 6rem;
}
.action-menu .login {
  background: var(--background-secondary);
  width: var(--width);
  height: var(--height);
  position: relative;
  cursor: pointer;
  z-index: 3;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fab-animation-reverse 0.4s ease-out forwards;
}
.action-menu .fab {
  background: var(--background);
  width: var(--width);
  height: var(--height);
  position: relative;
  cursor: pointer;
  z-index: 3;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fab-animation-reverse 0.4s ease-out forwards;
}
.action-menu .fac {
  border-radius: 64px;
  position: absolute;
  background: #fff;
  z-index: 2;
  padding: 0.5rem 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  font-size: 1.5rem;
  opacity: 0;
  top: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  transition: opacity 0.2s ease-in, top 0.2s ease-in, width 0.1s ease-in;
  pointer-events: none;
}
.action-menu .fac a {
  color: var(--icon-color);
  opacity: 0.8;
}
.action-menu .fac a:hover {
  cursor: pointer;
  transition: 0.2s;
  opacity: 1;
  color: #30444f;
}
.action-menu input {
  height: 100%;
  width: 100%;
  border-radius: var(--border-radius);
  cursor: pointer;
  position: absolute;
  z-index: 5;
  opacity: 0;
}
.action-menu input:checked ~ .fab {
  animation: fab-animation 0.4s ease-out forwards;
}
.action-menu input:checked ~ .fac {
  animation: fac-animation 0.4s ease-out forwards 0.1s;
  top: 70px;
  opacity: 1;
  pointer-events: all;
}

@keyframes fab-animation {
  0% {
    transform: rotate(0) scale(1);
  }
  20% {
    transform: rotate(30deg) scale(0.93);
  }
  40% {
    transform: rotate(60deg) scale(0.97);
  }
  60% {
    transform: rotate(75deg) scale(0.94);
  }
  80% {
    transform: rotate(85deg) scale(0.96);
  }
  100% {
    transform: rotate(90deg) scale(0.95);
  }
}
@keyframes fab-animation-reverse {
  0% {
    transform: rotate(45deg) scale(0.95);
  }
  20% {
    transform: rotate(-15deg);
  }
  55% {
    transform: rotate(10deg);
  }
  80% {
    transform: rotate(-3deg);
  }
  100% {
    transform: rotate(0) scale(1);
  }
}
@keyframes fac-animation {
  0% {
    transform: scale(1, 1);
  }
  33% {
    transform: scale(0.95, 1.05);
  }
  66% {
    transform: scale(1.05, 0.95);
  }
  100% {
    transform: scale(1, 1);
  }
}/*# sourceMappingURL=actionmenu.css.map */