p.caption {
  color: #777;
  margin-top: 10px;
}

p code {
  white-space: inherit;
}

pre {
  word-break: normal;
  word-wrap: normal;
}

pre code {
  white-space: inherit;
}

.activitybox {
  padding: 1em 1em 1em 4em;
  margin-bottom: 10px;
  border: 2px solid orange;
  border-radius: 10px;
  background: #f5f5f5 5px center/3em no-repeat;
}

.theorembox {
  padding: 1em 1em 1em 4em;
  margin-bottom: 10px;
  border: 2px solid rgb(43, 0, 255);
  border-radius: 10px;
  background: #f5f5f5 5px center/3em no-repeat;
}

.definitionbox {
  padding: 1em 1em 1em 4em;
  margin-bottom: 10px;
  border: 2px solid rgb(255, 0, 0);
  border-radius: 10px;
  background: #f5f5f5 5px center/3em no-repeat;
}

.examplebox {
  padding: 1em 1em 1em 4em;
  margin-bottom: 10px;
  border: 2px solid rgba(255, 0, 238, 0.768);
  border-radius: 10px;
  background: #f5f5f5 5px center/3em no-repeat;
}


form {
  margin: 50px;
  padding: 20px;
  border: 1px solid black;
  background-color: #f2f2f2;
  border: 2px solid green;
  border-radius: 10px;
}


input[type="radio"] {
  margin-right: 10px;
}

button {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border-radius: 5px;
}

.result {
  margin-top: 20px;
  font-size: 20px;
  font-weight: bold;
}

.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #ccc;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}