/* Třída pro pozadí */
.image {
  background-image: url('https://as1.ftcdn.net/jpg/00/90/88/98/220_F_90889891_DSjEcT71K4ROpbX6tKmV45uvPu7dgzjj.jpg');
  height: 100vh; /* Používáme viewport jednotky pro flexibilní výšku */
  background-size: cover; /* Pozadí se přizpůsobí velikosti obrazovky */
  background-repeat: no-repeat;
  filter: blur(5px); /* Efekt rozmazání pozadí */
  position: relative; /* Abychom pozicovali text nad pozadím */
}

/* Text na pozadí */
.text {
  color: white;
  font-family: Montserrat;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  text-shadow: 5px 5px 9px black;
  text-align: center; /* Aby byl text hezky vycentrován */
}

/* Text vlevo */
.text-vlevo {
  display: inline-block;
  font-weight: 300;
  position: absolute;
  top: 5%;
  left: 2%;
  font-family: Geist Mono;
  cursor: pointer;
  color: black;
  text-shadow: 3px 2px 10px;
  transition: text-shadow 0.3s;
  text-decoration: none;
}

.text-vlevo:hover {
  text-shadow: 7px 7px 9px;
}

/* Responzivní design pro mobilní zařízení */
@media (max-width: 1000px) {
  /* Změna výšky pozadí na mobilních zařízeních */
  .image {
      height: 120vh; /* Na mobilu menší výška pozadí */
  }

  /* Změna velikosti textu na mobilních zařízeních */
  .text {
      font-size: 40px; /* Menší text */
      padding: 10px; /* Přidání paddingu pro lepší vzhled */
  }

  /* Změna velikosti písma pro text vlevo */
  .text-vlevo {
      font-size: 20px; /* Menší font na mobilu */
      top: 3%; /* Můžeme posunout text více nahoru */
  }
}