/* ovo sam jer tako pise u uputstvu i pravilim prma kojim parim ovaj web a služi da prilagodim boje*/
:root{
--glavna-boja: rgb(173, 167, 134); /* ovo sam stavio da jer mi je ova boja glavna pa da je mogu dodati sa --glavna-boja a ne da svaki put pisem adresu ove boje*/
--boja-teksta-svetla: aliceblue;
--boja-teksta-tamna: black;
--futer-bg: rgb(0, 0, 0);
--futer-tekst: rgb(255, 255, 255);
--senka-boja: rgb(70, 67, 40);
}
/* ovo sam stavio radi fonta da bude u stilu pisace masine */
.pisacam {
  font-family: "Special Elite", system-ui;
  font-weight: 400;
  font-style: normal;
}
/* ovo sam otvorio class heder da bi logotip i linkovi bili u istoj ravni */
.heder
{
    display: flex;
    flex-wrap: wrap;  /* ovo sam stavio da mi sajt ne raspadne na telefonu ili uskom monitoru */
    align-items: center;
    padding: 20px 5%;
    box-shadow: 0px 16px 32px var(--glavna-boja);
}

/* ovo sam stavio da bi linkovi koji vode o informacija o sajtu bili desno*/
.heder ul
{
    flex: 0.30;
    display: flex;
    flex-wrap: wrap;
    list-style: none; /* ovo sam stavio da uklonim tacke prije liste radi estetike */
    font-size: x-large;
    padding: auto;
    gap: 20px; /* ovo sam stavio da stavke sa liste budu odvojene jedna od druge*/
    margin: 20px;
}
/* ovo sam stavio da linovi nemaju crtispod i da su crni*/
.heder a{
text-decoration: none; /* ovo sam stavio da linkovi nemaju crtu ispod i to sam uradio radi estetike sajta*/
color: var(--boja-teksta-tamna); 
flex: 1;
}
/* ovo sam stavio da bi linkovi promjenili boju kada predjem kursorom preko njih */
.heder a:hover{
color:  var(--glavna-boja);
}
/* ovo sam stavio da stilizujem futer*/
.futer
{
    background-color: var(--futer-bg);
    text-align: center;
    color: var(--futer-tekst);
    
}
/* ovo sam stavio da uredim linove u futeru */
.futer a
{
    text-decoration-style: none;
    color: var(--futer-tekst);
    margin: 5px;
}
/* ovo sam stavio da bi istaknuo svoje ime drugim fontom*/
.autor
{
  font-family: "Instrument Serif", serif;
  font-weight: 1000;
  font-style: italic;
  font-size: large;
}
.informacije
{
    background-color: var(--glavna-boja);
    padding: 2.5%;
    margin: 1%;
    border-radius: 20px;
    color: var(--boja-teksta-svetla)
}
/* ovo sam stavio da promjenim font naslva informacija o veb-sajtu*/
.naslovinainfo {
 font-family: "Bungee", sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: xx-large;
  text-align: center;
  justify-content: center;
}
/* ovo sam stavio da kada predjem kursorom prko informacija da imaju sijenku ispod sebe*/
.informacije:hover
{
    box-shadow: 0px 8px 16px var(--senka-boja);
}
/* ovo sam stavio da svaki clanak bude uoAkviren i izdvojen od ostalih elemenata sajta */
.clanakbox
{
    width: 100%;
    height: 350px;
    border: 2px solid var(--glavna-boja);
    margin: auto;
    padding: auto;
    border-radius: 20px; /* ovo sam stavio da div bude uokviren */
    max-height: 750px;
    text-align: center;
    justify-content: center;
    padding-bottom: 40px; /* ovo sam stavio da se sajt ne raspadne kada ga smanjimo ili povecamo ili gledamo sa drugog uređaja*/
    max-width: 450px; /* isto kao i kod predhodnelinije koda samo sto ovo odranicava maksimalnu visinu diva clanaka */
}
/* ovo sam stavio da bi slike se mogle prilagoditi box-u u clanku*/
.clanakslika
{
    max-width: 100%;
    width: 400px; 
    height: 250px;
    object-fit: contain; /* ovo sam stavio da se slike prilagode boxu*/
    object-position: center; /* ovo sam stavio da se slike centriraju */
}
/* ovo sam stavio da linkovi koje vode na cijeo clanak budu bijeli, veliki i da nemaju liniju ispod */
.clanaklink
{
    text-decoration: none; /* ovo sam stavio da link nema linije ispod */
    color: var(--boja-teksta-tamna);
    font-size: 24px;
}
.clanci
/* ovo sam stavio da mi vise clanaka bude u jednom red/ravni */
{
    display: flex;
    flex-wrap: wrap; /* ovo sam stavio da kada sajt gledamo sa telefona ili nekog monitora koji je uži od 16:9 monitora clanci umjesto jedan kraj drugog budu jedan ispod drugog */
    gap: 20px; /* ovo sam stavio da napravim gap izmedju clanaka */
}
/* ovo sam stavio da box clanaka ima sijenuku kada predem kursorom preko njega*/
.clanakbox:hover
{
    box-shadow: 0px 32px 64px;
    color: var(--glavna-boja);
}
/* ovo sam stavio da bi linkovi koje vode do clanak promijene boju kada predjem preko njih*/
.clanaklink:hover
{
    color: var(--glavna-boja);
}