section#detail > div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  width: 100vw;
  height: calc(100vh - 8vmin);
}

#warnings-banner.show ~ main > section#detail > div {
  margin-top: 8vmin;
    height: calc(100vh - 16vmin);
}

#details {
  align-self: center;
  border: 1px dotted #151619;
  border-collapse: collapse;
}

#details th {
  text-align: left;
  font-weight: bold;
  font-style: italic;
  padding: 0.1rem 0.5rem;
}
#details td {
  padding: 0.1rem 0.5rem;
}
#details td:first-of-type {
  font-style: italic;
}
#details td:nth-of-type(2) {
  font-family: monospace;
  font-size: 95%;
  color: white;
  width: 8em;
}
#details tr:first-of-type {
  border-bottom: 1px dotted #bdbec6
}

#details th:nth-of-type(n+2){
  border-left: 1px dotted #bdbec6
}


#wind {
  flex: 0 0 auto;
  width: 60vmin;
}

#ArrowCurrent, #ArrowAverage, #ArrowGust {
  transform: rotate(0deg);
  transform-origin: 150px 150px;
  transition: all 1s ease-in-out;
}