body {
  background-color: black;
  background-image: url('./background.png');
  background-size: cover;
  border-style: none;
  margin: 0px;
}

#header {
  width: 100%;
  border: none;
}

#header img {
  display: block;
  width: 40%;
  height: 150px;
  margin: 10px auto;
}

/* Container for the entire video section */
#video-container {
  max-width: 2400px;
  margin: 0 auto; /* Center the container */
  padding: 20px;
}

/* --------------------------------- */
/* CSS Grid Styles */
/* --------------------------------- */

.css-toggle {
  display: none;
}

#shorts_list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px 20px 35px 20px;
  margin: 10px 0px;
  background-color: rgba(0,0,0,0.5);

  border-style: solid;
  border-color: #00c8a0;

  max-height: 200px;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
}

#shorts-toggle:checked ~ #shorts_list {
  max-height: 10000px;
}

.toggle-control {
  display: block;
  width: 200px;
  margin: 15px auto 0;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  background-color: #45026d;
  color: white;
  border-radius: 20px;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color 0.3s ease;
}

.toggle-control:hover {
  background-color: #8f1cb0
}

/*#shorts-toggle:checked ~ .toggle-control {
  background-color: #dc3545;
}*/

#toggle-label::after {
  content: "Show Shorts";
}

#shorts-toggle:checked ~ #toggle-label::after {
  content: "Hide Shorts"; /* Text when checked/expanded */
}

/* Styles for each thumbnail/title container */
.grid-item {
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 7px 7px 7px rgba(64,29,76,2);
}

/* Styles for the thumbnail image */
.grid-item img {
  width: 100%; /* Take up full width of the grid cell */
  height: auto;
  border-radius: 3px;
  display: block;
}

/* Styles for the video title text */
.grid-item p {
  /*font-weight: bold;*/
  font-size: 0.9em;
  margin-top: 10px;
  margin-bottom: 0;
  color: white;
}