:root {
  --manga-header-bg: 'url()';
  --manga-desc-collapsed-height: 5em;
  --color-button-bg: #444;
  --color-button-bg-active: #333;
  --color-button-bg-hover: #555;
  --color-filter-active: #0c0;
  --color-genres-bg: #222;
  --color-page-bg: #1d1d1d;
  --color-scanlator: #888;
  --color-unread-badge-bg: #b0c6ffdd;
  --color-unread-badge-text: #002d6edd;
  --missing-cover: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDhweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSI0OHB4IiBmaWxsPSIjNDQ0Ij48cGF0aCBkPSJNMTgwLTEyMHEtMjQgMC00Mi0xOHQtMTgtNDJ2LTI3MmwxMDMgMTAzIDE3Mi0xNzIgMTcwIDE3MCAxNzEtMTcxIDEwNCAxMDR2MjM4cTAgMjQtMTggNDJ0LTQyIDE4SDE4MFptMC03MjBoNjAwcTI0IDAgNDIgMTh0MTggNDJ2Mjc3TDczNi02MDcgNTY1LTQzNiAzOTUtNjA2IDIyMy00MzQgMTIwLTUzN3YtMjQzcTAtMjQgMTgtNDJ0NDItMThaIi8+PC9zdmc+');
}

/* Dark theme */
* {
  color-scheme: dark;
}

body {
  background-color: var(--color-page-bg);
  color: white;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  margin: 0;
  padding: 0;
}

[hidden] {
  display: none !important;
}

label {
  display: block;
  margin-top: 20px;
}

.portrait {
  display: none;
}

.material-symbols-outlined {
  font-size: 18px;
  font-variation-settings: 'wght' 400;
  margin-right: 15px;
}

@media only screen and (max-width: 640px) {
  .landscape {
    display: none;
  }
  .portrait {
    display: flex;
  }
}
