@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap');

body {
  margin: 0;
  padding: 0;
  background-image: url(intro_hra.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  font-family: 'Quicksand', sans-serif;
}

.hra {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.intro-nadpis {
  position: absolute;
  top: 50px; 
  left: 50%;
  transform: translateX(-50%);
  
  font-weight: 700;
  font-size: 60px;
  color: white;
  text-align: center;
  z-index: 10;
  margin: 0;
  white-space: nowrap;
}

.intro-nadpis2 {
  position: absolute;
  top: 130px;              
  left: 50%;
  transform: translateX(-50%);
  
  font-weight: 700;
  font-size: 24px;       
  color: white;
  text-align: center;
  z-index: 10;
  margin: 0;
  white-space: nowrap;
}

.rok-jmeno {
  position: absolute;
  top: 90vh;            /* 5 % výšky okna */
  right: 5vw;          /* 5 % šířky okna od pravého okraje */
  color: white;
  font-size: 20px;      /* velikost textu také reaguje na šířku */
}

/* Kontejner pro tlačítko */
.play-btn {
  position: absolute;
  top: 220px;
  left: 50%;
  /* Důležité: translateX musí zůstat, aby byla rybička uprostřed */
  transform: translateX(-50%); 
  z-index: 10;
  text-decoration: none;
  
  /* Spuštění tvé animace blikání */
  animation: blink 3s ease-in-out infinite;
  transition: transform 0.3s ease;
}

/* Efekt při najetí myší (zvětšení celého kontejneru) */
.play-btn:hover {
  /* Musíme zachovat translateX(-50%), jinak rybička uskočí ke straně */
  transform: translateX(-50%) scale(1.1);
}

/* Styl pro samotný obrázek uvnitř tlačítka */
.play-btn img {
  display: block;
  width: 200px; /* Uprav si podle potřeby */
  height: auto;
}

/* Tvoje animace blikání */
@keyframes blink {
  0%   { opacity: 1; }
  50%  { opacity: 0.3; }
  100% { opacity: 1; }
}