body {
  margin: 0;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  color: #5a2e2e;
  background:
    radial-gradient(circle at 20% 20%, #f6b7c6 0 18px, transparent 19px),
    radial-gradient(circle at 70% 60%, #ffe3a3 0 16px, transparent 17px),
    radial-gradient(circle at 50% 80%, #f2a07b 0 14px, transparent 15px),
    #fff3e6;
  background-size: 180px 180px;
}

#wrapper {
  max-width: 900px;
  margin: 20px auto;
  background-color: #fffaf6;
  border: 3px solid #e0b7a1;
  box-shadow: 0 0 12px rgba(120,60,40,0.25);
}

#header {
  background: linear-gradient(to right, #f28ca3, #ffd6a3);
  padding: 16px;
  text-align: center;
  color: #5a2e2e;
}

#nav {
  background: linear-gradient(to bottom, #f7b267, #f4845f);
  padding: 8px;
  text-align: center;
}

#nav a {
  background: linear-gradient(to bottom, #fff1d6, #ffd29d);
  color: #6a2f1f;
  border: 1px solid #cc7a3a;
  border-radius: 6px;
  padding: 6px 12px;
  margin: 3px;
  font-weight: bold;
}

#nav a:hover {
  background: linear-gradient(to bottom, #f4845f, #e36414);
  color: #ffffff;
}

.box {
  border: 2px solid #e3b7a3;
  background: linear-gradient(to bottom, #fff4ed, #ffe2d1);
  margin-bottom: 14px;
}

.box h2 {
  background: linear-gradient(to right, #f4845f, #f7b267);
  color: #fffaf5;
  padding: 7px;
  margin: 0;
}

a { color: #d62828; }
a:hover { color: #f77f00; }