img {
  border: 5px solid #555; /* width, style, color */
}

dt {
  font-weight: 700;
}

.code {
  background-color: #FEF9C2;
  font-family: monospace;
}

.img_block {
  margin-bottom: 20px;
}

.hidden {
  display: none;
}

.toggle {
  cursor: pointer;
}

.stop_text {
  background-color: #ff0000;
  color: #ffffff;
  font-weight: 900;
}

.language-selector {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 5px;
  margin-bottom: 10px;
  text-align: center;
}

.language-selector h2 {
  margin: 0 0 10px 0;
  font-size: 1.2em;
  color: #495057;
}

.language-icons {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.language-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  background-color: #ffffff;
  border: 1px solid #ced4da;
  border-radius: 6px;
  text-decoration: none;
  color: #495057;
  font-size: 14px;
  transition: all 0.2s ease;
}

.language-link:hover {
  background-color: #e9ecef;
  border-color: #adb5bd;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.language-link:active {
  transform: translateY(0);
}

#google_translate_element {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

#google_translate_element select {
  background-color: #ffffff;
  border: 1px solid #ced4da;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  color: #495057;
}

#google_translate_element .goog-te-gadget-simple {
  background-color: #ffffff !important;
  border: 1px solid #ced4da !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  color: #495057 !important;
}

#google_translate_element .goog-te-gadget-simple:hover {
  background-color: #e9ecef !important;
  border-color: #adb5bd !important;
}

/* Custom list with double underscore */
.list-underscore {
    list-style-type: none;   /* explicitly remove bullets */
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.list-underscore li {
    list-style-type: none;   /* ensure no marker on li */
    position: relative;
    padding-left: 1.5em;
}

/* This is the key part */
.list-underscore li::marker {
    content: "";             /* removes marker in modern browsers */
}

.list-underscore li::before {
    content: "__";
    position: absolute;
    left: 0;
}

/* This restores indentation for nested lists */
.list-underscore ul {
    padding-left: 1.5em;
    margin-top: 0.25em;
}