@charset "utf-8";
/* CSS Document */


.ui-btn-container {
  height: 100%; /* Nimmt die volle Höhe des übergeordneten Containers ein */
  display: flex; /* Flexbox für Zentrierung */
  align-items: center; /* Vertikale Zentrierung */
  justify-content: center; /* Horizontale Zentrierung */
}

.ui-btn {
  --btn-default-bg: rgb(41, 41, 41);
  --btn-padding: 15px 20px;
  --btn-hover-bg: rgb(51, 51, 51);
  --btn-transition: .3s;
  --btn-letter-spacing: .1rem;
  --btn-animation-duration: 1.2s;
  --btn-shadow-color: rgba(0, 0, 0, 0.137);
  --btn-shadow: 0 2px 10px 0 var(--btn-shadow-color);
  --hover-btn-color: rgba(0,117,191,1.00);
  --default-btn-color: #fff;
  --font-size: 2em;
  --font-weight: 600;
  --font-family: Menlo,Roboto Mono,monospace;
}


.ui-btn {
  box-sizing: border-box;
  padding: var(--btn-padding);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--default-btn-color);
  font: var(--font-weight) var(--font-size) var(--font-family);
  background: var(--btn-default-bg);
  border: none;
  cursor: pointer;
  transition: var(--btn-transition);
  overflow: hidden;
  box-shadow: var(--btn-shadow);
  border-radius: 5px;
}

.ui-btn span {
  letter-spacing: var(--btn-letter-spacing);
  transition: var(--btn-transition);
  box-sizing: border-box;
  position: relative;
  background: inherit;
}

.ui-btn span::before {
  box-sizing: border-box;
  position: absolute;
  content: "﷽#ʊ㮈ƶ٨۵∑"; /* Startinhalt */
  background: inherit;
  animation: chitchat 3s linear infinite; /* Endlose Animation */
}


.ui-btn:hover, .ui-btn:focus {
  background: var(--btn-hover-bg);
}

.ui-btn:hover span, .ui-btn:focus span {
  color: var(--hover-btn-color);
}

.ui-btn:hover span::before, .ui-btn:focus span::before {
  animation: chitchat linear both var(--btn-animation-duration);
}

@keyframes chitchat {
  0% {
    content: "#"; /* Anfang */
  }
  10% {
    content: "."; /* Schritt 1 */
  }
  20% {
    content: "^{";
  }
  30% {
    content: "-!";
  }
  40% {
    content: "#$_";
  }
  50% {
    content: "ʊ㮈ƶ٨۵∑"; /* Mitte */
  }
  60% {
    content: "#ʊ㮈ƶ٨۵∑";
  }
  70% {
    content: "@}-?#ʊ㮈ƶ٨۵∑";
  }
  80% {
    content: "﷽#ʊ㮈ƶ٨۵∑";
  }
  90% {
    content: "﷽#ʊ㮈ƶ٨۵∑";
  }
  100% {
    content: ""; /* Ende */
  }
}