/* Initialize counters for callouts */
body {
  counter-reset: example theorem definition algorithm;
}

/* Example callout numbering */
.callout-example {
  counter-increment: example;
  border-left: 5px solid #2d9cdb;
  background-color: #fff;
  padding: 1em 1.2em;
  margin: 1em 0;
  border-radius: 10px;
  position: relative;
  box-shadow: 0 2px 6px 0 rgba(44,62,80,0.04);
}
.callout-example::before {
  content: "Example " counter(example) "";
  color: #2d9cdb;
  font-weight: bold;
  font-size: 1.1em;
  display: block;
  margin-bottom: 0.3em;
}

/* Theorem callout numbering */
.callout-theorem {
  counter-increment: theorem;
  border-left: 5px solid #e67e22;
  background-color: #fff;
  padding: 1em 1.2em;
  margin: 1em 0;
  border-radius: 10px;
  position: relative;
  box-shadow: 0 2px 6px 0 rgba(44,62,80,0.04);
}
.callout-theorem::before {
  content: "Theorem " counter(theorem) "";
  color: #e67e22;
  font-weight: bold;
  font-size: 1.1em;
  display: block;
  margin-bottom: 0.3em;
}

/* Definition callout numbering */
.callout-definition {
  counter-increment: definition;
  border-left: 5px solid #27ae60;
  background-color: #fff;
  padding: 1em 1.2em;
  margin: 1em 0;
  border-radius: 10px;
  position: relative;
  box-shadow: 0 2px 6px 0 rgba(44,62,80,0.04);
}
.callout-definition::before {
  content: "Definition " counter(definition) ": " attr(title);
  color: #27ae60;
  font-weight: bold;
  font-size: 1.1em;
  display: block;
  margin-bottom: 0.3em;
}

/* Algorithm callout numbering */
.callout-algorithm {
  counter-increment: algorithm;
  border-left: 5px solid #8e44ad;
  background-color: #fff;
  padding: 1em 1.2em;
  margin: 1em 0;
  border-radius: 10px;
  position: relative;
  box-shadow: 0 2px 6px 0 rgba(44,62,80,0.04);
}
.callout-algorithm::before {
  content: "Algorithm " counter(algorithm) ": " attr(title);
  color: #8e44ad;
  font-weight: bold;
  font-size: 1.1em;
  display: block;
  margin-bottom: 0.3em;
}

.callout-example-body,
.callout-theorem-body,
.callout-definition-body,
.callout-algorithm-body {
  color: #444;
  font-size: 1em;
}