.sticky-buttons {
  z-index: 1;
  position: fixed;
  right: var(--spacing);
  bottom: var(--spacing);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: end;
  width: fit-content;
}

.sticky-buttons a,
.sticky-buttons button {
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  padding: 0;
  font-size: 0;
}

.sticky-buttons a.show,
.sticky-buttons button.show {
  opacity: 1;
  pointer-events: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--spacing-xsmall);
  align-items: center;
  justify-content: center;
  padding: var(--spacing-small);
  text-decoration: none;
  color: var(--color-black);
  border-radius: var(--border-radius-full);
  border: 1px solid var(--color-black);
  background-color: var(--color-primary-c);
  transition: .3s;
  font-size: var(--font-size-responsive-small);
  font-family: var(--font-primary);
  cursor: pointer;
  width: fit-content;
  height: fit-content;
  margin-left: var(--spacing-small);
}

#backtotop:focus,
#backtotop:focus-visible,
#backtotop:hover {
  text-decoration: underline;
  background-color: var(--color-black);
  color: var(--color-white);
}

#backtotop:focus svg,
#backtotop:focus-visible svg,
#backtotop:hover svg {
  fill: var(--color-white);
}

#backtotop:focus,
#backtotop:focus-visible {
  outline: 3px solid hsla(210, 100%, 50%, 0.8);
  outline-offset: 1px;
}

#subscribe:focus,
#subscribe:focus-visible,
#subscribe:hover {
  text-decoration: underline;
  background-color: var(--color-black);
  color: var(--color-white);
}

#subscribe:focus svg,
#subscribe:focus-visible svg,
#subscribe:hover svg {
  fill: var(--color-white);
}

#subscribe:focus,
#subscribe:focus-visible {
  outline: 3px solid hsla(210, 100%, 50%, 0.8);
  outline-offset: 1px;
}