html {
  background: #0e1e45;
}
body {
  margin: 0;
  font-family: 'Roboto';
  color: white;
  font-size: 14px;
  background: linear-gradient(30deg, #0f1219, #0e1e45);
  min-height: 100svh;
  padding-bottom: 40px;
  padding-left: 15px;
  padding-right: 15px;
}
* {
  box-sizing: border-box;
}
.header {
  padding: 15px;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  max-width: 180px;
}
.header-logo {
  position: relative;
  height: 0;
  overflow: hidden;
  width: 100%;
  background-image: url('/images/glasses.svg');
  background-position: center 0;
  background-size: 100% auto;
  background-repeat:no-repeat;
  padding-top: 44%;
}
.header.header--align-1 .header-logo { background-position: center 20%; }
.header.header--align-2 .header-logo { background-position: center 40%; }
.header.header--align-3 .header-logo { background-position: center 60%; }
.header.header--align-4 .header-logo { background-position: center 80%; }
.header.header--align-5 .header-logo { background-position: center 100%; }
.wrapper {
  display: block;
  padding: 10px 15px;
  background-color: rgba(255,255,255,.3);
  border-radius: 16px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
}
.doctor {
  list-style: none;
  padding-left: 10px;
}
.doctor .doctor-element {}
.doctor .doctor-name {
  font-weight: bold;
  font-size: 16px;
}
.doctor .doctor-sites {
  list-style: none;
  padding-left: 10px;
}
.doctor .doctor-site {}
.doctor .doctor-site-name {
  font-weight: bold;
}
.doctor .doctor-site-dates {
  padding-left: 10px;
}
.doctor .doctor-site-dates a {
  color: white;
  display: inline-block;
  padding: 0 5px;
}