html, body {
  margin: 0;
  padding: 0;
}

/* ===============================
   BODY / TYPOGRAFIA
   =============================== */

body {
  background-color: white;
  color: #111;
  font-family: Verdana, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

/* ===============================
   ODKAZY
   =============================== */

a {
  color: #0066cc;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ===============================
   NADPISY
   =============================== */

h1, h2, h3 {
  font-family: Verdana, Arial, sans-serif;
  line-height: 1.3;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
}

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }

/* ===============================
   HLAVNY OBSAH (VOLITELNE)
   =============================== */

.main-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

/* ===============================
   BOX / CARD STYL
   =============================== */

.box {
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

/* ===============================
   OBRAZKY – GLOBAL
   =============================== */

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ===============================
   OBRAZKY V CLANKOCH (TVOJE)
   =============================== */

.obrazky-clanok {
  max-height: 250px;
  width: auto;
  border-radius: 6px;
}

.obrazky-clanok-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

/* ===============================
   SCROLLBAR (CHROME / EDGE)
   =============================== */

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background: #bbb;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #999;
}


/* =========================================
   COMIC SANS LEN PRE STREDNY OBSAH
   BOLD TEXT OSTAVA V POVODNOM FONTE
   ========================================= */

/* Nadpisy – nemenime */
h1, h2, h3 {
  font-family: Verdana, Arial, sans-serif;
}

/* Stredny stlpec – Comic Sans */
.middle {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 14px;
  line-height: 1.6;
}

/* Odseky, zoznamy atd. v strede */
.middle p,
.middle li,
.middle span {
  font-family: inherit;
}

/* BOLD text – vratime povodny font */
.middle b,
.middle strong {
  font-family: Verdana, Arial, sans-serif;
  font-weight: bold;
}

/* Volitelny jemny oldschool detail */
.middle p {
  letter-spacing: 0.2px;
}








/* =================================
   JEMNE ZVACSENIE PISMA (cca 1.3x)
   STRED OSTAVA NEZMENENY
   ================================= */

/* Globalne – jemne vacsie */
body {
  font-size: 130%;
}

/* Menu / navigacia */
.navigation,
.navigation a {
  font-size: 1em;
}

/* Lava + prava cast */
.left,
.right {
  font-size: 1em;
}

/* STRED – nasilu vratime povodnu velkost */
.middle {
  font-size: 14px;
}














/* =========================================
   NAVIGACIA – 2x VACSIA, DOMINANTNA, NEONOVA
   ========================================= */

/* CELY NAVIGACNY PANEL */
.navigation {
  font-size: 2.6em;                 /* ~2x vacsie */
  border: 3px solid #00aa00;         /* hrube oramovanie */
  padding: 10px 0;
  background: #000;
  text-align: center;
}

/* POLOZKY MENU */
.navigation a {
  display: inline-block;
  padding: 10px 22px;
  color: #9bff9b;
  font-weight: bold;
  letter-spacing: 3px;
  border-right: 2px solid #004400;
  transition:
    color 0.12s linear,
    text-shadow 0.12s linear,
    box-shadow 0.12s linear,
    background-color 0.12s linear;
}

/* POSLEDNA POLOZKA */
.navigation a:last-child {
  border-right: none;
}

/* HOVER – EXTREMNY NEON */
.navigation a:hover {
  color: #00ff00;
  background-color: rgba(0,255,0,0.2);
  text-shadow:
    0 0 12px #00ff00,
    0 0 24px #00ff00,
    0 0 48px rgba(0,255,0,1),
    0 0 72px rgba(0,255,0,0.9);
  box-shadow:
    inset 0 0 16px rgba(0,255,0,0.6),
    0 0 32px rgba(0,255,0,0.9);
  text-decoration: none;
}

/* AKTIVNA STRANKA – VZDY ZIARI */
.navigation .active-page {
  color: #00ff00;
  background-color: rgba(0,255,0,0.25);
  text-shadow:
    0 0 16px #00ff00,
    0 0 36px rgba(0,255,0,1),
    0 0 64px rgba(0,255,0,0.95);
  box-shadow:
    inset 0 0 20px rgba(0,255,0,0.7);
}

/* PULZOVANIE PRI HOVER */
.navigation a:hover {
  animation: navNeonPulseHard 0.9s ease-in-out infinite alternate;
}

@keyframes navNeonPulseHard {
  from {
    text-shadow:
      0 0 12px #00ff00,
      0 0 36px rgba(0,255,0,0.8);
  }
  to {
    text-shadow:
      0 0 20px #00ff00,
      0 0 72px rgba(0,255,0,1);
  }
}