/* ZÁKLAD – celé telo stránky*/
html, body {
  margin: 0;                           /* Odstráni okraje prehliadača */
  padding: 0;                          /* Odstráni vnútorné odsadenie */
  height: 100%;                        /* Výška na celú obrazovku */
  font-family: "Arial";               /* Nastaví základné písmo stránky */
  background: #121417;                /* Tmavé pozadie celej stránky */
  display: flex;                      /* Flexbox pre rozloženie */
  flex-direction: column;            /* Zvislé usporiadanie elementov */
  color: white;                       /* Farba písma */
}

main {
  flex: 1;                             /* Zaberie zostávajúci priestor */
  max-width: 950px;                   /* Maximálna šírka obsahu */
  margin: 25px auto;                  /* Odsadenie a centrovanie */
  padding: 20px;                      /* Vnútorné odsadenie */
}


/*HLAVIČKA – logo + názov*/

header {
  background: #1c1f26;                /* Tmavé pozadie hlavičky */
  padding: 15px;                      /* Vnútorné odsadenie */
  text-align: center;                 /* Zarovnanie na stred */
  border-bottom: 3px solid deepskyblue; /* Spodný modrý okraj */
}

header img {
  width: 70px;                        /* Veľkosť loga */
  border-radius: 12px;               /* Zaoblenie rohov */
  border: 2px solid deepskyblue;     /* Orámovanie obrázka */
  transition: transform 0.3s, box-shadow 0.3s; /* Efekt pri hoveri */
}

header img:hover {
  transform: scale(1.05);            /* Mierne zväčšenie pri hoveri */
  box-shadow: 0 4px 10px rgba(0, 191, 255, 0.4); /* Modrý tieň */
}

.logo-link {
  display: inline-flex;              /* Zarovnanie loga a textu vedľa seba */
  align-items: center;              /* Vertikálne vycentrovanie */
  gap: 10px;                         /* Medzera medzi logom a textom */
  color: black;                      /* Farba textu */
  text-decoration: none;            /* Bez podčiarknutia */
}

.logo-text {
  font-size: 24px;                   /* Veľkosť textu loga */
  font-weight: bold;                /* Tučný text */
}

.site-title {
  font-size: 30px;                   /* Väčší nadpis (ak by bol použitý) */
  font-weight: bold;                /* Tučný text */
  margin-left: 12px;                /* Odsadenie zľava */
  color: deepskyblue;               /* Svetlomodrá farba */
}

/*NAVIGÁCIA – menu stránky*/
nav {
  background: #22262f;               /* Tmavé pozadie menu */
}

nav ul {
  list-style: none;                  /* Bez odrážok */
  display: flex;                     /* Vodorovné usporiadanie */
  justify-content: center;          /* Zarovnanie na stred */
  margin: 0;                         /* Bez vonkajšieho okraja */
  padding: 0;                        /* Bez vnútorného odsadenia */
}

nav li {
  margin: 0 12px;                    /* Medzera medzi položkami menu */
}

nav a {
  color: white;                      /* Farba textu */
  text-decoration: none;            /* Bez podčiarknutia */
  font-weight: 500;                 /* Polotučný text */
  padding: 10px 16px;               /* Odsadenie vo vnútri odkazu */
  border-radius: 6px;               /* Zaoblené rohy */
}

nav a:hover {
  background: deepskyblue;          /* Pozadie pri prechode myšou */
  color: black;                     /* Zmena farby textu */
  transition: 0.3s;                 /* Efekt prechodu */
}

/* TEXTY A NADPISY*/
h1, h2 {
  color: deepskyblue;               /* Svetlomodré nadpisy */
  margin-bottom: 15px;              /* Odsadenie od ďalšieho obsahu */
}

/*MULTIMÉDIÁ*/
audio, video {
  display: block;                   /* Zobrazí ako blok */
  margin: 20px auto;                /* Centrovanie a zvislé odsadenie */
  width: 40%;                       /* Šírka 80% kontajnera */
}

/*TABUĽKA*/
table {
  width: 40%;                      /* Tabuľka cez celú šírku */
  border-collapse: collapse;       /* Zlúčené okraje buniek */
  margin: 15px 0;                   /* Odsadenie zhora a zdola */
}

th {
  background: deepskyblue;          /* Pozadie hlavičiek */
  color: black;                     /* Farba textu */
  padding: 12px;                    /* Vnútorné odsadenie */
}

td {
  background: #1f222a;              /* Pozadie buniek */
  padding: 10px;                    /* Vnútorné odsadenie */
  border: 1px solid deepskyblue;    /* Okraj buniek */
}

/*OBRÁZKY – efekty a štýl */
.float-img {
  float: left;                      /* Obtekanie obrázka vľavo */
  width: 220px;                     /* Pevná šírka obrázka */
  margin: 0 15px 10px 0;            /* Odsadenie obrázka od textu */
  border: 3px solid deepskyblue;    /* Modrý okraj */
  border-radius: 15px;              /* Zaoblené rohy */
  transition: transform 0.3s, box-shadow 0.3s; /* Efekty pri hoveri */
}

.float-img:hover {
  transform: scale(1.08);           /* Mierne zväčšenie */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* Tieň */
}

.gallery-img {
  width: 30%;                       /* Galéria – obrázky 30% šírky */
  margin: 8px;                      /* Medzera medzi nimi */
}

/*GPU MAPA – obrázková mapa + logá pod sebou*/
.gpu-map {
  text-align: center;               /* Centrovanie */
  margin-top: 30px;                 /* Odsadenie od obsahu */
}

.gpu-map-img {
  width: 70%;                       /* Šírka mapy */
  max-width: 400px;                 /* Max. šírka mapy */
  border-radius: 10px;              /* Zaoblené rohy */
  margin-bottom: 20px;             /* Odsadenie zospodu */
}

.gpu-mini-vertical {
  margin-top: 20px;                 /* Odsadenie zhora */
}

.gpu-mini-vertical div {
  margin: 10px 0;                   /* Medzera medzi logami */
}

.gpu-mini-vertical img {
  width: 100px;                     /* Malé logá výrobcov */
  border-radius: 10px;              /* Zaoblené rohy */
}

.gpu-mini-vertical p {
  margin: 5px 0 0;                  /* Odsadenie od obrázku */
  font-weight: bold;                /* Tučný názov značky */
  color: deepskyblue;              /* Svetlomodrá farba */
}

/*PATIČKA – spodok stránky*/
footer {
  background: #1e2128;              /* Tmavé pozadie pätičky */
  text-align: center;               /* Centrovaný text */
  padding: 20px;                    /* Vnútorné odsadenie */
  color: lightgray;                 /* Svetlosivý text */
}

footer img {
  width: 50px;                      /* Veľkosť ikon sociálnych sietí */
}

/* TLAČIDLO SPÄŤ HORE*/
#back-top {
  text-align: center;               /* Centrovanie */
  margin: 40px 0;                   /* Odsadenie zhora a zdola */
}