/*@import url('https://cdn.jsdelivr.net/npm/@alphardex/aqua.css/dist/aqua.css');*/
:root {
  --primary-color: hsl(196, 78%, 61%);
  --secondary-color: hsl(217, 15%, 83%);
  --success-color: hsl(165, 58%, 55%);
  --info-color: hsl(214, 79%, 65%);
  --warning-color: hsl(43, 100%, 66%);
  --danger-color: hsl(354, 81%, 63%);
  --primary-color-darker: hsl(196, 68%, 54%);
  --secondary-color-darker: hsl(215, 13%, 70%);
  --success-color-darker: hsl(165, 55%, 48%);
  --info-color-darker: hsl(214, 68%, 58%);
  --warning-color-darker: hsl(39, 97%, 62%);
  --danger-color-darker: hsl(354, 67%, 56%);
  --primary-color-lighter: hsl(196, 78%, 81%);
  --secondary-color-lighter: hsl(214, 16%, 92%);
  --success-color-lighter: hsl(165, 58%, 75%);
  --info-color-lighter: hsl(214, 79%, 85%);
  --warning-color-lighter: hsl(43, 100%, 86%);
  --danger-color-lighter: hsl(354, 81%, 83%);
  --secondary-color-darkest: hsl(215, 11%, 30%);
  --secondary-color-lightest: hsl(220, 1%, 98%);
  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.btn {
  --btn-padding: 0.75rem 1.25rem;
  --btn-border: 1px solid var(--secondary-color);
  --btn-radius: 4px;
  position: relative;
  padding: var(--btn-padding);
  color: var(--btn-color, black);
  background: var(--btn-bg, white);
  border: var(--btn-border);
  border-radius: var(--btn-radius);
  white-space: nowrap;
  cursor: pointer;
}

.btn-primary {
  --btn-color: white;
  --btn-bg: var(--primary-color);
  --btn-border: 1px solid var(--btn-bg);
}

.btn-primary.disabled {
  --btn-bg: var(--primary-color-lighter);
}

.btn-secondary {
  --btn-color: white;
  --btn-bg: var(--secondary-color);
  --btn-border: 1px solid var(--btn-bg);
}

.btn-secondary.disabled {
  --btn-bg: var(--secondary-color-lighter);
}

.btn-success {
  --btn-color: white;
  --btn-bg: var(--success-color);
  --btn-border: 1px solid var(--btn-bg);
}

.btn-success.disabled {
  --btn-bg: var(--success-color-lighter);
}

.btn-info {
  --btn-color: white;
  --btn-bg: var(--info-color);
  --btn-border: 1px solid var(--btn-bg);
}

.btn-info.disabled {
  --btn-bg: var(--info-color-lighter);
}

.btn-warning {
  --btn-color: white;
  --btn-bg: var(--warning-color);
  --btn-border: 1px solid var(--btn-bg);
}

.btn-warning.disabled {
  --btn-bg: var(--warning-color-lighter);
}

.btn-danger {
  --btn-color: white;
  --btn-bg: var(--danger-color);
  --btn-border: 1px solid var(--btn-bg);
}

.btn-danger.disabled {
  --btn-bg: var(--danger-color-lighter);
}

.btn-sm {
  --btn-padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}

/* ---------------------- */

.buttons {
    margin-top:20px;
    display: flex;
    flex-direction: row;
    align-content: stretch;
    justify-content: center;
    align-items: center;
}


.btn {
  margin: 0 1rem;
}
.btn-sm {
  margin: 0;
  font-size: .8rem;
}

.btn-default {
    --bs-btn-color: #fff;
    --bs-btn-bg: #6c757d;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5c636a;
    --bs-btn-hover-border-color: #565e64;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #565e64;
    --bs-btn-active-border-color: #51585e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
}

.btn-jittery {
  -webkit-animation: jittery 4s infinite;
          animation: jittery 4s infinite;
}
.btn-icon {
  position: relative;
  margin-left: 8px;
  overflow: hidden;
}
.btn-icon i {
  position: absolute;
  top: 41%;
  left: 48%;
  transform: scale(0.75) translate(-16%, 400%);
  transition: 0.2s;
}
.btn-icon span {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.2s;
}
.btn-icon:hover i {
  transform: scale(0.75) translate(-16%, 0);
}
.btn-icon:hover span {
  transform: translateY(-400%);
}
.btn-jelly:hover {
  -webkit-animation: jelly 0.5s;
          animation: jelly 0.5s;
}
.btn-fill {
  transition: 0.3s;
}
.btn-fill:hover {
  background: transparent;
  box-shadow: inset 0 0 0 36px var(--btn-bg);
}
.btn-open {
  transition: 0.3s;
}
.btn-open::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: var(--btn-bg);
  transform: scaleX(0);
  transition: 0.3s;
}
.btn-open:hover {
  background: transparent;
}
.btn-open:hover::before {
  transform: scaleX(1);
}
.btn-pulse:hover {
  box-shadow: 0 0 0 18px transparent;
  -webkit-animation: pulse 1s;
          animation: pulse 1s;
}
.btn-close {
  transition: 0.3s;
}
.btn-close:hover {
  background: transparent;
  box-shadow: inset 54px 0 0 0 var(--btn-bg), inset -54px 0 0 0 var(--btn-bg);
}
.btn-slash {
  overflow: hidden;
  transition: 0.3s;
}
.btn-slash::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 120%;
  height: 210%;
  background: var(--btn-bg);
  transform: translate(-50%, -50%) rotate(-45deg) scaleX(0);
  transition: 0.3s;
}
.btn-slash:hover {
  background: transparent;
}
.btn-slash:hover::before {
  transform: translate(-50%, -50%) rotate(-45deg) scaleX(1);
}
.btn-fill-up {
  transition: 0.3s;
}
.btn-fill-up:hover {
  background: transparent;
  box-shadow: inset 0 -54px 0 0 var(--btn-bg);
}
.btn-slide {
  transition: 0.3s;
}
.btn-slide:hover {
  background: transparent;
  box-shadow: inset 90px 0 0 0 var(--btn-bg);
}
.btn-through {
  transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}
.btn-through::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: var(--btn-bg);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}
.btn-through:hover {
  color: white;
  background: transparent;
}
.btn-through:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}
.btn-offset {
  border-radius: 0;
  box-shadow: 6px 6px 0 0 var(--btn-bg), inset 6px 6px 0 0 var(--btn-bg);
  transition: 0.3s;
}
.btn-offset:hover {
  background: transparent;
  box-shadow: 0 0 0 0 var(--btn-bg), inset 108px 72px 0 0 var(--btn-bg);
}
.btn-flip-down {
  --flip-button-height: 40px;
  height: var(--flip-button-height);
  color: transparent;
  border: none;
  border-radius: 0;
  perspective: 500px;
  transition: 0.3s;
}
.btn-flip-down:hover {
  color: transparent;
  background: transparent;
}
.btn-flip-down .front,
.btn-flip-down .back {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.btn-flip-down .front {
  background: var(--btn-bg);
  color: white;
  transition: 0.3s;
  transform-origin: center center calc(var(--flip-button-height) / -2);
}
.btn-flip-down .back {
  color: white;
  background: var(--btn-bg);
  transform: rotateX(88deg);
  transform-origin: center center calc(var(--flip-button-height) / -2);
  transition: 0.3s;
}
.btn-flip-down:hover .front {
  transform: rotateX(-90deg);
}
.btn-flip-down:hover .back {
  transform: rotateX(0deg);
}
.btn-marquee {
  font-weight: 600;
  border: none;
  overflow: hidden;
  transition: 0.3s;
}
.btn-marquee:hover {
  transform: scale(1.1);
}
.btn-marquee span {
  display: block;
  padding: 0 20px;
  -webkit-animation: move-left 2s linear infinite;
          animation: move-left 2s linear infinite;
}
.btn-marquee span::after {
  position: absolute;
  content: attr(data-text);
  top: 0;
  left: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.btn-cross {
  transform: rotate(0);
  overflow: hidden;
  transition: 0.3s;
}
.btn-cross::before, .btn-cross::after {
  position: absolute;
  content: "";
  left: 0;
  z-index: -1;
  width: 100%;
  height: 50%;
  background: var(--btn-bg);
  transform: scaleX(0);
  transition: transform 0.5s;
}
.btn-cross::before {
  top: 0;
  transform-origin: left;
}
.btn-cross::after {
  top: 50%;
  transform-origin: right;
}
.btn-cross:hover {
  background: transparent;
}
.btn-cross:hover::before, .btn-cross:hover::after {
  transform: scaleX(1);
}
.btn-cross:hover::before {
  transform-origin: right;
}
.btn-cross:hover::after {
  transform-origin: left;
}
.btn-open-line {
  border: none;
  transition: 0.3s;
}
.btn-open-line::before, .btn-open-line::after {
  position: absolute;
  content: "";
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--btn-bg);
  opacity: 0;
  transform: scaleX(0);
  transition: 0.4s ease-in-out;
}
.btn-open-line::before {
  top: 0;
}
.btn-open-line::after {
  bottom: 0;
}
.btn-open-line:hover {
  letter-spacing: 5px;
  color: var(--btn-bg);
  background: transparent;
}
.btn-open-line:hover::before, .btn-open-line:hover::after {
  opacity: 1;
  transform: scaleX(1.2);
}

@-webkit-keyframes jittery {
  5%, 50% {
    transform: scale(1);
  }
  10% {
    transform: scale(0.9);
  }
  15% {
    transform: scale(1.15);
  }
  20% {
    transform: scale(1.15) rotate(-5deg);
  }
  25% {
    transform: scale(1.15) rotate(5deg);
  }
  30% {
    transform: scale(1.15) rotate(-3deg);
  }
  35% {
    transform: scale(1.15) rotate(2deg);
  }
  40% {
    transform: scale(1.15) rotate(0);
  }
}

@keyframes jittery {
  5%, 50% {
    transform: scale(1);
  }
  10% {
    transform: scale(0.9);
  }
  15% {
    transform: scale(1.15);
  }
  20% {
    transform: scale(1.15) rotate(-5deg);
  }
  25% {
    transform: scale(1.15) rotate(5deg);
  }
  30% {
    transform: scale(1.15) rotate(-3deg);
  }
  35% {
    transform: scale(1.15) rotate(2deg);
  }
  40% {
    transform: scale(1.15) rotate(0);
  }
}
@-webkit-keyframes jelly {
  25% {
    transform: scale(0.9, 1.1);
  }
  50% {
    transform: scale(1.1, 0.9);
  }
  75% {
    transform: scale(0.95, 1.05);
  }
}
@keyframes jelly {
  25% {
    transform: scale(0.9, 1.1);
  }
  50% {
    transform: scale(1.1, 0.9);
  }
  75% {
    transform: scale(0.95, 1.05);
  }
}
@-webkit-keyframes pulse {
  from {
    box-shadow: 0 0 0 0 var(--btn-bg);
  }
}
@keyframes pulse {
  from {
    box-shadow: 0 0 0 0 var(--btn-bg);
  }
}
@-webkit-keyframes move-left {
  to {
    transform: translateX(-100%);
  }
}
@keyframes move-left {
  to {
    transform: translateX(-100%);
  }
}