body.public {
  margin-top: 0;
  background: center center url(../data-analytica.jpg) no-repeat;
  background-size: cover;
  --shc-border-color: rgba(0, 119, 204, .5);
  --shc-back-color: rgba(0, 119, 204, .18);
}

body.public[data-danger="1"] {
  --shc-border-color: rgba(204, 0, 0, .5);
  --shc-back-color: rgba(204, 0, 0, .18);
}

header,
.section {
  width: 300px;
  border-radius: 20px;
  margin: 0 auto;
  padding: 16px;
  border: 5px solid var(--shc-border-color, rgba(0, 119, 204, .5));
}

header {
  border-radius: 20px 20px 0 0;
  margin-top: 20vh;
  border-bottom: 0;
  background-color: var(--shc-back-color, rgba(0, 119, 204, .18));
}

.public h1 {
  margin-top: 0.5rem;
  font-size: 1.3rem;
}

.public h2 {
  font-size: 1.1rem;
}

.section {
  border-radius: 0 0 20px 20px;
  border-top: 0;
  background-color: rgba(255, 255, 255, .3);
}

.view_data header, .view_data .section {
  width: calc(100vw - 60px);
  margin: 0 auto;
}

.view_data header {
  margin-top: 10px;
}

.view_data .section {
  min-height: calc(100vh - 1.8rem - 32px - 130px);
  overflow: auto;
}

@media (min-width: 600px) {

  header,
  .section {
    width: 400px;
    margin-right: 10vw;
    margin-left: auto;
  }
}