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

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

.grid-container{
    display:grid;

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

    grid-template-columns:1fr 1fr 1fr;

    gap:10px;

    width:95%;
    margin:auto;
}

.hero{
    grid-area:header;

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

    width:100%;
    height:20vh;

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

    text-align:center;
    color:blue;
}

nav{
    grid-area:nav;
    background:#00b894;
    padding:20px;
}

nav ul{
    list-style:none;
}

nav li{
    margin:10px 0;
}

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

section{
    grid-area:section;
    padding:20px;
}

article{
    grid-area:article;
    width:70%;
    padding:20px;
}

aside{
    grid-area:aside;
    padding:20px;
}

footer{
    grid-area:footer;

    height:10vh;

    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
}

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

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

.card{
    width:33%;
    position:relative;
}

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

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

    padding:5px 10px;
}

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

.profil{
    width:250px;
    display:block;
    margin:auto;
}

.moto{
    text-align:center;
    font-style:italic;
    font-weight:bold;

    border:3px solid gold;
    border-radius:15px;

    background:#fff4c2;
}

.social{
    width:40px;
    height:40px;
}

/* NASLOVNICA */

.naslovnica{
    background:#d6eaff;
}

.naslovnica section{
    background:#74c0fc;
}

.naslovnica article{
    background:#a5d8ff;
}

.naslovnica aside{
    background:#d0ebff;
}

/* PORTAL */

.portal{
    background:#e6ffe6;
}

.portal section{
    background:#69db7c;
}

.portal article{
    background:#b2f2bb;
}

.portal aside{
    background:#d3f9d8;
}

/* KONTAKT */

.kontakt{
    background:#fff0d9;
}

.kontakt section{
    background:#ffc078;
}

.kontakt article{
    background:#ffd8a8;
}

.kontakt aside{
    background:#ffe8cc;
}

/* TABLET */

@media screen and (max-width:768px){

    .grid-container{
        grid-template-areas:
        "header"
        "nav"
        "section"
        "article"
        "aside"
        "footer";

        grid-template-columns:100%;
    }

    .cards{
        flex-direction:column;
    }

    .card{
        width:100%;
    }
}

/* MOBITEL */

@media screen and (max-width:480px){

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