/* selektor html, farba pozadia, textu, štýlovanie písma */
html {
  background-color: #99D9EA; /* farba pozadia */
  color: #333; /* farba textu */
  font-family: "Arial", sans-serif; /* štýlovanie písma */
}

/* vonkajší a vnútorný okraj, rám, obtekanie obrázkov */
.logo img {
  border: 5px solid #000; /* vonkajší okraj */
  box-shadow: inset 0 0 0 3px #ccc; /* vnútorný okraj */
  padding: 10px; /* rám */
  background-color: #f9f9f9; /* rám */
  float: left; /* obtekanie obrázkov */
  margin: 15px; /* Space between image and text */
}

/* selector class pre logo, vhodné vlastnosti CSS budú mať obrázky, napr. po ukázaní kurzorom myšky sa
obrázok zväčší, bude mať zaoblené rohy a pod. */
.logo img:hover {
      border: 5px solid #ff5733; 
      transform: scale(1.05); 
      border-radius: 15px; /* zaoblené rohy */
}

/* tabulka s použitými obrázkami */
.image-table {
    width: 90%; 
    margin: 20px auto;
    border-collapse: collapse; 
    text-align: center;
    background-color: #f4f4f4; 
    border-radius: 10px; 
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); 
}

/* border, efekt po prejdení kurzorom a miesto okolo obrázkov */
.image-table td {
    padding: 10px; 
    border: 1px solid #ddd;
    transition: transform 0.3s ease;
}

/* zmena pozadia po prejdení kurzorom, zmena kurzoru */
.image-table td:hover {
    background-color: #e0e0e0; 
    cursor: pointer;
}

/* styles pre obrázky v tabulke */
.image-table img {
    width: 100%; /* Make images responsive */
    max-width: 150px; /* Maximum width for images */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Rounded corners for images */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add smooth transitions */
}

/* po ukázaní kurzorom myšky sa obrázok zvačší */
.image-table img:hover {
    transform: scale(1.1); /* Zoom in the image slightly */
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2); /* Add shadow on hover */
}

/* Selektor class pre navigačné menu, funkčné horizontálne menu */
.navigation {
    list-style-type: none; /* Remove bullet points */
    margin: 0;
    padding: 0;
    display: flex; /* Horizontal layout */
    background-color: #4CAF50; /* Green background */
    justify-content: center; /* Center the menu items */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
}

.navigation li {
    margin: 0;
    padding: 0;
}

.navigation li a {
    display: block;
    color: white; /* Text color */
    text-decoration: none; /* Remove underline */
    padding: 14px 20px; /* Add spacing around text */
    font-size: 1rem; /* Adjust font size */
    font-weight: bold; /* Make text bold */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth hover effect */
    text-align: center; /* Center-align text */
}

.navigation li a:hover {
    background-color: #45a049; /* Slightly lighter green */
    transform: scale(1.1); /* Slight zoom-in effect */
}