/* FONT AND TEXT TRANSFORM

font-family: naziv fonta koji koristimo

font-weight: velicina slova i izgled kao bold, light...
font-style: italic, oblique...
text-align: pozicija teksta (normalna je left)
text-indent: velicina pocetka pasusa
line-height: razmak izmedju redova
letter-spacing: razmak izmedju slova
word-spacing: razmak izmedju reci
text-transform: velika mala slova...
text-decoration: none je brisanje linije ispod linka
*/

/*CSS BOX MODEL

padding: deo oko teksta
margin: da bi se svi delovi spojili, svuda margina mora da bude 0
skoro uvek nacin za to je staviti *{margin:0}
border: granica izmeju paddinga i margine
border-radius: zakrivljene stranice tabele
*/

/*OUTLINE AND OFFSET

outline-offset: 10px napravicemo prostor izmedju dela gde je tekst i bordera
*/

/*DISPLAY PROPERTY
BLOCK: deluje po celoj sirini ekrana i zapocinje svaki put novi red
INLINE: deluje na koliko mu j epotrbno prostora i zapocinje u nastavku
div ide uz block
span ide uz inline
ili samo pisem display: inline ili block
postoji isto tako i display: inline-block
*/

/* IMAGES AS BACKGROUNDS i favicon slika

favicon slika se dodaje u head-u, <link rel="icon" href="./images/..."
type="image/png">
background: url("./slika);
male slike ce se ponavljati mnogo puta da bi popunile prostor
background-repeat: no repeat nema ponavljanja slike iako je mala
background-size: cover pokriva sve
background-size: contain slika ce se ponavljati
background-position(menjanje pozicije pozadine)
background-position: center u centru je pozadina
top, bottom, right, left
backgroung-position: x, y koordinatne vrednosti kada kucamo u brojevima
background-attachment: fixed stavljamo kod slike koja se ne povera, vec se pomera
samo tekst koji je na njoj
*/

/*gradients
najpoznatije je linear gradients
kucamo kao
background: linear-gradient(pozicija u koju se preliva boja, boja1, boja2), slika
ako je imamo i dodamo jos *cover/center* fixed no-repeat
*redosled mora biti isti kao na prethodnoj slici*
*/

/*POSITIONS
float
biramo na koju ce stranu ici slika
i sve sto se nalazi iza slike nalazice se na suprotnoj strani floata

position STATIC
normalno je static i sve ce biti na levoj strani
tekst i ostalo

position RELATIVE
ako stavimo npr top 50px pomerice se sve na dole

position Fixed
cesto se koristi za navigation
mora se navesti i mesto tipa
top 0
right 0
nalazice se gore desno uvek kada skrolujemo dole!
*/

/*pseudo i child selectori

pseudo se dodaje nakon :
primer h2:hover{...}
ili :link, :visited, :nth(2,even,odd) su najpoznatiji
child se odnosi na neki child unutar nekog parenta npr
h2+a{...}posle svakog h2 svi a linkovi ce imati odredjene...
textarea~button{...} dugme nakon svake textarea imace odredjene...
ul>li{...}svi li koji se nalaze kod ul-eva ce biti odredjene boje ili nes drugo
header :is(p, .a) {color: blue}, svi p i linkovi unutar header-a bice plavi
transition: npr background vreme ease-in-out
***Ako zelimo da na svim browserima bude podrzana transition moramo
da dodajemo nekoliko puta prefikse
***VIDETI U PRIMERU U VS CODU - FOLDER 0 TO HERO!!!
*/

/*UNITS (MERNE JEDINICE U CSS)

mogu biti absolute i relative
absolute su inch, cm, mm i one su iste na svim uredjajima
relative su %, em, rem, px itd i one se odnose na svog parent-a koji je
obicno body pa ako kazemo da je sirina slike 70% znaci da ona zauzima 70% sirine
bodija odnosno tela sajta i to je nesto sto je vrlo dobro za responsive design
i % su uvek bolji od px za responsive design zato sto ako kazemo da je
sirina slike 100px ona ce biti isto takva i na telefonu, nece se smanjiti
*/

/*FLEXBOX
koristimo kako bi sredili gde se sta nalazi na stranici
uglavnom imamo kontejner kao div i unutar njega imamo item-e
display kontejnera moramo staviiti na flex i kasnije onda imamo
justify content(levo centar desno) i align items(gore centar dole)
flex direction je uglavnom row ali je po defaultu column
flex wrap je wrap uvek skoro ali je po defaultu no wrap
***kod item-a mozemo dodati order u inline style i tako menjati
sta se na kom mestu nalazi pomocu brojeva od 1 do beskonacno
*/

/*SHRINK, GROW AND BASIS IN FLEXBOX

flex-grow - raspodeli sve iteme po celom kontejneru ravnopravno i default je 0
***flex-shrink - (skupljanje kad se smanjuje ekran), default je 1 tkd ako
ne zelimo da se skuplja vise od ostalih ne dodeljujemo mu
nikakvu vrednost ako stavimo npr 3
znaci da se taj item 3 puta vise skuplja od ostalih
flex-basis - rasiri sve po boxu za odrejednu vrednost tipa 100px nema default
vrednost
sve dok ne stavimo auto
***ovo obicno ide uz flex wrap no wrap

***ova 3 atributa mozemo dodati odjednom pomocu propertija flex

flex: grow shrink basis
*/

/*ALIGN-SELF
menjamo poziciju svakom od item-a
*/

/*GRID LAYOUT
display mora biti grid a ne flex kod kontejnera
***TEMPLATES ROWS AND COLUMNS
delimo grid na kolone i redove
grid template columns delimo na kolone
grid template rows delimo na redove
row-gap i column-gap su razmak izmedju kolona i redova
skracenica za ova dva atributa je
gap: prvo ide izmedju redova razmak pa izmedju kolona
grid column i grid row npr stavimo 1 / 3 sto znaci da ce poceti
na npr prvoj koloni i zavrsiti se na trecoj
ili mozemo da napisemo 1 / span 2 ili span 3
i za ovo imamo skracenicu a to je
gridarea gde kucamo npr 2 / 1 / span 2 / spain 3
ove vrednosti se citaju ako row start column start i row end column end
*/

/* THE TRANSITION PROPERTY AND TRANSFORMATION FUNCTIONS (animacije)

transition: menjamo boju prelaskom na to ili margin i padding
transform: translate() menjamo poziciju slike ili bilo cega prelaskom
ovo ne stvaljamo uz pseudo selektora vec moramo kod njih bas u css
npr imamo submit button u css-u
i kod njega pored svega ostalog stvaljamo i transition i transform
****uz naravno prefikse kako bi sajt sto bolje radio
*** moz, webkit i o
najbolji prikaz kako funkcionisu vrednosti za translation
https://getflywheel.com/layout/css3-transitions-transforms-create-animations/
onda imamo jos i trasnform: scale dodajemo neku vrednost za koilko ce se uvecati
nesto.
transform: skewX ili skewY ili skew navodimo samo koliko ce se okrenuti
na odredjenoj osi po koordinatnom sistemu
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
*/

/*ANIMATIONS
prednost animacija u css je sto je otkucamo jednom i mozemo da je koristimo
za elemente koje god zelimo
svaka poxinje sa @keyframes pa bilo koji naziv {
from {}
to {}
}
jedna od najvaznijih animacija je duration deffault je 0 i
ako zelimo da animacija radi moramo uneti neku vrednost
*/