header {
    height: 400px !important;
}

@media (max-width: 768px) {
    header {
        height: 100px !important;
      }

    #moonimg {
            width: 350px; /* Set the desired width */
            height: auto; /* Set the desired height */
    }

    #logo {
          width: auto; /* Ensure the SVG doesn't exceed its parent container's width */
          height: 25px; /* Maintain the aspect ratio while resizing */
    }

    table {
      font-size: 10px;
    }

    .videos img {
      max-width: 100% !important;
      height: auto !important;
    }
  }

.videos {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

.videos td, .videos th {
    border: 3px solid #f1f1f1;
    padding: 8px;
    color: #ffffff;
}

.videos td a, .videos th a {
    text-align: center;
    color: #2196F3;
    text-decoration: none;
}

.videos tr:nth-child(even) {
    background-color: #343A40;
}

.videos tr:nth-child(odd) {
    background-color: #343A40;
}

.videos tr:hover {
    background-color: #43494E;
}

.videos th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #343A40;
    color: white;
}

.videos img {
  max-width: 160px;
  max-height: auto;
}

.centered-link {
  display: block; /* Ensure the link occupies the full width of the cell */
  text-align: center; /* Center-align the link within the cell */
}

a:hover {
  text-decoration: none; /* Remove underline on hover */
}

html {
  scroll-behavior: smooth;
}

p {
  text-align: justify;
}