/* Styling select - see https://stackoverflow.com/a/69300547/6567303 */
select {
  --placeholder-color: rgba(57, 78, 106, 0.5);
}

select:not([data-empty="false"]) {
  color: var(--placeholder-color) !important;
}

/* Sticky footer */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
  flex-grow: 2;
}

/* Disable obnoxious WebKit? arrow on text input with data list */
/* See - https://stackoverflow.com/questions/20937475/remove-datalist-dropdown-arrow-in-chrome */
[list]::-webkit-calendar-picker-indicator, [list]::-webkit-list-button {
  display: none !important;
}

/* Animation */
/* Source - https://github.com/animate-css/animate.css/blob/main/source/attention_seekers/bounce.css */

@keyframes bounce {
  from,
  20%,
  53%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -20px, 0) scaleY(1.1);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -12px, 0) scaleY(1.05);
  }

  80% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  90% {
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}

.bounce {
  animation-name: bounce;
  transform-origin: center bottom;
  animation: bounce 2s 0.5s 1;
}