body.light { background:#f5f5f5; color:#222; }
body.dark { background:#121212; color:#eee; }

.navbar { margin-bottom:20px; }
.video-card { position:relative; cursor:pointer; border-radius:8px; overflow:hidden; }
.video-card img { width:100%; display:block; border-radius:8px; }
.play-icon {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  font-size:40px; color:white; background:rgba(0,0,0,0.6);
  padding:15px; border-radius:50%;
}
.overlay-btn {
  background:black;color:white;text-align:center;
  padding:40px 20px;font-size:22px;cursor:pointer;
}
.video-wrapper {position:relative; max-width:100%;}
#videoPlayer{border-radius: 14px;}
#playOverlay{border-radius: 12px;}

/* Default dark mode colors */
body.dark-mode {
  background-color: #121212;
  color: #ffffff;
}

body.dark-mode .card,
body.dark-mode .navbar {
  background-color: #1e1e1e;
  color: #fff;
}body {
  transition: background-color 0.3s ease, color 0.3s ease;
}