* { /*všetky html prvky*/
  margin: 0; /*odstráni vonkajšie medzery*/
  padding: 0; /*odstráni vnútorné  medzery*/
  box-sizing: border-box; 
  font-family: Arial, sans-serif; /*ak nie je Arial dostupný, tak použije iné bezpätkové písmo*/
}

body { /*štýl celej stránky*/
  background: #ffc0cb; 
  color: black; /*farba textu*/
}

header { /*hlavička*/
  background: #ffc0cb;
  color: white;
  padding: 20px; /*priestor vo vnútri hlavičky*/
  text-align: center; /*text bude vycentrovaný na stred*/
}

nav { /*navigácia*/
  background: #c71585;
  padding: 10px;
  text-align: center;
}

nav a {
  color: white;
  text-decoration: none; /*bez podčiarknutia*/
  margin: 0 15px; /*medzera medzi odkazmi*/
  font-weight: bold; /*hrubé písmo*/
}

nav a:hover { /*text zmení farbu*/
  color: #c71585;
}

main {
  max-width: 900px; /*obsah*/
  margin: 40px auto; /*vycentruje horizontálne*/
  padding: 20px; /*vnútorné odsadenie*/
  background: white;
  border-radius: 10px; /*zaoblené rohy*/
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /*tieň*/
}

h2 { 
  color: #2c3e50;
  margin-bottom: 15px; /*medzera pod nádpisom*/
}

ul {
  margin-left: 20px; /*odsadí doprava*/
}

footer { /*pätička*/
  text-align: center;
  padding: 20px; 
  margin-top: 30px; /*medzera hore*/
  background: #c71585;
  color: white;
}

nav a { 
  color: white;
  text-decoration: none;
  margin: 0 15px;
  font-weight: bold;
  padding: 8px 14px;
  border-radius: 8px;
  transition: 0.3s; /*plynulá animácia*/
}

nav a:hover {
  background: #ffc0cb;
  color: white;
}

img {
    max-width: 300px;
    border-radius: 15px;
    display: block; /*správa sa ako blok*/
    margin: 20px auto; /*vycentruje obrázok*/
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

.fotky {
    display: flex; /*vedľa seba*/
    justify-content: center; /*horizontálne*/
    align-items: center; /*vertikálne*/
    gap: 10px;
    flex-wrap: wrap; /*keď sa nezmestia, tak pod seba*/
}
.fotky img {
    width: 200px;
    height: auto;
}

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    background: linear-gradient(135deg, #ffc0cb); /**/
    color: #222;
}

main {
    background: white ;
    backdrop-filter: blur(10px); /*rozmazanie pozadia*/
    border-radius: 20px;
} 

img {
    width: 220px;
    transition: 0.3s ease; /*plynulá animácia*/
    cursor: pointer; /*kurzor sa zmení na ruku*/
}

img:hover {
    transform: scale(1.05); /*obrázok sa zväčší o 5%*/
}

img {
    width: 220px;
    border-radius: 15px;
    transition: 0.4s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

img:hover {
    transform: scale(1.15); /*obrázok sa zväčší o 15%*/
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
}