/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
}


/* POZADINA */

body{

font-family:"Segoe UI", sans-serif;

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

background: radial-gradient(circle at top,#ffd6ec,#ff9fcf);

color:#5a2a45;

}


/* GLAVNI OKVIR */

.container{

background:white;

border:1px solid rgba(255,182,193,0.5);

padding:60px 70px;

border-radius:22px;

box-shadow:0 15px 40px rgba(255,105,180,0.25);

text-align:center;

width:90%;

max-width:900px;

}


/* NASLOV */

h1{

font-size:32px;

margin-bottom:40px;

font-weight:600;

letter-spacing:1px;

color:#d63384;

}


/* GRID ZA GODINE */

.slova{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(160px,1fr));

gap:20px;

}


/* KARTICE GODINA */

.slova a{

text-decoration:none;

background:linear-gradient(145deg,#ff7ac3,#ff4fa3);

padding:20px;

border-radius:12px;

color:white;

font-weight:600;

font-size:15px;

transition:0.3s;

box-shadow:0 8px 20px rgba(255,105,180,0.35);

}


/* HOVER */

.slova a:hover{

transform:translateY(-6px) scale(1.05);

background:linear-gradient(145deg,#ff4fa3,#ff1e8a);

box-shadow:0 15px 35px rgba(255,105,180,0.5);

}


/* LISTE ZADATAKA */

ul{

list-style:none;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(200px,1fr));

gap:16px;

margin-top:20px;

}


/* KARTICE ZADATAKA */

a.link,
a.link1{

display:block;

text-decoration:none;

background:#ffe6f2;

padding:16px;

border-radius:10px;

color:#d63384;

font-size:14px;

font-weight:500;

border:1px solid #ffc2e0;

transition:0.25s;

}


/* HOVER ZADATAKA */

a.link:hover,
a.link1:hover{

background:#ff7ac3;

color:white;

transform:translateY(-4px);

box-shadow:0 10px 25px rgba(255,105,180,0.35);

}


/* PODNASLOVI */

h2{

margin-bottom:20px;

font-size:24px;

color:#d63384;

}


/* GUMB POČETNA */

a[href="index.html"]{

position:absolute;

top:25px;

left:25px;

text-decoration:none;

background:#ff4fa3;

padding:8px 16px;

border-radius:8px;

font-size:13px;

color:white;

transition:0.2s;

}

a[href="index.html"]:hover{

background:#ff1e8a;

}


/* MOBITEL */

@media(max-width:600px){

.container{

padding:40px 25px;

}

h1{

font-size:24px;

}

}