/* Dark edgy personal page */
body {
  background-color: #dfdfdf;  /* black/dark gray background */
  color: #E0E0E0;             /* light gray text */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12pt;
}

a:link { color: #FF3300; }      /* bright red links */
a:visited { color: #1BOB3B; }   /* darker red visited */
a:hover { color: #3399FF; }     /* electric blue on hover */

h1 { color: #FF0000; font-size: 26pt; }   /* neon red heading */
h2 { color: #3300A0; font-size: 18pt; }   /* neon blue subheading */

hr { color: #FF0000; height: 2px; }       /* red horizontal rule */

table {
  border: 2px solid #000000;   /* red table border */
  background-color: #1A1A1A;   /* dark gray table background */
}

#menu {
  background-color: #f0f0f0;   /* slightly lighter dark gray sidebar */
  padding: 10px;
  width: 220px;
}

#content {
  background-color: #FFFFFF;   /* dark gray content box */
  padding: 15px;
  color: #000000;              /* light gray text */
}

ul, ol {
  color: #000000;              /* light gray lists */
}

pre {
  color: #000000;              /* neon blue code / ASCII */
  font-family: monospace;
  font-size: 10pt;
}

video::-webkit-media-controls-panel {
   display: flex !important;
   opacity: 100 !important;
}

video::-webkit-media-controls-panel {
    background-image: linear-gradient(transparent, transparent) !important;
}

.video-container {
  position: relative;
  width: 300px;
  height: 169px; /* 16:9 ratio for 300px width */
}

.video-container iframe {
  display: block;
}

.video-container .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* clicks pass through */
  background: transparent; /* no visible cover by default */
  transition: background 0.3s ease;
}

.video-container:hover .overlay {
  background: rgba(0,0,0,0.05); /* subtle dark overlay on hover */
}