body {
  margin: 0;
  background-color: black;

  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(Roboto_Slab/RobotoSlab-Regular.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

.overlay {
  position: fixed;
  bottom: 10px;
  right: 20px;

  font-family: 'Roboto Slab', serif;
  font-size: 15px;
  color: white;
  opacity: 0.4;

  transition: opacity 1.5s;
}

body:hover .overlay {
  opacity: 0.75;

  transition: opacity 0.2s;
}

abbr {
  cursor: help;
  border-bottom: 1px dashed;
  text-decoration: none;
  display: inline-block;
  line-height: 1.2em;
}

/* Always keep the earth centered */
@media (orientation:landscape) {
  .himawari #output {
    height: 90vh;
    width: 90vh;
  }

  .dscovr #output {
    height: 100vh;
    width: 100vh;
  }

  .goes #output {
    height: 90vh;
    width: 90vh;
  }

  .meteosat #output {
    height: 90vh;
    width: 90vh;
  }
}
@media screen and (orientation:portrait) {
  .himawari #output {
    height: 90vw;
    width: 90vw;
  }

  .dscovr #output {
    height: 100vw;
    width: 100vw;
  }

  .goes #output {
    height: 90vw;
    width: 90vw;
  }

  .meteosat #output {
    height: 90vw;
    width: 90vw;
  }
}

.svg-icon {
  fill: white;
  cursor: pointer;
  padding: 3px;
  top: 6px;
  position: relative;
}

#explore {
  margin-left: 8px;
  top: 7px;
}

.extension-only {
  display: none;
}

.extension .extension-only {
  display: initial;
}

/* Optional animation */
.animated #output {
  animation: fadein .6s ease;
}

@keyframes fadein {
  from { opacity: 0; transform: scale(.8, .8) rotate(-5deg); }
  to   { opacity: 1; transform: scale(1, 1) rotate(0); }
}