html{
    scroll-behavior:smooth;
}

.header-bg{
    position: relative;
    background: url('../../assets/img/header-bg-16-6-new.png') no-repeat bottom center;
    background-size: cover;
    height: 50vh;
}

.header-bg a{
    color: white!important;
    transition: all 0.2s ease;
}

.header-bg a:hover{
    color: #ddd !important;
}

.purple{
    color: #72679F;
}

.pravila-lista a {
    color: #72679F;
    font-size: 18px;
    font-weight: 500;
    border-bottom: 0px!important;
}

.pravila-lista a:hover {
    color: #72679F;
    font-size: 18px;
    font-weight: 500;
    border-bottom: 1px solid #72679F!important;
}

#uvod, #koncepcija, #pravila, #veliko, #malo {
    scroll-behavior: smooth;
    scroll-margin-top: 80px;
}

.slovo{
    border: 1px solid #72679F;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 500;
    color: #72679F;
    margin: 3px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.slovo:hover{
    background: #72679F;
    color: white;
}

.text-center {
    text-align: center;
}

.result-box{
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
}

.mt-50{
    margin-top: 50px;
}

.LemmaLemmaSignrtf3, .LemmaLemmaSignrtf1{
    font-size: 10.0pt;
    font-weight: bold;
    color: #003F7F;
}

.gramatickiblokrtf1, .gramatickiblokpadertf1, .gramatickiblokrtf1, .gramatickiblokoblikrtf1{
    font-size: 8.0pt;
}

.scroll-down{
    position:absolute;
    bottom:40px;
    left:50%;
    transform:translateX(-50%);
    
    width:55px;
    height:55px;
    
    border:2px solid white;
    border-radius:50%;
    
    display:flex;
    align-items:center;
    justify-content:center;
    
    color:white;
    font-size:18px;
    
    text-decoration:none;
    
    animation:scrollBounce 1.8s infinite;
    transition:all .25s ease;
}

/* hover efekt */
.scroll-down:hover{
    background:white;
    color:#72679F;
    transform:translateX(-50%) scale(1.1);
    text-decoration: none;
}

.nav-shadow{
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* animacija */
@keyframes scrollBounce{

    0%,100%{
        transform:translate(-50%,0);
    }

    50%{
        transform:translate(-50%,12px);
    }

}

/* Mobilna optimizacija */
@media (max-width: 767px) {
    .header-bg {
        background: url('../../assets/img/header-bg-text-mobile.png') no-repeat center center;
        background-size: cover;
        height: 90vh;
    }
}