* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: 'Arial', sans-serif;
}

.container {
  display: flex;
  flex-direction: row; /* Segmenty na šířku */
  height: 100vh; /* Výška na celou obrazovku */
}

.segment {
  flex: 1; /* Každý segment zabere stejnou šířku */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  text-decoration: none;
  color: whitesmoke; /* Bílá barva textu */
  background-color: #1c1c1c; /* Tmavší barva pozadí pro všechny segmenty */
  transition: background-color 0.3s, color 0.3s; /* Plynulé přechody */
  position: relative;
}

/* Růžová barva pro označený segment */
.segment:hover {
  background-color: #ff69b4; /* Růžová barva na hover */
  color: #1c1c1c; /* Změna textu na tmavě šedou pro kontrast */
}

/* Styl pro h1 */
h1 {
  z-index: 1; /* Udržení textu nad pozadím */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Jemný stín pro text */
}


.cross {
  position: fixed; /* Křížky jsou pevně umístěny vzhledem k viewportu */
  pointer-events: none; /* Křížky nebudou reagovat na interakci myši */
  color: #ff69b4; /* Barva křížku */
  font-size: 20px; /* Výchozí velikost */
  animation: fade 2s ease-in-out forwards; /* Animace křížků */
}

/* Animace pro křížky */
@keyframes fade {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* Styl pro obsah */
.content {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

/* Styl pro segmenty */
.segment {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  text-decoration: none;
  background-color: #1c1c1c;
  position: relative;
  opacity: 0; /* Skryté před animací */
  transform: translateY(50px); /* Posunutí dolů před animací */
  transition: all 0.6s ease-in-out;
}

/* Zvýraznění segmentu při hoveru */
.segment:hover {
  background-color: #ff69b4;
}

/* Animace při načtení stránky */
.segment.show {
  opacity: 1;
  transform: translateY(0); /* Reset pozice */
}
@media (max-width: 768px) {
  body {
      display: flex;
      flex-direction: column; /* Umožňuje vertikální uspořádání segmentů */
      height: 100vh; /* Celková výška stránky */
      overflow: hidden;
  }

  .segment {
      width: 100%; /* Celá šířka segmentu */
      height: 100vh; /* Každý segment zabírá celou výšku */
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      background-color: #1c1c1c; /* Tmavší pozadí */
      transition: background-color 0.6s ease;
      font-size: 2rem;
  }
}