body {
    background: #f0f4ff !important; /* Svetlija pozadina za bolji kontrast */
    background-image: url(../slikezacss/starsbackground.jpg) !important; 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center; 
    font-size: 16px;
    font-family: 'Nunito', sans-serif;
    color: #333; /* Tamna siva boja za tekst */
    margin: 0; 
    padding: 20px; /* Uniformni padding */
    -webkit-font-smoothing: antialiased;
}

/* Media upit za mobilne uređaje */
@media (max-width: 768px) {
    body {
        padding: 15px;
        font-size: 14px; 
    }
}

.u {
    font-family: 'Nunito', sans-serif; 
    font-size: 14px;
    color: #444; /* Blago tamnija nijansa za tekst */
}

.ob {
    position: relative;
    background-color: #ffffff; /* Svetla pozadina za ob */
    color: #333; /* Tamnija boja za tekst unutar ob */
    border: 1px solid #4f99f7; 
    border-radius: 10px; 
    font-size: 16px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
    max-width: 100%;
    padding: 20px; /* Veći padding unutar */
    margin: 20px auto; /* Centrirano sa razmakom */
}

.odigrane-karte {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 10px 0; /* Razmak iznad i ispod */
}

.odigrane-karte .odigrana-karta {
    width: 14%;
    height: auto;
    margin-right: 15px; 
    position: relative;
}

.trenutna {
    max-width: 100%; 
    width: 40%; 
    overflow-x: auto; 
    margin: 0 auto; 
    display: inline-block;
}

.cards {
    display: flex;
    justify-content: left;
    margin-top: 20px;
}

.cards img {
    width: 125px;
    height: auto;
    margin: 0 10px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
}

/* Stil za word-container */
.word-container {
    display: flex; 
    flex-wrap: wrap; 
}

/* Stil za letter-box */
.letter-box {
    width: 30px; 
    height: 30px; 
    margin: 5px; 
    border: 1px solid #333; /* Tamno siva boja za okvir */
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

/* Stilizacija containera za kovčege */
.kovcezi-container {
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
}

/* Stilizacija pojedinačnog kovčega */
.kovceg {
    margin: 10px; 
    text-align: center; 
}

/* Stilizacija slike kovčega */
.kovceg img {
    width: 100px; 
    height: 100px; 
}

/* Stilizacija linka "Otključaj Kovčeg" */
.kovceg a {
    display: block; 
    margin-top: 5px; 
    color: #3b5998; 
}

.ob::after {
    content: '';
    position: absolute;
    top: -25px; 
    left: -1px; 
    border: 12px solid transparent; 
    border-bottom-color: #4f99f7; 
}

.textarea {
    width: 100%;
    box-sizing: border-box;
    font-size: 20px;
}

.button.textarea {
    height: 30px;
    width: 100px;
    font-size: 20px;
}

.tbl {
    font-size: 17px;
    font-weight: normal;
    margin-top: 1px;
    margin-bottom: 1px;
    padding: 10px; /* Povećano */
    border-radius: 8px;
    background-color: #ffffff; 
    color: #333; 
    border: 1px solid #4f99f7; 
}

.d1 {
    font-size: 16px;
    font-weight: normal;
    margin-top: 1px;
    margin-bottom: 1px;
    padding: 10px; /* Povećano */
    border-radius: 8px;
    background-color: #ffffff; 
    color: #333; 
    border: 1px solid #4f99f7; 
}

.d2, .d3, .d4, .d7, .levo {
    font-size: 16px;
    font-weight: normal;
    margin-top: 1px;
    margin-bottom: 1px;
    padding: 10px; /* Povećano */
    border-radius: 8px;
    background-color: #ffffff; 
    color: #333; 
    border: 1px solid #4f99f7; 
}

.d1 {
    background-image: url(../slikezacss/subtle-gradient.png);
}

.d2 {
    background-image: url(../slikezacss/whitblk2.jpg);
}

.d3 {
    background-image: url(../slikezacss/clouds3.jpg);
}

.d4 {
    background-image: url(../slikezacss/starsbackground.jpg);
}

hr {
    color: #80deea; 
    opacity: 1; 
}

a:link,
a:visited {
    padding: 0;
    margin: 0;
    font-size: 17px;
    letter-spacing: 0.5px; 
    text-decoration: none;
    color: #3b5998; /* Tamnija boja za linkove */
}

a:hover {
    color: #4c51bf; /* Tamnija nijansa na hover */
}

input,
textarea,
select {
    background-color: #fff; 
    border: 1px solid #4f99f7; 
    border-radius: 4px; 
    font-size: 18px; 
    padding: 12px; /* Povećan padding */
}

input:focus,
textarea:focus,
select:focus {
    background-color: #e0f2f1; 
    border: 1px solid #3b5998; 
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); 
}

input[type="submit"] {
    background-color: #5a67d8; 
    color: white; 
    border: none; 
    padding: 12px; /* Povećano */
    font-size: 18px; 
    border-radius: 4px; /* Uvećanje zaobljenja */
    transition: background-color 0.3s, color 0.3s;
}

input[type="submit"]:hover {
    background-color: #4c51bf; /* Tamnija plava na hover */
}

form {
    font-size: 18px; 
    margin: 0;
    padding: 10px; 
}

.button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 18px; 
    text-align: center;
    background-color: #5a67d8; 
    color: white; 
    border: none; 
    border-radius: 4px; 
    cursor: pointer; 
    transition: background-color 0.3s, color 0.3s;
}

.button:hover {
    background-color: #4c51bf; 
}

select {
    background-color: #fff; 
    border: 1px solid #4f99f7; 
    border-radius: 4px;
    font-size: 15px; 
    padding: 8px; 
    width: 100%; /* Prilagoditi širinu */
}

select:focus {
    background-color: #e0f2f1; 
    border: 1px solid #3b5998; 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
}