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



/* Osnovne stilizacije */
body {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

h1, h2, h3, h4 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #222;
}

/* Stilizacija za linkove */
a {
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    color: #0066cc;
}

a:hover {
    color: #005bb5;
}




body {
    background-color: #f8f9fa;  /* svetla siva pozadina */
    font-family: 'Open Sans', sans-serif;
}
/* Blago zatamnjena pozadina sa belim overlay-em */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2); /* 20% belog sloja preko slike */
    z-index: -1;
}

/* Senka ispod navigacionog menija */
nav {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

/* Promena boje teksta u meniju */
nav a {
    color: #00BFFF; /* Svetloplava boja */
    font-weight: bold;
    text-transform: uppercase; /* Opcionalno, ako želiš da bude sve velikim slovima */
}

/* Poboljšanje padding-a u glavnom sadržaju */
.container {
    padding: 20px;
    border-radius: 10px; /* Blago zaobljeni uglovi */
    background: rgba(255, 255, 255, 0.9); /* Svetla pozadina da istakne tekst */
}



header {
    background-image: url('pozadinaplava.gif');
    background-size: cover; /* Pokriva ceo prostor */
    background-position: center; /* Centriranje pozadine */
    background-repeat: no-repeat;
    width: 100%;
    height: 300px; /* visinа po potrebi */
    display: flex;
    align-items: center; /* Vertikalno centriranje */
    justify-content: center; /* Horizontalno centriranje */
    color: white;
    padding: 40px; /* Unutrašnji razmak */
    text-align: center;
    border-bottom: 4px solid #007bff;
    margin: 0; /* Uklonјаnje margine ako su postavljene */
}

/* Container za glavni sadržaj */
.container {
    display: flex;
    justify-content: space-between;
    width: 90%;
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background: #94d8e1;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.container ul {
    list-style-type: none; /* Ukloni oznake liste */
    padding: 0; /* Ukloni unutrašnju margine */
    margin: 0; /* Ukloni spoljašnje margine */
}

/* Stilizacija svakog elementa liste */
.container li {
    padding: 10px 15px; /* Unutrašnja margina za svaki element liste */
    margin-bottom: 10px; /* Razmak između elemenata liste */
    background: #f0f0f0; /* Pozadina elementa */
    border-radius: 8px; /* Zaobljeni uglovi */
    transition: background 0.3s; /* Animacija promene pozadine */
}

/* Efekat hover-a za elemente liste */
.container li:hover {
    background: #e0e0e0; /* Promena pozadine na hover */
}




/* Sidebar sekcija */
.sidebar {
    flex: 1;
    margin-right: 20px;
    padding: 20px;
    background: #e9ecef;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Sekcija za vesti */
.news-section {
    flex: 3;
    margin-bottom: 20px;
}

.news-section h2 {
    color: #007bff;
    border-bottom: 2px solid #007bff;
    padding-bottom: 5px;
}

.news-box {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fafafa;
    transition: box-shadow 0.3s;
}
.news-box p {
    word-wrap: break-word; /* Prelomi duge reči u tekstu */
    overflow-wrap: break-word;
    margin: 0; /* Postavi marginu na 0 za bolju kontrolu */
}
.news-box {
    width: 100%; /* Kontejner zauzima punu širinu */
    max-width: 100%; /* Sprečava prelaženje izvan kontejnera */
}




.news-box:hover {
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.2);
}

.news-box img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

/* Materijali i korisni linkovi */
.materials-section {
    background-color: silver;
    padding: 20px;
    margin-top: 30px;
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.sidebar-links {
    flex: 1;
    padding: 20px;
    background-color:#6c757d;
    margin-bottom: 20px;
/* Dodaj max-width i centriranje */
    max-width: 300px; /* Maksimalna širina kontejnera */
    margin: 0 auto; /* Centriranje kontejnera */
    border-radius: 10px; /* Zaobljeni uglovi */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Blaga senka */
}

.sidebar-links ul {
    list-style-type: none;
    padding: 0;
}

.sidebar-links ul li {
    margin-bottom: 10px;
}

.sidebar-links ul li a {
    text-decoration: none;
    color: #0066cc;
}

.sidebar-links ul li a:hover {
    text-decoration: underline;
}


/* Footer stil */
footer {
    width: 100%;
    background-color: #01596d; /* Ista boja kao i navigacioni meni */
    color: white; /* Boja teksta u footeru */
    text-align: center;
    padding: 20px 0; /* Razmak oko sadržaja u footeru */
    position: relative;
    bottom: 0;
}

footer ul {
    list-style-type: none; /* Bez tačaka pored stavki */
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

footer ul li {
    margin-right: 20px;
}

footer ul li a {
    color: white; /* Boja linkova */
    text-decoration: none;
    padding: 14px 20px;
    transition: background-color 0.3s ease;
}

footer ul li a:hover {
    background-color: #111; /* Hover efekat, ista nijansa kao u meniju */
}

footer p {
    margin-top: 10px;
    font-size: 14px;
    color: #aaa; /* Svetlija nijansa za tekst u footeru */
}


/* Sekcija za sadržaj-o portalu */
.content-section {
    flex: 3; /* Daje više prostora sekciji vesti */
    margin-bottom: 20px;
}

/* Stil za naslove unutar sekcije */
.content-section h2 {
    color: #007bff; /* Plava boja za naslove */
    font-size: 24px; /* Veći font za bolje isticanje */
    border-bottom: 2px solid #007bff; /* Linija ispod naslova */
    padding-bottom: 10px; /* Razmak između naslova i sadržaja */
}

.content-item {
    background: #ffffff;
    margin: 10px 0;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* Stil za slike u literaturi */
.book-image {
    max-width: 300px;
    height: auto; /* Automatski podešava visinu proporcionalno */
    margin-bottom: 20px; /* Prostor ispod slike */
    border-radius: 8px; /* Zaobljeni uglovi (opciono) */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Efekat senke (opciono) */
}


@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Prebaci kontejnere u kolonu za mobilne uređaje */
        width: 100%; /* Kontejner zauzima celu širinu ekrana */
        padding: 10px; /* Smanji padding */
    }

    .sidebar, .news-section {
        width: 100%; /* Boksevi zauzimaju 100% širine na manjim ekranima */
        margin-right: 0; /* Ukloni margin desno */
    }

    .news-box img {
        max-width: 100%; /* Obezbedi da slike ne prelaze širinu kontejnera */
    }
}


@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

input::-webkit-credentials-auto-fill-button {
    display: none;
}


input[name="query"] {
    padding: 5px;
    width: 250px;
    border-radius: 5px;
    border: 1px solid #888;
}
button[type="submit"] {
    padding: 5px 10px;
    border: none;
    background-color: #0077b6;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}