/* Postavke za body i html elemente */
body, html {
    margin: 0; /* Uklanja podrazumevane margine */
    padding: 0; /* Uklanja podrazumevane paddinge */
    font-family: 'Arial', sans-serif; /* Postavlja font na Arial */
    font-weight: bold; /* Postavlja debljinu fonta na bold */
    background: url('../images/bozicnaslika.jpg') no-repeat center center scroll; /* Postavlja pozadinsku sliku */
    background-size: cover; /* Osigurava da pozadinska slika pokriva celu stranicu */
}

/* Stil za header */
header {
    background-color: rgba(0, 0, 0, 0.6); /* Postavlja providnu crnu pozadinu */
    color: #FFD700; /* Postavlja boju teksta na zlatnu */
    padding: 30px 0; /* Dodaje padding iznad i ispod teksta */
    text-align: center; /* Centrira tekst */
}

/* Stil za main deo */
main {
    color: #ff0000; /* Postavlja boju teksta na crvenu */
    text-align: center; /* Centrira tekst */
    padding: 20px; /* Dodaje padding oko sadržaja */
}

/* Stil za sekcije introduction i features */
.introduction, .features {
    background-color: rgba(0, 0, 0, 0.6); /* Postavlja providnu crnu pozadinu */
    color: rgb(255, 0, 0); /* Postavlja boju teksta na crvenu */
    margin: 20px auto; /* Centrira sekcije i dodaje margine */
    padding: 20px; /* Dodaje padding unutar sekcija */
    width: 80%; /* Postavlja širinu sekcija na 80% širine roditeljskog elementa */
    border-radius: 15px; /* Zaobljuje uglove sekcija */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Dodaje senku */
    transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out; /* Dodaje animaciju za transformaciju i senku */
}

/* Efekat hover za sekcije introduction i features */
.introduction:hover, .features:hover {
    transform: scale(1.03); /* Uvećava sekciju za 3% */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); /* Povećava senku */
}

/* Stil za footer */
footer {
    background-color: rgba(0, 0, 0, 0.6); /* Postavlja providnu crnu pozadinu */
    color: white; /* Postavlja boju teksta na belu */
    text-align: center; /* Centrira tekst */
    padding: 10px 0; /* Dodaje padding iznad i ispod teksta */
    width: 100%; /* Postavlja širinu footera na 100% */
}

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

/* Dodatni efekti za sjaj oko slova */
.introduction h2, .features h2 {
    text-shadow: 0 0 10px #FFD700, 0 0 20px #FFD700, 0 0 30px #FFD700; /* Dodaje sjaj oko slova */
    animation: glow 1.5s infinite alternate; /* Dodaje animaciju sjaja */
}

/* Animacija za sjaj */
@keyframes glow {
    from {
        text-shadow: 0 0 10px #FFD700, 0 0 20px #FFD700, 0 0 30px #FFD700;
    }
    to {
        text-shadow: 0 0 20px #FFD700, 0 0 30px #FFD700, 0 0 40px #FFD700;
    }
}

.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 */
  }