@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Quicksand&display=swap');
body {
  background-color: #333;
  color: white;
  font-family: 'Open Sans';
  font-size: 12px;
  font-weight: bold;
  padding: 2%;
  text-align: center;
}
p {
  font-weight: normal;
}
a,
a:visited {
  color: #80b1d3;
  text-decoration: none;
}
#toggle-info {
  float: right;
  opacity: 0;
  transition: opacity 1s ease;
}
#toggle-info.show {
  opacity: 1;
}
#changelog {
  width: 100%
}
#changelog pre {
  color: white
}
@media only screen and (orientation: portrait) {
  html {
    content: "rotate device :)";
    display: block;
  }
  .toggle-info {display: none}
  #chart-wrapper {display: none}
  h2:after {
    content: 'rotate your device';
    display: block;
    margin: 30vh 0;
    animation: spin 4s ease infinite;
  }
  @keyframes spin {
    10% {
      transform:rotate(90deg);
    }
    20% {
      transform:rotate(0deg);
    }
    100% {
      transform:rotate(0deg);
    }
  }
}
@media only screen and (max-width: 900px) and (orientation: landscape) {
  h2:after {
    content: 'for best results, view on desktop display';
    display: block;
    margin: 2em 0;
  }
  #toggle-info {float: initial}
  .github-corner {display: none}
}