/* OSNOVNO */
body.light-theme {
  background-color: #F0FFF0;
  color: #001a00;
  font: 15px Comic Sans MS, comic-sans-ms;
}

body.dark-theme {
  background-color: #000000;
  color: #39ff14;
  font: 15px Comic Sans MS, comic-sans-ms;
}

/* NEON TEKST */
.font-effect-neon {
  text-shadow: 
    0 0 0.1em #ccffcc,
    0 0 0.2em #ccffcc,
    0 0 0.3em #99ff99,
    0 0 0.4em #66ff66,
    0 0 0.6em #33ff33,
    0 0 0.8em #00ff00,
    0 0 1.0em #00ff00,
    0 0 1.2em #00ff00;
  /*color: #ffffff;*/
}

/* NASLOV */
.h1slov {
  background-color: #001a00;
  border: 4px solid #39ff14;
  border-radius: 17.5px;
  color: white;
  text-align: center;
  letter-spacing: 7px;
  font: 50px Comic Sans MS, comic-sans-ms;      
}

/* PARAGRAFI */
p {
  font-style: italic;
  font-family: 'Comic Sans MS','GT Maru','Uberhand Pro';
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 2px;
  opacity: 0.9;
  margin-bottom: 20px;
}

/* NAVIGACIJA */
nav {
  background-color: #001a00;
  padding: 10px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
}

nav ul li {
  position: relative;
  margin: 0 15px;
}

nav ul li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 14px;
  transition: 0.3s;
  display: block;
}

nav ul li a:hover {
  background-color: #39ff14;
  color: black;
  border-radius: 5px;
}

/* DROPDOWN */
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #001a00;
  min-width: 220px;
  padding: 8px 0;
  margin: 0;
  border-radius: 5px;
  z-index: 2000;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content li {
  display: block;
  width: 100%;
  margin: 0;
}

.dropdown-content a {
  display: block;
  padding: 12px 18px;
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
}

.dropdown-content a:hover {
  background-color: #39ff14;
  color: black;
}

/* CONTENT BOX */
.content-box {
  max-width: 900px;
  margin: 30px auto;
  padding: 25px;
  background-color: #001a00;
  border-radius: 12px;
  box-shadow: 0 0 12px #39ff14;
  color: #39ff14;
}

.content-box h2 {
  text-align: center;
}

/* FOOTER */
.footer {
  background-color: #001a00;
  text-align: center;
  padding: 10px;
  color: #39ff14;
}

.hf {
  font: 20px Comic Sans MS, comic-sans-ms;
}

/* TEMA TOGGLE IKONA */
#tema-toggle {
  font-size: 22px;
  cursor: pointer;
}

#tema-toggle:hover {
  background-color: #39ff14;
  color: black;
  border-radius: 50%;
  box-shadow: 0 0 10px #39ff14;
}

/* LIGHT THEME - isto kao default */
body.light-theme {
  background-color: #F0FFF0;
  color: #001a00;
}

body.light-theme nav {
  background-color: #001a00;
}

body.light-theme .footer {
  background-color: #001a00;
  color: #39ff14;
}

body.light-theme .h1slov {
  background-color: #001a00;
  border-color: #39ff14;
  color: white;
}

body.light-theme .content-box {
  background-color: #001a00;
  color: #39ff14;
  border-color: #39ff14;
}

body.light-theme .content-box h2,
body.light-theme .content-box p {
  color: #39ff14;
}

body.light-theme nav ul li a {
  color: white;
}

body.light-theme nav ul li a:hover {
  background-color: #39ff14;
  color: black;
}


/* DARK THEME OVERRIDE */
body.dark-theme nav,
body.dark-theme .footer,
body.dark-theme .h1slov,
body.dark-theme .content-box {
  background-color: #001a00;
  color: #39ff14;
  border-color: #39ff14;
}


.autor-svg-box {
  text-align: center;
  margin: 30px auto;
}

.svg-okvir {
  fill: #001a00;
  stroke: #39ff14;
  stroke-width: 4;
  filter: drop-shadow(0 0 12px #39ff14);
  animation: okvirSjaj 2s infinite alternate;
}

.svg-tekst {
  font-family: "Comic Sans MS", cursive;
  fill: #39ff14;
  font-weight: bold;
  filter: drop-shadow(0 0 8px #39ff14);
}

.ime {
  font-size: 42px;
  animation: tekstPomak 3s infinite alternate;
}

.skola {
  font-size: 28px;
  animation: tekstSjaj 2s infinite alternate;
}

.godina {
  font-size: 24px;
  animation: tekstSjaj 2.5s infinite alternate;
}

@keyframes okvirSjaj {
  from {
    stroke: #006600;
    filter: drop-shadow(0 0 4px #39ff14);
  }
  to {
    stroke: #39ff14;
    filter: drop-shadow(0 0 18px #39ff14);
  }
}

@keyframes tekstPomak {
  from {
    transform: translateX(-10px);
  }
  to {
    transform: translateX(10px);
  }
}

@keyframes tekstSjaj {
  from {
    opacity: 0.6;
  }
  to {
    opacity: 1;
  }
}