body,
html {
  max-width: 500px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.7;
  font-family: 'Roboto Condensed';
}
body {background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);}
p {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  max-width: 500px;
  text-align: left;
  padding: 5px;
}

.bottom-panel {
  position: fixed;
  font-size: 0.9rem;
  bottom: 0;
  left: 0;
  right: 0;
}

.popup-wrapper {
  display: none;
  max-width: 560px;
  margin: 0 auto;
  background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
  border-top: 3px solid black;
}

#popup-index {
  padding: 1.25rem 0 0 1.25rem;
}

.popup-cl {
  padding: 1.25rem;
  margin-left: auto;
  cursor: pointer;
}

#popup-content {
  max-width: 500px;
  text-align: left;
  padding: 1.25rem 0 1.25rem 0.9rem;
}