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

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: Arial, sans-serif;
}

header, footer {
    background: #333;
    color: white;
    text-align: center;
    padding: 20px;
}

main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 900px;
    justify-content: center;
}

.box {
    width: 200px;
    height: 150px;
    background-size: cover;
    background-position: center;
}

/* Default slike */
.box:nth-child(1) { background-image: url('../zadatak_6.3/images/slika1.jpg.jpg'); }
.box:nth-child(2) { background-image: url('../zadatak_6.3/images/slika2.jpg.jpg'); }
.box:nth-child(3) { background-image: url('../zadatak_6.3/images/slika3.jpg.jpg'); }
.box:nth-child(4) { background-image: url('../zadatak_6.3/images/slika4.jpg.jpg'); }
.box:nth-child(5) { background-image: url('../zadatak_6.3/images/slika5.jpg.jpg'); }
.box:nth-child(6) { background-image: url('../zadatak_6.3/images/slika6.jpg.jpg'); }
.box:nth-child(7) { background-image: url('../zadatak_6.3/images/slika7.jpg.jpg'); }
.box:nth-child(8) { background-image: url('../zadatak_6.3/images/slika8.jpg.jpg'); }
.box:nth-child(9) { background-image: url('../zadatak_6.3/images/slika9.jpg.jpg'); }

/* Hover swap */
.box:nth-child(1):hover { background-image: url('../zadatak_6.3/images/slika1b.jpg.jpg'); }
.box:nth-child(2):hover { background-image: url('../zadatak_6.3/images/slika2b.jpg.jpg'); }
.box:nth-child(3):hover { background-image: url('../zadatak_6.3/images/slika3b.jpg.jpg'); }
.box:nth-child(4):hover { background-image: url('../zadatak_6.3/images/slika4b.jpg.jpg'); }
.box:nth-child(5):hover { background-image: url('../zadatak_6.3/images/slika5b.jpg.jpg'); }
.box:nth-child(6):hover { background-image: url('../zadatak_6.3/images/slika6b.jpg.jpg'); }
.box:nth-child(7):hover { background-image: url('../zadatak_6.3/images/slika7b.jpg.jpg'); }
.box:nth-child(8):hover { background-image: url('../zadatak_6.3/images/slika8b.jpg.jpg'); }
.box:nth-child(9):hover { background-image: url('../zadatak_6.3/images/slika9b.jpg.jpg'); }