body {
    background-color: lightblue;
    margin: 5px;
}

h1{
   border: 3px dotted;
    font-size: 55px;
    text-align: center;
    color: darkblue;
    font-family: "press Start 2P", "consolas";
}

p{
    font-size: 25px;
    color: darkblue;
    list-style-type: none;
    text-align: center;
    justify-content: center;
    width: relative;
}


.navbar ul{
    font-size: 20px;
    color: darkblue;
    border: 3px dotted;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    text-align: center;
    list-style-type: none;
    justify-content: center;
}

.navbar a{    /*za linkove*/
    color: darkblue;
    padding: 15px;
    display: block; 
}

/*.navbar a :hover{       /*hover kad se prijeđe preko toga bit će zadana boja
    background-color:yellow;
    color: green;
}*/

.navbar li{  /*za listu*/
    float: left;   /*left da riječi redom jedna do druge od L do D*/
    text-align: center;
}

.navbar::after {
    content: "";
    clear: both;
    display: table;
}

/*sve mi se poremetila taj navbar, ide naopako, s desna na lijevo*/

img {
    width: 100%;
    height: auto;
    justify-content: center;
}

/* Osnovni stilovi NOVO dodala za responzivnost*/

.navbar {
    background-color: lightblue; /* Cijela traka lightblue */
}

.navbar ul {
    list-style: none;
    padding: 1rem;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.navbar li {
    margin: 0;
    /* više nema background-color ovdje */
}

.navbar a {
    text-decoration: none;
    padding: 0.5rem 1rem;
    background-color: #add8e6; /* svijetlo plava */
    color: black;
    border-radius: 5px;
    display: inline-block;
    transition: 0.3s;
}

.navbar a:hover {
    background-color: darkblue;
    color: white;
}

@media (max-width: 600px) {
    .navbar ul {
        flex-direction: column;
        align-items: center;
    }

    .navbar a {
        width: 80%;
        text-align: center;
    }
}