:root {
  --short-transition-time: 0.3s;
  --long-transition-time: 0.4s;
}

/* ================== Special buttons ==================  */
/* ================== upBtn button ==================  */
/* General rules */
.buttons {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: fixed;
  bottom: 30px;

  box-shadow: 0 0 6px 0;
  cursor: pointer;

  /* display: flex; */
  justify-content: center;
  align-items: center;
  opacity: 0.85;
  z-index: 3;
  display: none;
}

.buttons ion-icon {
  color: white;
  /* font-size: x-large; */
  font-size: xx-large;
  margin: auto;
}
/* End General rules */
/* Special rules */
#top {
  background-color: #4094d8;
  right: 20px;
  animation: top-arrow var(--long-transition-time);
  -webkit-animation: top-arrow var(--long-transition-time);
  -moz-animation: top-arrow var(--long-transition-time);
  -ms-animation: top-arrow var(--long-transition-time);
  -o-animation: top-arrow var(--long-transition-time);
}
#contact-btn {
  background-color: #4caf50;
  background-color: #4094d8;
  left: 20px;
  animation: contact-btn var(--long-transition-time);
  -webkit-animation: contact-btn var(--long-transition-time);
  -moz-animation: contact-btn var(--long-transition-time);
  -ms-animation: contact-btn var(--long-transition-time);
  -o-animation: contact-btn var(--long-transition-time);
}

@keyframes top-arrow {
  from {
    opacity: 0;
    right: 0;
  }
}
@keyframes contact-btn {
  from {
    opacity: 0;
    left: 0;
  }
}
#contact-btn [name="call-outline"],
#contact-btn [name="call"] {
  font-size: xx-large;
}
.contact-menu {
  /* display: flex; */
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;

  position: fixed;
  bottom: 90px;
  left: 20px;
  display: none;
  animation: showBtns var(--long-transition-time) ease;
}
/* NOTE!! */
/* With class="icon-box buttons" */
.contact-menu .icon-box {
  position: unset;
  transition: outline-offset var(--short-transition-time),
    transform var(--short-transition-time);
}
.contact-menu .icon-box:hover,
.contact-menu .icon-box:active {
  outline-offset: 4px;
}
.contact-menu .icon-box:active {
  transform: scale(0.9);
}
#whatsapp {
  background-color: #4caf50;
  outline: 1px solid #4caf50;
}
#mail {
  background-color: #757ffb;
  outline: 1px solid #757ffb;
}
#phone {
  /* background-color: #3c7dfa; */
  outline: 1px solid #3c7dfa;
  /* New color */
  background-color: #1da1f2;
  outline: 1px solid #1da1f2;
}
.contact-menu .icon-box a {
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes showBtns {
  from {
    bottom: 30px;
    opacity: 0.3;
  }
  to {
    bottom: 90px;
    opacity: 1;
  }
}

@keyframes hideBtns {
  from {
    bottom: 90px;
  }
  to {
    bottom: -90px;
    opacity: 0.3;
  }
}

/* End Special rules */