:root {
  --blue-color: rgb(81, 161, 247);
  --blue-dark-color: rgb(50, 115, 178);
  --success-color: rgb(40, 167, 69);
}

details {
  margin: 10px 0;
}

details {
  background-color: var(--blue-color);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
  display: block;
  width: fit-content;
}

details:hover {
  background-color: var(--blue-dark-color);
}

details[open] {
  color: inherit;
  border: 5px solid var(--success-color);
  background-color: transparent;
  padding-top: 0px;
  padding-left: 6px;
  padding-right: 6px;
}

details[open]:hover {
  cursor: inherit;
}

details > summary {
  font-weight: bold;
  color: white;
  padding: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

details > summary::before {
  content: "▶";
  display: inline-block;
  transition: transform 0.3s ease;
  min-width: 1em;
  font-size: 0.8em;
}

details[open] > summary::before {
  content: "▼";
  transform: rotate(0deg);
}

details[open] > summary {
  background-color: var(--success-color);
  margin-left: -6px;
  margin-right: -6px;
  margin-bottom: 10px;
  margin-top: -5px !important;
  position: sticky;
  top: 0;
  z-index: 10;
}

details[open] > summary:hover {
  cursor: pointer;
}

.main-content blockquote {
  border-color: #94bfea;
}

pre b {
  /* color: #2f3d44; */
  color: black;
}

table {
  margin: 1rem 0;
}

ul {
  padding-left: 25px;
}

.highlight-green {
  background: #7de37d2e;
  padding: 5px;
}

.highlight-red {
  background: #e37d822e;
  padding: 5px;
}