/* body{
background-color: white;
} */
.video_conteiner_principal{

    /* background-color: aqua; */
    width: 98%;
    height: 98%;
    float: left;
    box-sizing: border-box;
    z-index: 99999;
}
.video-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.video-player {
    max-width: 70%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin-bottom: 20px;
}

.video-player video {
    width: 100%;
    height: auto;
}

/* 
A classe .video-player é selecionada para aplicar os estilos.
max-width: 800px; define a largura máxima do elemento .video-player como 800 pixels. Isso garante que o reprodutor de vídeo não se estenda além dessa largura.
margin: 0 auto; define margens automáticas nos lados esquerdo e direito, o que centraliza o elemento horizontalmente na página.
display: flex; ativa o modo de layout flexível para o elemento .video-player. Isso permite que você controle o posicionamento dos elementos filhos dentro dele.
justify-content: center; alinha os elementos filhos horizontalmente e centraliza-os no eixo principal, que é o eixo horizontal no modo flexível. Nesse caso, os vídeos serão centralizados horizontalmente.
align-items: center; alinha os elementos filhos verticalmente e centraliza-os no eixo secundário, que é o eixo vertical no modo flexível. Nesse caso, os vídeos serão centralizados verticalmente.
height: 100vh; define a altura do elemento .video-player como 100% da altura da janela do navegador (viewport height - vh). Isso faz com que o elemento ocupe toda a altura da janela, garantindo que os vídeos fiquem centralizados verticalmente na página. */

.video-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 10px;
    margin: 10px;
}

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

.course-thumbnail img {
    width: 70%;
    height: auto;
    cursor: pointer;
}

.course-thumbnail h3 {
    margin-top: 10px;
}

.course-thumbnail p {
    margin-top: 5px;
}