.navigacija {
    text-align: left;
    padding-left: 10px;
}

#slike img {
    max-height: 500px;
    /* max-width: fit-content; */
    max-width: 100%;
    animation: srcki 400ms infinite; /* Animates the gradient */
}
h1 {
    text-align: center;
    background: linear-gradient(
        to right,
        red,
        orange,
        green,
        blue,
        indigo,
        violet
    ); /* Rainbow gradient */
    -webkit-background-clip: text; /* Clips the background to the text */
    -webkit-text-fill-color: transparent; /* Makes the text transparent to show the gradient */
    background-clip: text; /* Standard property for modern browsers */
    /*text-fill-color: transparent; /* Standard property for modern browsers */
}

.barvna_skatla{
    border: 2px solid; /* Adds a black border with 2px thickness */
    padding: 10px; /* Optional: Adds some space between the content and the border */
    margin: 10px; /* Optional: Adds space outside the border */
    border-image: linear-gradient(
        to right,
        red,
        orange,
        yellow,
        green,
        blue,
        indigo,
        violet
    ) 1;
    overflow-wrap: break-word;
}

html, body {
    /* display: flex; */
    background: linear-gradient(to right, rgb(249, 199, 208),rgb(255, 170, 234),rgb(241, 135, 247),rgb(250,70, 240), rgb(226, 28, 233));
    justify-content: center;
    flex-direction: column;
    text-align: center;
    min-height: 100vh; /* Ensures the content is vertically centered */
    background-size: 300% 300%; /* Makes the gradient larger for smooth animation */
    animation: gradientShift 7s ease infinite, cursor 400ms infinite; /* Animates the gradient */
    cursor: url("gifi/navadn/frame_0_delay-0.2s.gif") 24 24, auto;
}





/* Define the animation */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%; /* Start position */
    }
    50% {
        background-position: 100% 50%; /* Middle position */
    }
    100% {
        background-position: 0% 50%; /* End position */
    }
}

  
@keyframes cursor {
    0% {cursor: url("gifi/navadn/frame_0_delay-0.2s.gif") 24 24, auto;}
    25% {cursor: url("gifi/navadn/frame_1_delay-0.2s.gif") 24 24, auto;}
    50% {cursor: url("gifi/navadn/frame_2_delay-0.2s.gif") 24 24, auto;}
    75% {cursor: url("gifi/navadn/frame_3_delay-0.2s.gif") 24 24, auto;}
  } 

@keyframes srcki {
    0% {cursor: url("gifi/srcki/frame_0_delay-0.2s.gif") 24 24, auto;}
    33% {cursor: url("gifi/srcki/frame_1_delay-0.2s.gif") 24 24, auto;}
    66% {cursor: url("gifi/srcki/frame_2_delay-0.2s.gif") 24 24, auto;}
  }

#kazalo {
    text-align: center;
    font-size: 1.05em;
    padding-left: 0%;
}

#kazalo ul li {
    list-style-position: inside;
    padding: 0;
}

#kazalo li:not(:last-child) {
    margin-bottom: 3px;
}
ul {
    padding-left: 0%;
}	


@media screen and (max-width: 750px) {
    .pesem_s_sliko {
        display:flex;
        flex-direction: column;
        flex-flow: row wrap;
    }
    .pesem_tekst {
        order: 1;
    }

    .pesem_slika {
        order: 2;
        
    }
    .pesem_slika img {
        max-width: 100%;
        height: auto;
    }
}

@media not screen and (max-width: 750px) {
    #pesem_s_sliko {
        display: flex;
        align-items: flex-start; 
        gap: 20px; 
    }
    
    .pesem_tekst {
        flex: 1.2; 
    }
    
    .pesem_slika {
        flex: 1; 
        padding-top: 60px;
    }

    .pesem_slika img {
        max-width: 100%;
        height: auto;
    }
}


.p_pesem {
    white-space: pre-line;
}