/* Resetování základních stylů */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Styl pro celé tělo stránky */
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  min-height: 100vh; /* Zajistí, že tělo bude mít minimální výšku 100% viewportu */
  display: flex;
  flex-direction: column; /* Flexbox umožní přichytit zápatí na dno */
}

/* Navigační lišta */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  padding: 10px 20px;
  color: white;
  position: relative;
}

/* Logo v navigační liště */
.navbar .logo img {
  display: block;
  height: auto;
  max-height: 60px;
  width: auto;
  margin: 0;
}

/* Seznam položek v navigační liště */
.navbar ul {
  list-style: none;
  display: flex;
}

/* Položky seznamu v navigaci */
.navbar ul li {
  margin-left: 20px;
}

/* Odkazy v navigaci */
.navbar ul li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

/* Hover efekt na odkazy v navigaci */
.navbar ul li a:hover {
  text-decoration: underline;
  color: red;
}

/* Dropdown menu pro profil */
.profile-dropdown {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* Ikona profilu */
.profile-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid white;
  object-fit: cover;
}

/* Menu dropdown */
.dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  background-color: white;
  color: #333;
  min-width: 150px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  overflow: hidden;
  z-index: 1000;
}

/* Odkazy v dropdown menu */
.dropdown-menu a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
}

/* Hover efekt pro odkazy v dropdown menu */
.dropdown-menu a:hover {
  background-color: #f0f0f0;
}

/* Zobrazení menu při hoveru */
.profile-dropdown:hover .dropdown-menu {
  display: block;
}

/* Navigační menu pro další položky */
.navbar nav {
  flex-grow: 1;
  margin-left: 2rem;
}

/* Seznam položek v navigačním menu */
.navbar nav ul {
  list-style: none;
  display: flex;
}

/* Hero sekce */
.hero {
  position: relative;
  height: 100%; 
  width: 100%; 
  display: flex;
  overflow: hidden; /* Skryje části obrázku, které by přesahovaly */
  margin: 0; /* Zajistí, že nebude žádná mezera kolem sekce */
}

/* Obrázek v hero sekci */
.hero-image {
  width: 100%; /* Obrázek vyplní šířku */
  height: 100%; /* Obrázek vyplní výšku sekce */
  object-fit: cover; /* Obrázek se roztáhne, aby vyplnil prostor a zachoval si proporce */
  object-position: center; /* Vycentruje obrázek */
  align-items: center;
  
 
}
/* Marvel fan text sekce */
.marvel-fantext {
  position: relative;
  background-color: #111; /* Temný podklad */
  color: #f5f5f5; /* Světlé písmo */
  padding: 2rem;
  border-radius: 8px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  width: 100%;
  box-shadow: 0 0 20px rgba(230, 36, 41, 0.3);
  z-index: 1;
}

/* Nadpis v Marvel fan textu */
.marvel-fantext h2 {
  color: #e62429; /* Marvel červená */
  font-size: 2rem;
  margin-bottom: 1rem;
}

/* Zvýrazněný text */
.marvel-fantext .highlight {
  font-weight: bold;
  font-size: 1.2rem;
  margin-top: 1.5rem;
}

/* Hashtagy */
.marvel-fantext .hashtags {
  color: #bbb;
  font-style: italic;
  margin-top: 1rem;
}

/* Zápatí - Zajistí, že zápatí je vždy dole */
.footer {
  background-color: black;
  color: white;
  text-align: center;
  padding: 2rem 1rem;
  font-size: 0.9rem;
  margin-top: auto; /* Tato vlastnost posune zápatí na spodek */
  position: relative;
  width: 100%;
}

/* Text v zápatí */
.footer p {
  margin: 5px 0;
}