style.css

/* default bookdown css */
p.caption {
  color: #777;
  margin-top: 10px;
}
p code {
  white-space: inherit;
}
pre {
  word-break: normal;
  word-wrap: normal;
}
pre code {
  white-space: inherit;
}

/* default css for fenced-blocks mod */
span.divhead-plain {
  font-weight: bold;
  font-style: normal;
}

span.divhead-definition {
  font-weight: bold;
  font-style: normal;
}

span.divhead-remark {
  font-weight: bold;
  font-style: normal;
}

div.proof {
  margin-bottom: 1em;
}
/*
 * Removed this with the latest version of bookdown, which includes
 * a QED box after div.proof.  But their version isn't great, as it bleeds into
 * the following div sometimes.
 *
 * div.proof::after {
 *  position: relative;
 *  bottom: 1.5em;
 *  font-size: 150%;
 *  content: "\2610"; // square box QED
 * }
*/

/*
 * custom css for our book
 */

/* Photo credits */
div.photocredit {
  font-size: small;
  font-style: italic;
  text-align: right;
  position: relative;
}

/* The photocredit popup (appears on top) */
.photocredit .photocreditpopup {
  visibility: hidden;

  text-align: left;
  position: absolute;
  z-index: 1;
  width: 50%;
  right: 0;
  bottom: 0;
  
  border: thin solid black;
  background-color: #EEE;
  border-radius: 6px;
  padding: 8px 8px;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.photocredit .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

/* Theorem and other structures */
div.theorem, div.proposition, div.definition {
  border: 1px solid gray;
  border-radius: 1em;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0.5em;
  margin-bottom: 0.5em;
}
div.theorem, div.proposition {
    background-color: honeydew;
}
div.definition {
  background-color: mintcream;
}

div.example {
  background-color: aliceblue;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0.5em;
  padding-bottom: 0.25em;
  margin-bottom: 0.5em;
}

div.remark {
  background-color: snow;
  padding-left: 1em;
  margin-top: 0.5em;
}

div.tryit {
  background-color: seashell;
  border-left: 1px solid gray;
  padding-left: 1em;
  margin-top: 0.5em;
}
span.tryit-before {
  /* hide the default text */
  display : none;
}
div.tryit::before {
  /* replace default text */
  font-weight : bold;
  content: "Try It Yourself";
}

div.alert {
  background-color: mistyrose;
  border-left: 1px solid gray;
  padding-left: 1em;
  margin-top: 0.5em;
}
span.alert-before {
  /* hide the default text */
  display : none;
}
div.alert::before {
  /* replace default text with ! icon */
  font-size: 300%;
  content: "\26A0";
}