/* Stiluri pentru containerul principal */
.container {
    max-width: 800px; /* Lățimea maximă a containerului */
    margin: 0 auto; /* Centrarea containerului */
    padding: 20px; /* Distanțare interioară */
    background-color: #f9f9f9; /* Fundal deschis */
    border-radius: 8px; /* Colțuri rotunjite */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Umbră pentru adâncire */
}

/* Stiluri pentru titlurile secțiunilor */
h2, h3 {
    color: #333; /* Culoare text pentru titluri */
    text-align: center; /* Centrarea titlurilor */
}

/* Stiluri pentru indexul videoclipurilor */
.video-index {
    display: flex; /* Folosim flexbox pentru aliniere */
    flex-wrap: wrap; /* Permitem ca elementele să se înfășoare pe mai multe rânduri */
    justify-content: center; /* Centrarea elementelor în rând */
    margin-top: 20px; /* Distanțare de la titlu */
}

/* Stiluri pentru fiecare element video */
.video-item {
    flex: 1 1 150px; /* Lățimea minimă a fiecărui element */
    margin: 10px; /* Distanțare între elemente */
    text-align: center; /* Centrarea textului în interiorul elementului */
    cursor: pointer; /* Schimbăm cursorul pentru a arăta că este clicabil */
    transition: transform 0.2s; /* Animare pentru efectul de hover */
}

/* Stiluri pentru imaginile videoclipurilor */
.video-item img {
    width: 100%; /* Imaginile vor ocupa întreaga lățime a elementului */
    height: auto; /* Înălțimea se va adapta proporțional */
    border-radius: 5px; /* Colțuri rotunjite pentru imagini */
}

/* Efect de hover pentru fiecare element video */
.video-item:hover {
    transform: scale(1.05); /* Mărim elementul la hover */
}

/* Stiluri pentru informațiile următorului video */
#nextVideoInfo {
    text-align: center; /* Centrarea textului pentru informații */
    margin-top: 20px; /* Distanțare de la player */
    font-weight: bold; /* Text îngroșat pentru a evidenția informația */
}

/* Stiluri pentru butonul de următor video */
#nextVideoButton {
    display: inline-block; /* Butonul se va comporta ca un bloc inline */
    padding: 10px 20px; /* Distanțare interioară pentru buton */
    background-color: #007bff; /* Culoare de fundal pentru buton */
    color: #fff; /* Culoarea textului pentru buton */
    border: none; /* Fără bordură */
    border-radius: 5px; /* Colțuri rotunjite pentru buton */
    cursor: pointer; /* Cursor de pointer pentru interactivitate */
    transition: background-color 0.3s; /* Animare pentru schimbarea culorii de fundal */
}

/* Efect de hover pentru buton */
#nextVideoButton:hover {
    background-color: #0056b3; /* Întunecarea culorii de fundal la hover */
}