/* Estilos generales */
body {
  background-color: #f8f9fa;
  font-family: 'Roboto', sans-serif;
}

/* Estilos de la barra de navegación */
.navbar {
  background-color: #343a40;
}

.navbar-brand {
  font-weight: bold;
  font-size: 1.5rem;
  color: #fff;
}

.navbar-nav .nav-link {
  color: #fff;
  font-weight: bold;
}

/* Estilos para el contenido de los videos */
.card {
  border: none;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.card:hover {
  transform: translateY(-5px);
}

.card-body {
  padding: 1rem;
}

.card-text {
  font-size: 0.9rem;
  color: #666;
}

/* Estilos para los botones */
.btn-primary {
  background-color: #343a40;
  border-color: #343a40;
}

.btn-primary:hover {
  background-color: #23272b;
  border-color: #23272b;
}

.btn-primary:focus {
  box-shadow: none;
}

.btn-primary:not(:disabled):not(.disabled):active {
  background-color: #23272b;
  border-color: #23272b;
}

.btn-primary:not(:disabled):not(.disabled):active:focus {
  box-shadow: none;
}

.btn-primary:not(:disabled):not(.disabled):active:focus::before {
  opacity: 0.5;
}

.btn-primary:not(:disabled):not(.disabled):focus:not(:active)::before {
  opacity: 0.25;
}

.btn-primary:not(:disabled):not(.disabled):focus:not(:active)::after {
  opacity: 0.5;
}

.btn-primary:not(:disabled):not(.disabled):hover:not(:active)::before {
  opacity: 0.1;
}

.btn-primary:not(:disabled):not(.disabled):hover:not(:active)::after {
  opacity: 0.25;
}