body {
  padding: 0em;
  margin: 0em;
}
nav {
  background: black;
  color: white;
  float: left;
  position: fixed;
  right: 100%;
}
nav:after {
  cursor: pointer;
  background: black;
  padding: 0.1em;
  content: '+';
  display: inline-block;
  line-height: 0.8;
  font-size: 200%;
  font-weight: bold;
  position: absolute;
  top: 0em;
  left: 100%;
}
nav:after:hover:root nav {
  left: 0px;
}
nav:hover {
  left: 0px;
}
nav ul {
  list-style: none;
  margin: 0em;
  padding: 0.3em;
}
nav ul li {
  clear: left;
  display: inline-block;
  float: left;
}
nav ul li a {
  padding: 0.3em;
  text-decoration: none;
}
nav ul li a:visited,
nav ul li a:link,
nav ul li a:active {
  color: white;
}
nav ul li a:hover {
  color: greenyellow;
  text-shadow: 0px 0px 3px yellow;
}
.bubble {
  -webkit-background-clip: padding-box;
  margin: 30px;
  height: 1.5em;
  width: 1.5em;
  background-image: radial-gradient(1.5em at 45% 30%, #fff 0%, #fff 5%, lime 10%, darkgreen 60%, #003100 100%);
  border-radius: 50%;
  box-shadow: inset -0.05em -0.1em 0.75em rgba(0, 0, 0, 0.7), inset -0.05em -0.1em 0.5em #000, 0.05em 0.15em 0.124995em rgba(55, 55, 55, 0.9), 0.075em 0.15em 0.25em #000;
}
.lines {
  border: 1px solid #999;
  background: lightgoldenrodyellow;
  color: #333;
  font-family: "Josefin Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: inline-block;
  margin: 2em;
  padding: 0.85em;
  /*
    box-shadow: 0px 5px 0px #fff,
                0px 6px 1px -1px #0f0,
                0px 10px 0px #fff,
                0px 11px 1px -1px #f00;*/
  box-shadow: 0px 4px 8px -1px #333, inset 0px 0px 2em -0.5em saddlebrown;
}