html {
    height: 100vh; /* set viewport constraint */
    min-height: 100%; /* enforce height */
}

body {
    background: linear-gradient(to bottom, rgba(40, 49, 77, 0.8) 30%, rgba(29, 35, 71, 0.8) 50%, rgba(19, 25, 28, 0.8) 80%, rgba(15, 14, 14, .8) 100%), url(../images/background/pixel_city_1.gif);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.frost-section h1, .frost-section h2, .frost-section h3, .frost-section h4, .frost-section h5, .frost-section div:not(.button), .frost-section span, .frost-section .label, .frost-section .text {
    color: hsl(0, 0%, 80%);
}



.frost-section {
  background: inherit;
  position: absolute;
  overflow-y: hidden;
  overflow-x: hidden;
  margin: 20px;
  border-radius: 8px;
  color: hsl(0, 0%, 80%);
  font-size: 1.1em;
  font-family: "Noto Sans", Arial, sans-serif;
  line-height: 1.3;
  padding: .8em .8em;
}

.frost-section div.button {
    color: #454544;
}


.frost-section:before {
  width: calc(100% + 50px);
  height: calc(100% + 50px);
  content: "";
  position: absolute;
  top: -25px;
  left: -25px;
  bottom: 0;
  right: 0;
  background: inherit;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2000px rgba(0,0,0,0.3);
  filter: blur(10px);
}

.frost-section div.display-area{
  max-width: 100%;
  max-height: 100%;
  padding: 10px;
  position: relative;
  font-family: "Noto Sans", Arial, sans-serif;
  overflow-y: auto;
  overflow-x: hidden;
}


.frost-section dd.info {
    color: hsl(0, 0%, 80%);
    font-size: 0.8em;
}

.frost-section dt {
    font-size: 1.4em;
}

li {
    display: flex;
    align-items: center;
    margin: 4px 0;
}
li:before {
    content: url('/assets/images/markers/dot.png');
}



/* mobile (portrait) ----------- */
@media only screen
and (max-device-width : 1024px)
and (orientation : portrait) {
    .frost-section {
        font-size: 1em;
        padding: .5em 0.5em;
    }
}