/* Import písma Roboto z Google Fonts */
@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");

/* Definice kořenových proměnných pro různé barvy záře */
:root {
  --glow-color-1: #DB00BB; /* První barva */
  --glow-color-2: #DBD700; /* Druhá barva */
  --glow-color-3: #0054DB; /* Třetí barva */
}

/* Zajištění použití border-box modelu pro všechny elementy */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Resetování margin a padding pro tělo stránky */
body {
  margin: 0;
  padding: 0;
  font-family: "Roboto", Sans-Serif; /* Font Roboto */
}

/* Umístění kontejneru s tlačítky na střed viewportu */
.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 35rem;
  background: black; /* Barva pozadí kontejneru */
  gap: 5rem; /* Mezera mezi tlačítky */
}

/* Stylování pro zářící tlačítko */
.glowing-btn {
  position: relative;
  cursor: pointer; /* Ukazatel kurzoru při najetí */
  padding: 0.35em 1em; /* Odsazení kolem tlačítka */
  border: 0.15em solid; /* Stylování okraje */
  border-radius: 0.45em; /* Zaoblené rohy */
  background: none; /* Bez barvy pozadí */
  perspective: 2em; /* Perspektiva pro 3D efekt */
  font-family: "Roboto", sans-serif; /* Font tlačítka */
  font-size: 1em; /* Velikost písma */
  font-weight: normal; /* Normální tučnost */
  letter-spacing: 0.2em; /* Šířka mezery mezi písmeny */
  box-shadow: inset 0px 0px 0.5em 0px, /* Vnitřní stín */
              0px 0px 0.5em 0px; /* Vnější stín */
  animation: border-flicker 3s linear infinite; /* Animace mrkání okraje */
}

/* Stylování pro zářící text */
.glowing-txt {
  text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em; /* Vnitřní a vnější textový stín */
  animation: text-flicker 3s linear infinite; /* Animace mrkání textu */
}

/* Efekt záře pro tlačítko */
.glowing-btn::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.7; /* Počáteční průhlednost */
  filter: blur(1em); /* Efekt rozostření */
  transform: translateY(120%) rotateX(95deg) scale(1, 0.35); /* 3D transformace */
  pointer-events: none; /* Zákaz událostí kurzoru */
}

/* Další efekt záře pro tlačítko */
.glowing-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0; /* Počáteční průhlednost */
  z-index: -1; /* Pozice za tlačítkem */
  box-shadow: 0 0 2em 0.2em; /* Vnější stín */
  transition: opacity 100ms linear; /* Přechod pro průhlednost */
}

/* Hover efekty pro tlačítka */
.glowing-btn:hover {
  color: rgba(0, 0, 0, 0.8); /* Změna barvy textu při najetí */
  text-shadow: none; /* Odebrání textového stínu */
  animation: none; /* Zastavení animace */
}

/* Zastavení animace textu při najetí */
.glowing-btn:hover .glowing-txt {
  animation: none; /* Zastavení animace textu při najetí */
}

/* Zvýšení efektu záře při najetí */
.glowing-btn:hover:before {
  filter: blur(1.5em);
  opacity: 1;
}

/* Zvýšení průhlednosti dalšího efektu záře při najetí */
.glowing-btn:hover:after {
  opacity: 1;
}

/* Klíčové snímky pro animaci mrkání textu */
@keyframes text-flicker {
  0%, 12%, 20%, 30%, 70%, 100% {
    opacity: 0.9;
  }
  2%, 8%, 9%, 25%, 72% {
    opacity: 1;
  }
  4%, 70% {
    opacity: 0.1;
  }
  77% {
    opacity: 0.9;
  }
}

/* Klíčové snímky pro animaci mrkání okraje */
@keyframes border-flicker {
  0%, 4%, 70%, 100% {
    opacity: 1;
  }
  2%, 8% {
    opacity: 0.1;
  }
}

/* Responsivní úpravy pro menší obrazovky */
@media only screen and (max-width: 400px) {
  .button-container {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem; /* Větší mezera mezi tlačítky */
    padding: 1rem; /* Větší odsazení */
  }

  .glowing-btn {
    width: 100%; /* Šířka na 100% */
    font-size: 1.5em; /* Menší velikost písma */
    padding: 0.75em 1em; /* Menší odsazení */
  }
}


/* Styly pro první tlačítko */
#button1 {
  color: var(--glow-color-1);
  border-color: var(--glow-color-1);
}

/* Hover efekty pro první tlačítko */
#button1:hover {
  color: rgba(0, 0, 0, 0.8); /* Změna barvy textu při najetí */
}

#button1 .glowing-txt {
  text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em var(--glow-color-1);
}

#button1::before {
  background: var(--glow-color-1);
}

#button1::after {
  background-color: var(--glow-color-1);
  box-shadow: 0 0 2em 0.2em var(--glow-color-1);
}

/* Styly pro druhé tlačítko */
#button2 {
  color: var(--glow-color-2);
  border-color: var(--glow-color-2);
}

/* Hover efekty pro druhé tlačítko */
#button2:hover {
  color: rgba(0, 0, 0, 0.8); /* Změna barvy textu při najetí */
}

#button2 .glowing-txt {
  text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em var(--glow-color-2);
}

#button2::before {
  background: var(--glow-color-2);
}

#button2::after {
  background-color: var(--glow-color-2);
  box-shadow: 0 0 2em 0.2em var(--glow-color-2);
}

/* Styly pro třetí tlačítko */
#button3 {
  color: var(--glow-color-3);
  border-color: var(--glow-color-3);
}

/* Hover efekty pro třetí tlačítko */
#button3:hover {
  color: rgba(0, 0, 0, 0.8); /* Změna barvy textu při najetí */
}

#button3 .glowing-txt {
  text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em var(--glow-color-3);
}

#button3:before {
  background: var(--glow-color-3);
}

#button3:after {
  background-color: var(--glow-color-3);
  box-shadow: 0 0 2em 0.2em var(--glow-color-3);
}