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

body{
    font-family:Arial, sans-serif;
}

/* GLAVNI KONTEJNER - PROMIJENJEN RASPORED PREMA SLICI */
.container{
    display:grid;
    gap:10px;
    width:95%;
    margin:auto;

    /* Dijelimo mrežu na 2 stupca (30% i 70% širine) */
    grid-template-columns: 30% 70%;

    /* Raspored elemenata točno prema skici */
    grid-template-areas:
    "header header"
    "nav section"
    "article aside"
    "footer footer";
}

.container > *{
    padding:15px;
}

/* HEADER */

header{
    grid-area:header;

    height:20vh;

    background-image:url("banner.jpg");
    background-size:cover;
    background-position:center;

    display:flex;
    justify-content:center;
    align-items:center;
}

.plavi-text{
    text-align:center;
    color:Blue;
}

/* NAV */

nav{
    grid-area:nav;
    background:#18b5ae;
}

nav ul{
    display:flex;
    flex-direction: column; /* Promijenjeno u stupac da ljepše stoji u uskom lijevom bloku */
    justify-content:center;
    gap:15px;
    list-style:none;
}

nav a{
    color:white;
    text-decoration:none;
    font-weight:bold;
}

/* SECTION */

section{
    grid-area:section;
    background: #7fcdfd; /* Dodana svijetloplava pozadina sa slike */
}

.kartice{
    display:flex;
    gap:20px;
}

.kartica{
    flex:1;
    position:relative;
}

.kartica img{
    width:100%;
    max-width:100%;
    display:block;
}

.kartica h2{
    position:absolute;
    top:10px;
    left:50%;
    transform:translateX(-50%);

    color:white;
    background:rgba(0,0,0,0.6);

    padding:10px;
}

.kartica p{
    text-align:justify;
    margin-top:10px;
}

/* ARTICLE */

article{
    grid-area:article;
    background:#3fa7c1;
    color:white;
}

article h2{
    margin-bottom:10px;
}

article p{
    margin-bottom:15px;
    text-align:justify;
}

/* ASIDE */

aside{
    grid-area:aside;
    background:#9bd4f0;
    display:flex;
    justify-content:center;
    align-items:center;
}



/* KONTAKT */

.profil{
    width:30%;
    max-width:100%;
    border-radius:10px;
    margin-bottom:20px;
}

/* FOOTER */

footer{
    grid-area:footer;
    height:10vh;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
}

footer img{
    width:40px;
    height:40px;
}

/* SVE SLIKE */

img{
    max-width:100%;
    height:auto;
}

/* MOBITEL */

@media(max-width:600px){

    body{
        background:#ffe5e5;
    }

    .container{
        grid-template-columns:1fr;

        grid-template-areas:
        "header"
        "nav"
        "section"
        "article"
        "aside"
        "footer";
    }

    nav ul{
        flex-direction:column;
        align-items:center;
    }

    .kartice{
        flex-direction:column;
    }

    .profil{
        width:80%;
    }
}

/* TABLET */

@media(min-width:601px) and (max-width:900px){

    body{
        background:#e5ffe5;
    }

    .kartice{
        flex-wrap:wrap;
    }
}

/* DESKTOP */

@media(min-width:901px){

    body{
        background:#e5f2ff;
    }
}

#slikica{
    height:20vh;
    width:30%;
    max-width:100%;
    border-radius:10px;
    margin-bottom:20px;
}

.tiktoks{
    border-radius:5px;
}