* {
  font-family: sans-serif; }

html {
  scrollbar-width: none; }
  html::-webkit-scrollbar {
    display: none; }

body {
  margin: 0; }

h1 {
  font-size: 1rem; }

main.spinner, main.error, main.empty {
  margin: 2rem; }

main.empty {
  text-align: center; }

nav {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 12vw;
  background-color: white;
  z-index: 10; }
  nav::-webkit-scrollbar {
    display: none; }
  nav div.sticker {
    width: 12vw;
    height: 12vw; }

section.stickerpack {
  padding-top: 12vw;
  margin-top: -12vw; }
  section.stickerpack > div.sticker-list {
    display: flex;
    flex-wrap: wrap; }
  section.stickerpack > h1 {
    margin: .75rem; }

div.sticker {
  display: flex;
  padding: 4px;
  cursor: pointer;
  position: relative;
  width: 25vw;
  height: 25vw;
  box-sizing: border-box; }
  div.sticker:hover {
    background-color: #eee; }
  div.sticker > img {
    display: none;
    width: 100%;
    object-fit: contain; }
    div.sticker > img.visible {
      display: initial; }