body {
  margin: 0;
  font-family: Verdana, sans-serif;
  background: linear-gradient(to bottom, #f0fff0, #e0ffd0);
  color: #333;
}
.page-wrap {
  background: url('/images/rhino.png') no-repeat top right,
              url('/images/dog.png') no-repeat left center,
              url('/images/plant.png') no-repeat bottom right;
  padding: 1rem;
}
.sidebar {
  float: left;
  width: 120px;
  padding-top: 2rem;
}
.sidebar ul {
  list-style: none;
  padding: 0;
}
.sidebar li {
  margin-bottom: 0.5rem;
}
.sidebar a {
  display: block;
  background: #ffa500;
  color: #000;
  text-align: center;
  padding: 0.5rem;
  text-decoration: none;
  border: 1px solid #888;
  border-radius: 5px;
}
.sidebar a.active {
  background: #ffcc66;
}
.content {
  margin-left: 140px;
  max-width: 600px;
  background: white;
  border: 2px solid #669999;
  border-radius: 20px;
  padding: 1rem;
}
.orange {
  color: darkorange;
  font-style: italic;
}
ul {
  padding-left: 1rem;
}
footer {
  clear: both;
  text-align: center;
  font-size: 0.8rem;
  padding: 1rem;
}
.speech-bubble {
  position: relative;
  background: #ccf;
  border: 1px solid #99c;
  border-radius: 10px;
  padding: 0.5rem;
  max-width: 220px;
  margin: 1rem 0;
  margin-left: 150px;
}
.speech-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 10%;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: #ccf;
}
@media screen and (max-width: 768px) {
  .sidebar, .content {
    float: none;
    width: auto;
    margin-left: 0;
  }
}