body {
    font-family: Arial, sans-serif; /* Postavlja font za ceo dokument */
    background-color: #f4f4f9; /* Postavlja pozadinsku boju ako slika nije dostupna */
    background-image: url('../images/rewards.jpg'); /* Postavlja pozadinsku sliku */
    background-size: cover; /* Osigurava da slika pokriva celu pozadinu */
    padding: 20px; /* Dodaje unutrašnji razmak */
    margin: 0; /* Uklanja podrazumevane margine */
    overflow: hidden; /* Sprečava pojavu scrollbar-a zbog pahuljica */
    height: 100vh; /* Postavlja visinu body-a na 100% visine ekrana */
    position: relative; /* Potrebno za apsolutno pozicioniranje pahuljica */
}

.content {
    border: 2px solid black; /* Dodaje crni okvir */
    padding: 20px; /* Unutrašnji razmak */
    margin: 20px auto; /* Centrira kontejner i dodaje razmak */
    background-color: rgba(255, 255, 255, 0.3); /* Poluprozirna bela pozadina */
    border-radius: 25px; /* Zaobljuje uglove (povećano za više zaobljenosti) */
    text-align: center; /* Centrira tekst */
    transition: all 0.3s ease; /* Dodaje animaciju za sve promene */
    max-width: 600px; /* Ograničava širinu kontejnera */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Dodaje senku za dubinski efekat */
}

.content:hover {
    transform: scale(1.05); /* Uvećava kontejner na hover */
    background-color: rgba(255, 255, 255, 0.5); /* Menja boju pozadine na hover */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* Povećava senku na hover */
}

.button {
    display: block; /* Pretvara dugme u blok element */
    width: 200px; /* Postavlja širinu dugmeta */
    padding: 15px; /* Povećan unutrašnji razmak za veću vidljivost */
    margin: 20px auto; /* Centrira dugme i dodaje razmak */
    background-color: rgba(76, 175, 80, 0.5); /* Intenzivnija zelena pozadina */
    color: white; /* Bela boja teksta */
    border: 2px solid rgba(255, 255, 255, 0.8); /* Beli okvir sa većom providnošću */
    border-radius: 25px; /* Zaobljuje uglove dugmeta (povećano za više zaobljenosti) */
    text-align: center; /* Centrira tekst unutar dugmeta */
    text-decoration: none; /* Uklanja podvučenost teksta */
    font-size: 18px; /* Povećana veličina fonta */
    font-weight: bold; /* Podebljan tekst */
    transition: background-color 0.3s, transform 0.3s, border-color 0.3s; /* Dodaje animaciju */
    animation: pulse 1.5s infinite; /* Pulsirajuća animacija */
}

.button:hover {
    background-color: rgba(69, 160, 73, 0.7); /* Intenzivnija zelena pozadina na hover */
    transform: scale(1.1); /* Uvećava dugme na hover */
    border-color: rgba(255, 255, 255, 1); /* Menja boju okvira na hover */
}

/* Pulsirajuća animacija za dugme */
@keyframes pulse {
    0% { transform: scale(1); } /* Početna veličina */
    50% { transform: scale(1.1)}; /* Uvećava se za 10% */
    100% { transform: scale(1)}; /* Vraća se na početnu veličinu */
}

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