ul {
  list-style-type: none;
  padding: 0;
  display: none;
  /* Hide the list initially */
}

li {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f1f1f1;
  border-radius: 4px;
}

.gktable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 12px;
  display: none;
  /* Hide table initially */
  table-layout: auto; /* Add this line */
}

.gktable th,
.gktable td {
  border: 1px solid #fff2e9;
  text-align: left;
}

.gktable th {
  background-color: #ffe5d4;
}

td:nth-child(4) {
  background-color: #c6d1ff;
}

td:nth-child(5) {
  background-color: #aefdcc;
}

td:nth-child(6) {
  background-color: #ffcfcf;
}

td:nth-child(2),
td:nth-child(8) {
  text-align: left;
}

.image-container {
  position: relative;
  max-width: 55%;
  /* Reduce the size to 90% */
  margin: 0 auto;
  /* Center the container */
  display: block;
  /* Show image container initially */
}

.sequence-image {
  display: block;
  width: 100%;
  border-radius: 8px;
}

.svg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.svg-text {
  fill: white;
  font: size 1em;
  font-weight: bold;
  text-anchor: middle;
  dominant-baseline: middle;
  text-shadow: black 0.05em 0.05em 0.1em;
}

@media (max-width: 800px) {
  .container {
    padding: 10px;
  }

  th,
  td {
    font-size: small;
    padding: 5px;
  }

  .svg-text {
    font-size: 0.8em;
  }
}

@media (max-width: 600px) {
  .container {
    padding: 10px;
  }

  th,
  td {
    font-size: small;
    padding: 5px;
  }

  .svg-text {
    font-size: 0.6em;
  }
}