@import "https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css";
@import "https://cdn.jsdelivr.net/gh/daidr/mc-skinviewer/skinviewer.css";
@import "https://cdn.jsdelivr.net/gh/daidr/mc-skinviewer/skinviewer-animation.css";

body {
  background-image: url('https://api.yppp.net/api.php');
  background-size: auto 100vh;
  background-position: center;
  min-height: 100vh;
  background-attachment: fixed;
}

#container {
  height: 20ch;
}

#previewer {
  transform: scale(0.3);
}

article {
  background-color: #FFFFFFAA;
}

article > header {
  background-color: #EDFFFB55;
}

article > footer {
  background-color: #FFFFFF55;
}

@media screen and (orientation: landscape) {
  #container {
    height: 30ch;
  }
  body {
    background-size: 100vw auto;
  }
}

.hide {
  display: none;
}