/* --- Glavni stilovi stranice (Sivo-azurna tema sa gradijentom) --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Sprečava širenje elemenata van ekrana mobilnog telefona */
}

body {
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    color: #000000;
    margin: 10px auto;
    padding: 10px 5px; /* Komforna margina za mobilne ekrane */
    max-width: 500px; /* Optimizovano za mobilne uređaje (umesto 900px) */
    width: 100%;
    border: 1px solid lightslategray;
    font-family: Verdana, Tahoma, sans-serif; /* Ispravljeno duplo font-family */
    font-size: 14px; /* Prilagođeno za bolji mobilni layout */
    font-weight: normal;
    
    /* Gradijent pozadina sa podrškom za sve pretraživače */
    background: lightslategray; 
    background: -webkit-linear-gradient(left top, lightslategray, azure); 
    background: -o-linear-gradient(bottom right, lightslategray, azure); 
    background: -moz-linear-gradient(bottom right, lightslategray, azure); 
    background: linear-gradient(to bottom right, lightslategray, azure);
    background-attachment: fixed;
}

/* --- Slike i Avatari --- */
img {
    max-width: 100%;
    height: auto;
}

.prof {
    margin: 5px auto;
    width: 50px; /* Prilagođeno fiksnoj širini umesto procentualne radi stabilnosti */
    height: 50px;
    border-radius: 8px;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
}

.avatar {
    margin: 10px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    box-shadow: 10px 10px 5px grey;
}

/* --- Chat poruke, sobe i sekcije --- */
div {
    margin: 6px 0;
    padding: 8px;
    border-radius: 6px;
}

div.d1 {
    border: 2px double lightslategray; 
    padding: 8px; 
    color: #000000; 
    text-align: center;
    background-color: rgba(255, 255, 255, 0.2); /* Blaga prozirna pozadina za bolju čitljivost */
}

div.d5 {
    border: 2px double lightslategray; 
    padding: 8px; 
    background-color: transparent; 
    color: #000000; 
    text-align: center;
}

/* Zamenske klase za ostale sistemske divove */
div.d2, div.d3, div.foot, div.fr, div.f, div.e, div.d, .menu {
    padding: 8px;
    box-sizing: border-box;
}

div.fixed {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999;
}

.quote {
    font-size: 14px;
    padding: 4px 0px 4px 8px;
    color: lightslategray;
    border-left: 3px solid lightslategray;
    background-color: rgba(255, 255, 255, 0.3);
    margin: 5px 0;
}

/* --- Linkovi i Navigacija --- */
a {
    color: #000000; 
    text-shadow: 1px 1px 3px lightslategray;
}

a:link, a:visited {
    display: inline-block;
    padding: 6px 10px; /* Veći prostor za klik na telefonu */
    background: azure;
    border: 1px solid azure; 
    color: #000000;
    margin: 3px 2px;
    border-radius: 4px;
    text-decoration: none;
}

a:hover, a:active {
    background: azure;
    text-decoration: none;
    box-shadow: 0px 0px 4px rgba(0,0,0,0.15);
}

/* Specifični linkovi unutar d1 i d5 panela (Ispravljene greške) */
.d1 a:link, .d1 a:visited, .d5 a:link, .d5 a:visited {
    color: #000000;
    text-shadow: 1px 1px 3px lightslategray;
    background-color: rgba(255, 255, 255, 0.5);
}

/* --- Forme, Dugmad i Unos teksta (Sprečen auto-zoom) --- */
input[type=text], textarea, input.itext {
    width: 100%;
    padding: 10px;
    margin: 6px 0;
    box-sizing: border-box;
    border: 2px solid lightslategray;
    background-color: azure;
    color: #000000;
    border-radius: 6px;
    font-size: 16px; /* Rešava problem sa automatskim zumiranjem ekrana na telefonima */
}

textarea {
    resize: vertical;
    font-weight: bold;
}

.drop, select.where {
    width: 100%;
    background-color: azure;
    color: #000000;
    padding: 10px;
    margin: 6px 0;
    border: 2px solid lightslategray;
    cursor: pointer;
    border-radius: 6px;
    font-size: 16px;
}

/* Stilovi za dugmad (.button i submit) */
.button, input.submit-button, input.ibutton, input[type=submit] {
    display: inline-block;
    padding: 10px 20px;
    margin: 8px auto;
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
    background-color: azure; 
    color: #000000; 
    border: 2px solid lightslategray;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
}

.button:hover, input.submit-button:hover, input[type=submit]:hover {
    background-color: azure; 
    color: #000000;
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

/* --- Zaobljeni uglovi za sistemske klase platforme --- */
.navbar, 
.catSides,
.catSides a, 
.row1,
.row_easy, 
.row_hard, 
a.buttom, 
div.cat {
    border-radius: 6px;
}

/*
End of file 
*/
@font-face {
  font-family: Hillock;
  src: url(font/Hillock.ttf);
}
.hillock { font-family: Hillock; }

@font-face {
  font-family: Greek-Freak;
  src: url(font/Greek-Freak.ttf);
}
.greek-freak { font-family: Greek-Freak; }

@font-face {
  font-family: MuchoFiesta;
  src: url(font/MuchoFiesta.ttf);
}
.muchofiesta { font-family: MuchoFiesta; }

@font-face {
  font-family: Regular;
  src: url(font/Regular.ttf);
}
.regular { font-family: Regular; }

@font-face {
  font-family: rothenbg;
  src: url(font/rothenbg.ttf);
}
.rothenbg { font-family: rothenbg; }

@font-face {
  font-family: CelticHand;
  src: url(font/CelticHand.ttf);
}
.celtichand { font-family: CelticHand; }

@font-face {
  font-family: tridlet;
  src: url(font/tridlet.ttf);
}
.tridlet { font-family: tridlet; }

@font-face {
  font-family: orangejuice;
  src: url(font/orangejuice.ttf);
}
.orangejuice { font-family: orangejuice; }

@font-face {
  font-family: hardcorium;
  src: url(font/hardcorium.ttf);
}
.hardcorium { font-family: hardcorium; }

@font-face {
  font-family: coreldraw;
  src: url(font/CorelDraw.ttf);
}
.coreldraw { font-family: coreldraw; }

@font-face {
  font-family: beauty;
  src: url(font/beauty.ttf);
}
.beauty { font-family: beauty; }

@font-face {
  font-family: riesling;
  src: url(font/riesling.ttf);
}
.riesling { font-family: riesling; font-size: 25px; }

@font-face {
  font-family: das;
  src: url(font/das.ttf);
}
.das { font-family: das; }

@font-face {
  font-family: reclaim;
  src: url(font/reclaim.ttf);
}
.reclaim { font-family: reclaim; }

@font-face {
  font-family: rhieknuza;
  src: url(font/rhieknuza.ttf);
}
.rhieknuza { font-family: rhieknuza; }

@font-face {
  font-family: standups;
  src: url(font/Standups.ttf);
}
.standups { font-family: standups; }

@font-face {
  font-family: bandito;
  src: url(font/bandito.ttf);
}
.bandito { font-family: bandito; }

@font-face {
  font-family: beaked;
  src: url(font/beaked.ttf);
}
.beaked { font-family: beaked; }

@font-face {
  font-family: snowland;
  src: url(font/snowland.ttf);
}
.snowland { font-family: snowland; }

@font-face {
  font-family: Aerosol;
  src: url(font/Aerosol.ttf);
}
.Aerosol { font-family: Aerosol; }

@font-face {
  font-family: tribalbox;
  src: url(font/tribalbox.ttf);
}
.tribalbox { font-family: tribalbox; }

@font-face {
  font-family: Canterbury;
  src: url(font/Canterbury.ttf);
}
.Canterbury { font-family: Canterbury; }

@font-face {
  font-family: sickcapital-vice;
  src: url(font/sickcapital-vice.ttf);
}
.sickcapital-vice { font-family: sickcapital-vice; }

@font-face {
  font-family: catalina;
  src: url(font/catalina.ttf);
}
.catalina { font-family: catalina; }

@font-face {
  font-family: gogle;
  src: url('https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&display=swap');
}