@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');
html {
  height: 100%;
  width: 100%;
  min-width: fit-content;
  min-height: fit-content;
  margin: 0;
  padding: 0;
  background-color: transparent;
}

/* Streaming category navigation */
.streaming-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 12px 0 22px;
}

.streaming-nav a {
  display: inline-block;
  padding: 10px 14px;
  border: 1px solid #374151;
  border-radius: 8px;
  background: #111827;
  color: #f8fafc;
  font-size: 16px;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
}

.streaming-nav a:hover,
.streaming-nav a:focus-visible {
  background: #1f2937;
  border-color: #64748b;
}

.streaming-nav a.active {
  background: #26354a;
  border-color: #93c5fd;
}

@media (max-width: 700px) {
  .streaming-nav {
    gap: 6px;
  }

  .streaming-nav a {
    flex: 0 1 auto;
    width: auto;
    padding: 7px 9px;
    font-size: 13px;
    text-align: center;
  }
}
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: transparent;
}
header {
  height: 100%;
  width: 100%;
  min-width: fit-content;
  min-height: fit-content;
  margin: 0;
  padding: 0;
}
/* Animate */
img:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
h1, h2, h3 ,h4 {
  text-align: center;
  font-family: 'Bangers', cursive;
  font-size: 2rem;
}
h2, h3 ,h4 {
  font-size: 1.5rem;
}
.paracls {
  font-family: "Rajdhani", Arial, Helvetica, sans-serif; 
  font-size: 1.4rem;
}
.MainContainer {
  height: 100%;
  width: 100%;
  min-width: fit-content;
  min-height: fit-content;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  background-color: transparent;
}
.box {
  color: white;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: transparent;
}
/* Header flex */
nav, .HFBcls {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  background-color: transparent;
}
/* Header flex Box 1 */
.HFBBox1cls {
  display: flex;
  order: 1;
  width: 100%;
  height: auto;
  background-color: black;
  padding: 1em;
}
#jeffimgid, #kbimg {
  height: 9vw;
  width: 9vw;
  border: 3px solid white;
  border-radius:50%;
  margin: 0vw 0 0 3vw;
}

#resicon, #linkedin, #mail  {
    display:block;
    height: auto;
    width: 6vw;
    padding: 0px;
    margin: 2vw 1vw 0 .1vw;
}
#resicon {
    margin: 2vw 1vw 0 30vw;
}
/* Content 1 flex */
.CFBcls {
  display: flex;
  flex:1;
  flex-direction: row;
  flex-wrap: nowrap;
  background-color: transparent;
}
#bgvid {
  position: fixed;
  top: 0;
  padding: 0;
  margin: 0;
  width: 100%; 
  height: 90%;
  object-fit: fill;
  z-index: -1;
}
/* Content 1 flex Box 1 */
.CFBBox1cls {
  display: flex;
  order: 1;
  width: 15%;
  height: auto;
  color: black;
  padding: 1vw;
  background-color: transparent;
}
/* Content 1 flex Box 2 */
.CFBBox2cls {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  order: 1;
  flex-grow:1;
  flex-shrink: 0;
  height: 100%;
  width: 70%;
  color: black;
  padding: 0vw;
  background-color: transparent;
}
/* Content 1 flex Box 2 ITEMS*/
.linkbox {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  color: white;
  background-color: transparent;
}
.list {
  font-size: 1.5vw;
  list-style: none;
  padding: 0;
  margin: 0;
  color: white;
}
.litem {
  padding: 2vw;
  color: white;
}
.link {
  font-size: 2.4vw;
  padding: 1vw;
  text-decoration: none;
  color: white;
  font-family: 'Bangers', cursive;
}
.messagebox {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.5vw;
  padding: 1.5vw;
  width: 100%;
  color: white;
  background-color: transparent;
}
.messageboxmess {
  font-size: 3.5vw;
  background-color: transparent;
  color: white;
}
.kbcontainer {
  display: flex;
  flex:1;
  flex-direction: column;
  flex-wrap: nowrap;
  background-color: transparent;
}
.kbtitle {
  display: flex;
  color: black;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: transparent;
  padding: 2vw 2vw 0 2vw;
}
.kbitems {
  display: flex;
  flex-grow: 1;
  /*lex-direction: column;*/
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-image: url("../img/data-center.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.kbitem {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  font-family: 'Bangers', cursive;
  font-size: 1.8vw;
  width: 30vw;
  height: 10vw;
  color: white;
  background-color: black;
  border: 1vw solid transparent;
  margin: 1vw
}
.kblhalf {
  height: 100%;
  width: 50%;
  margin: 0;
  padding:0;
}
.kbrhalf {
  height: 100%;
  width: 50%;
  margin: 0;
  padding:0;
}
.kbitempara {
  margin: 0;
  padding:0;
}
.kbpara {
  margin: 0;
  padding:4vw;
  font-size: 1.5vw;
  color: black;
}
.kbcenternarrow {
  margin-left: 30%;
  margin-right: 30%;
  text-align: left;
}
.kbcentermed {
  margin-left: 20%;
  margin-right: 20%;
  text-align: left;
}
.kbcenterwide {
  margin-left: 10%;
  margin-right: 10%;
  text-align: left;
}
pre {
    background-color: #222;
    border: 2px solid #000;
    border-radius: 5px;
    color: white;
    font-family: monospace,monospace;
    line-height: 1.625;
    margin: 30px 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 10px 10px 18px;
    word-wrap: normal;
    font-size: .7em;
    white-space: pre;
}
/* Content 1 flex Box 3 */
.CFBBox3cls  {
  display: flex;
  order: 3;
  width: 15%;
  height: auto;
  color: black;
  padding: 2em;
  background-color: transparent;
}
.CFBBox1Spn1cls, .CFBBox2Spn1cls, .CFBBox3Spn1cls {
  color: black;
  text-align: left;
  font-size: 1.5rem;
  margin: 1vw 0 1vw 0;
}
/* FOOTER flex Box */
.FFBcls {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  background-color: yellow;
}
/* FOOTER flex Box 1 */
.FFBBox1cls {
  display: flex;
  order: 1;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  background-color: black;
  padding: 2em;
}
.FFBBox1Spn1cls {
  color: white;
  font-size: 2vw;
  text-align: center;
}

/*Movies*/

.movie-filter-note {
  max-width: 760px;
  margin: -0.5rem auto 1rem;
  padding: 0 1rem;
  color: #4b5563;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.movie-item {
  display: flex;
  flex-direction: column;
  align-items: center; /* everything centered horizontally */
  padding: 1em;
  border-bottom: 1px solid #ddd;
  margin-bottom: 1em;
}

.movie-title {
  margin-bottom: 0.75em;
  text-align: center;
}

.movie-thumbnail {
  margin-bottom: 0.75em;
}

.movie-thumbnail img {
  width: 200px; /* consistent thumbnail size */
  height: auto;
  border-radius: 8px;
}

.movie-thumbnail img,
.shimg {
  transition: transform 180ms ease, box-shadow 180ms ease;
  transform-origin: center;
}

.movie-thumbnail img:hover,
.movie-thumbnail img:focus-visible,
.shimg:hover,
.shimg:focus-visible {
  animation: none;
  transform: scale(1.045);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}

.about-btn {
  cursor: pointer;
  background-color: #3498db;
  color: white;
  border: none;
  padding: 6px 12px;
  margin-bottom: 0.5em;
  box-shadow: 0 4px 8px rgba(0.4, 0.4, 0.4, 0.4);
}

.movie-description {
  display: none;
  text-align: justify;
  max-width: 600px;
}

.movie-ratings {
  text-align: center;
  margin-bottom: 0.75em;
  font-size: 1em;
  color: #555;
}
    table {
      width: 100%;
      max-width: 100vw;
      table-layout: fixed;
      border-collapse: collapse;
      text-align: center;
    }
    td {
      padding: 15px;
      text-align: center;
      vertical-align: top;
      width: 12.5%;
    }
    th {
      background-color: black;
      color: white; /* optional to ensure text is visible */
      text-align: center;        /* Horizontal center */
      vertical-align: middle;    /* Vertical center */
      height: auto;             /* or some fixed height for demonstration */
      width: 12.5%;
    }
    td:hover {
  background-color: black;
  color: white; /* optional to ensure text is visible */
}
    .shimg {
      max-width: 100%;
      height: auto;
      box-shadow: 0 4px 8px rgba(0.4, 0.4, 0.4, 0.4);
    }
    .svcshimg {
      width: 70%;
      max-width: 70%;
      max-height: 70%;
    }
    .movie-description {
      text-align: center;
      display: none;
    }
    .score {
      font-size: 1rem;
    }
    h12 {
      font-size: 1rem;
      font-weight: bold;
    }
    .heading-container {
      min-height: 50px; /* or some other value, e.g. 3em, 70px, etc. */
      max-width: 100%;
      height: 2.5em;
      text-align: center; /* or left, right, etc. */
      vertical-align: center;
    }
    .watchlist-checkbox {
      margin-right: 5px;
    }
    .watchlist-label {
      font-size: 1rem;
    }
.page-selector {
  margin: 10px 0;
  text-align: center;
  font-size: 1rem;
}
  #page-dropdown {
    text-align: center;
    text-align-last: center;
  }

/* Responsive Break Points*/
/* Small Devices 991px and lower) */
@media screen and (max-width: 991px) {
  /* Header flex Box 1 */
  .HFBBox1cls {
    padding: 2em;
  }
  .HFBBox1Spn1cls {
    width: 25vw;
    font-size: 5vw;
    padding: 1em .5em .5em .5em;
  }
  #jeffimgid {
    height: 15vw;
    width: 15vw;
    margin: 0vw 0vw 0vw 0vw
  }
  #kbimg {
    height: 18vw;
    width: 18vw;
    margin: 0vw 0vw 0vw 0vw
  }
  #resicon, #linkedin, #mail  {
    width: 10vw;
    padding: 0px;
    margin: 2vw 1vw 0 .1vw;
  }
  #resicon {
    margin: 2vw 1vw 0 0;
    padding: 0 0 0 9vw
  }
  .CFBBox1cls, .CFBBox3cls{
    display: none;
  }
  .CFBBox2cls {
    width: 100%;
  }
  .paracls {
    width: 90%;
    margin-left: 5%;
  }
  .link {
    font-size: 7vw;
  }
  .litem {
    padding: 5vw;
    color: white;
  }
  .FFBBox1Spn1cls {
    font-size: 4vw;
  }
  .kbcenternarrow, .kbcentermed, .kbcenterwide {
    margin-left: 2%;
    margin-right: 2%;
    text-align: left;
  }
  .kbitems {
    flex-grow: 0;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .kbitem {
    width: 60vw;
    height: 20vw;
    padding: 0;
  }
  .kbitempara {
    font-size: 3.5vw;
  }
  .score, .about-btn, h12, .heading-container {
    display: none;
  }
 
  .shimg { 
    width: 5vw; 
  }
  
  .svcshimg {
    width: 11vw;
  }

 table {
  width: auto;           /* Let the table size itself based on content */
  table-layout: auto;    /* Default behavior; columns adjust to content */
  margin: 0 auto;        /* Optional: centers the table */
  border-collapse: collapse;
  /* white-space: nowrap;  <-- add this if you want no line-wrapping */
}
  td, th {
    padding: 0px;
    text-align: center;
    vertical-align: middle;
  }
  .CFBBox1Spn1cls, .CFBBox2Spn1cls, .CFBBox3Spn1cls {
    color: black;
    text-align: left;
    font-size: 5px;
    margin: 1vw 0 1vw 0;
  }
  .shimg, .svcshimg {
        width: 11vw;
  }
  .watchlist-label {
    width: 9px;
    height: 9px;
    vertical-align: middle; /* Aligns checkbox with text */
    text-align: center; /* or left, right, etc. */
    font-size: 1vw;
    margin: 0px 0px 0px 0px;
  }
  .watchlist-checkbox {
    width: 9px;
    height: 9px;
    vertical-align: middle; /* Aligns checkbox with text */
    text-align: center; /* or left, right, etc. */
    font-size: 1vw;
    margin: 0px 2px 0px 0px;
  }
}