/* Postavke za body i html elemente */
body, html {
    margin: 0; /* Uklanja podrazumevane margine */
    padding: 0; /* Uklanja podrazumevane paddinge */
    height: 100%; /* Postavlja visinu na 100% visine ekrana */
    display: flex; /* Koristi flexbox za centriranje */
    align-items: center; /* Centrira sadržaj vertikalno */
    justify-content: center; /* Centrira sadržaj horizontalno */
    background: url('../images/zadeva.jpg') no-repeat center center fixed; /* Postavlja pozadinsku sliku */
    background-size: cover; /* Osigurava da pozadinska slika pokriva celu stranicu */
    overflow: hidden; /* Skriva scroll barove */
    font-family: Arial, sans-serif; /* Postavlja font */
}

/* Stil za sadržaj */
.content {
    text-align: center; /* Centrira tekst unutar elemenata */
    color: white; /* Postavlja boju teksta na belu */
    font-size: calc(10px + 2vw); /* Postavlja font size koji se prilagođava širini ekrana */
    text-transform: uppercase; /* Pretvara tekst u velika slova */
    letter-spacing: 0.1em; /* Dodaje razmak između slova */
    padding: 20px; /* Dodaje padding */
}

/* Stil za naslov i paragrafe */
.content h1, .content p {
    background-color: rgba(0, 0, 0, 0.4); /* Postavlja providnu crnu pozadinu */
    padding: 10px; /* Dodaje padding unutar elemenata */
    border-radius: 8px; /* Zaobljuje uglove */
    transition: background-color 0.5s ease-in-out; /* Dodaje animaciju za promenu boje pozadine */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Dodaje senku */
    margin: 10px 0; /* Dodaje margine između elemenata */
    text-shadow: 0 0 1px #FFD700, 0 0 10px #FFD700, 0 0 20px #FFD700; /* Dodaje svetleći efekat */
    animation: glow 1.5s infinite alternate; /* Dodaje animaciju svetljenja */
}

/* Animacija za svetleći efekat */
@keyframes glow {
    from {
        text-shadow: 0 0 10px #FFD700, 0 0 10px #FFD700, 0 0 15px #FFD700;
    }
    to {
        text-shadow: 0 0 20px #FFD700, 0 0 15px #FFD700, 0 0 20px #FFD700;
    }
}

/* Efekat hover za naslov i paragrafe */
.content h1:hover, .content p:hover {
    background-color: rgba(0, 0, 0, 0.6); /* Menja boju pozadine prilikom hover efekta */
}

/* Stil za linkove */
a {
    color: #FFD700; /* Postavlja boju linkova na zlatnu */
    text-decoration: none; /* Uklanja podvučenje linkova */
}

/* Efekat hover za linkove */
a:hover {
    text-decoration: underline; /* Dodaje podvučenje prilikom hover efekta */
}

/* Animacija za padanje snega */
@keyframes snowfall {
    0% { transform: translateX(-50px) translateY(-100vh); } /* Početna pozicija pahulje */
    100% { transform: translateX(50px) translateY(100vh); } /* Krajnja pozicija pahulje */
}

.snowflake {
    position: fixed; /* Apsolutno pozicioniranje */
    top: -50px; /* Početna pozicija (izvan ekrana) */
    color: #ffffff; /* Bela boja pahuljica */
    user-select: none; /* Sprečava selektovanje pahuljica */
    z-index: 1000; /* Postavlja pahuljice iznad drugih elemenata */
    opacity: 0.8; /* Delimična providnost */
    font-size: 24px; /* Veličina pahuljice */
    animation-name: snowfall; /* Dodaje animaciju padanja */
    animation-duration: 10s; /* Trajanje animacije */
    animation-timing-function: linear; /* Linearna animacija */
    animation-iteration-count: infinite; /* Beskonačno ponavljanje animacije */
}

/* Dodajemo različite trajanja animacija za pahuljice */
.snowflake:nth-child(odd) {
    animation-duration: 8s; /* Brže padanje za neparne pahuljice */
}

.snowflake:nth-child(even) {
    animation-duration: 12s; /* Sporije padanje za parne pahuljice */
}

.snowflake:nth-of-type(2n) { animation-duration: 6s; left: 20%; } /* Različite animacije za pahuljice */
.snowflake:nth-of-type(3n) { animation-duration: 4s; left: 40%; }
.snowflake:nth-of-type(4n) { animation-duration: 9s; left: 60%; }
.snowflake:nth-of-type(5n) { animation-duration: 12s; left: 80%; }
.snowflake:nth-of-type(6n) { animation-duration: 14s; left: 100%; }
.snowflake:nth-of-type(7n) { animation-duration: 7s; left: 10%; }
.snowflake:nth-of-type(8n) { animation-duration: 5s; left: 30%; }
.snowflake:nth-of-type(9n) { animation-duration: 8s; left: 50%; }
.snowflake:nth-of-type(10n) { animation-duration: 11s; left: 70%; }
.snowflake:nth-of-type(11n) { animation-duration: 13s; left: 90%; }

@keyframes snowfall {
    0% { transform: translateY(-10vh); }
    100% { transform: translateY(100vh); } /* Menjamo sa 110vh na 100vh */
  }