/* ============================================================
   base.css — shared styles across all pages
   ============================================================ */

/* ── Layout ── */
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 2rem;
}

hr {
  width: 90%;
  border-top: 1px solid #ddd;
  margin: 3rem 0;
}

/* ── Socials ── */
.socials {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;

  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

.socials a {
  text-decoration: none;
  color: var(--svg-border);
  transition: color 0.4s ease;
}

.socials a:hover {
  color: #2dc653;
}

.socials i {
  font-size: 36px;
}

/* ── General utility ── */
.underline {
  text-decoration: underline;
  padding: 2px 0;
  border-radius: 2px;
  transition: background 0.3s;
}

.underline:hover {
  background-color: #eee;
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

/* inline code chip */
.code {
  background-color: #ddd;
  padding: 2px 4px;
  border-radius: 2px;
}

/* ── Note box ── */
.note {
  max-width: 800px;
  padding: 1rem;
  background-color: #eee;
  border-radius: 1rem 0;
  margin: 2rem 0 1rem 0;
  text-align: left;
}

.note,
.note ol {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.code-block {
  margin-top: 2rem;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(200, 200, 200);

  letter-spacing: 1px;
  font-size: 0.9rem;
  width: max-content;
  max-width: 100%;
}

tr {
  border-bottom: 1px solid #ccc;
}

th,
td {
  padding: 0.6rem;
  text-align: left;
  border-right: 1px solid #ccc;
}

tr:last-child td,
tr:last-child th {
  border-bottom: none;
}

/* slider styles */
.slider {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background-color: transparent;
  cursor: pointer;
}

.slider::-webkit-slider-runnable-track {
  height: 4px;
  background-color: white;
  border-radius: 10px;
  border: none;
  /* box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.1); */
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 22px;
  width: 22px;
  background-color: indianred;
  border-radius: 30px;
  border: 3px solid #111;
  /* box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); */
  margin-top: -9px;
  cursor: grab;
}

/* --- Firefox --- */
.slider::-moz-range-track {
  height: 4px;
  background: black;
  border-radius: 10px;
  border: 0px solid white;
  /* box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.1); */
}

.slider::-moz-range-thumb {
  height: 28px;
  width: 28px;
  background: indianred;
  border-radius: 30px;
  border: 1px solid white;
  cursor: grab;
  /* box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); */
}