body, html {
    height: 100%; /* Postavlja visinu body i html elemenata na 100% visine prozora pregledača */
    margin: 0; /* Uklanja podrazumevane margine */
    padding: 0; /* Uklanja podrazumevane paddinge */
    display: flex; /* Koristi Flexbox za poravnavanje elemenata */
    flex-direction: column; /* Elementi su poređani vertikalno */
    justify-content: center; /* Centrira elemente vertikalno */
    align-items: center; /* Centrira elemente horizontalno */
    background: url('../images/bozicnakuca.jpg') no-repeat center center fixed; /* Postavlja pozadinsku sliku */
    background-size: cover; /* Osigurava da pozadinska slika pokriva celu stranicu */
}

.social-links, .buy-token {
    text-align: center; /* Centrira tekst unutar kontejnera */
    padding: 20px; /* Dodaje unutrašnji razmak od 20px */
    border-radius: 8px; /* Zaobljuje uglove kontejnera */
    background-color: rgba(255, 255, 255, 0.8); /* Postavlja poluprozirnu belu pozadinu */
    margin-bottom: 10px; /* Dodaje razmak između kontejnera */
}

.social-links a, .buy-token a {
    color: #333; /* Boja teksta */
    font-size: 24px; /* Veličina fonta */
    margin: 10px; /* Spoljašnji razmak između linkova */
    padding: 15px 20px; /* Unutrašnji razmak unutar linkova */
    text-decoration: none; /* Uklanja podvučenost linkova */
    display: inline-block; /* Linkovi se ponašaju kao blokovi, ali u istoj liniji */
    border-radius: 5px; /* Zaobljuje uglove linkova */
    background-color: #f8f8f8; /* Svetlo siva pozadina linkova */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Dodaje senku */
    transition: all 0.3s ease; /* Dodaje animaciju za sve promene stilova */
    position: relative; /* Omogućava pozicioniranje pseudo-elemenata */
    overflow: hidden; /* Skriva sadržaj koji prelazi granice elementa */
}

.social-links a::before, .buy-token a::before {
    content: ''; /* Obavezno za pseudo-elemente */
    position: absolute; /* Pozicionira pseudo-element u odnosu na roditelja */
    top: 50%; /* Postavlja pseudo-element na 50% visine roditelja */
    left: 50%; /* Postavlja pseudo-element na 50% širine roditelja */
    width: 300%; /* Širina pseudo-elementa */
    height: 300%; /* Visina pseudo-elementa */
    background-color: rgba(255, 255, 255, 0.3); /* Poluprozirna bela pozadina */
    border-radius: 50%; /* Pretvara pseudo-element u krug */
    transform: translate(-50%, -50%) scale(0); /* Centrira i smanjuje pseudo-element na početku */
    transition: transform 0.5s ease; /* Dodaje animaciju za transformaciju */
}

.social-links a:hover, .buy-token a:hover {
    background-color: #e8e8e8; /* Menja boju pozadine prilikom hover-a */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* Povećava senku prilikom hover-a */
    transform: translateY(-5px); /* Pomera link naviše za 5px prilikom hover-a */
}

.social-links a:hover::before, .buy-token a:hover::before {
    transform: translate(-50%, -50%) scale(1); /* Povećava pseudo-element tokom hover-a */
}

.buy-token a {
    background-color: #ffcc00; /* Žuta pozadina */
    color: #000; /* Crna boja teksta */
    font-weight: bold; /* Podebljan tekst */
    animation: pulse 2s infinite; /* Dodaje pulsirajuću animaciju */
}

@keyframes pulse {
    0% { transform: scale(1); } /* Početna veličina */
    50% { transform: scale(1.05)}; /* Povećava se za 5% */
    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 */
  }