:root {
  --darkreader-neutral-background: #131516;
  --darkreader-neutral-text: #d8d4cf;
  --darkreader-selection-background: #004daa;
  --darkreader-selection-text: #e8e6e3;
}

html,
body,
input,
textarea,
select,
button {
  border-color: #736b5e;
  color: #e8e6e3;
}

html,
body,
input,
textarea,
select,
button {
  background-color: #181a1b;
}

html {
  color-scheme: dark !important;
  background-color: #181a1b !important;
}

* {
  scrollbar-color: #454a4d #202324;
}

#not-found {
  padding: 4em;
  margin: 4em;
}

.card {
  background-color: #2d2f33;
  box-shadow: 0 4px 8px 0 rgba(45, 47, 51, 0.25);
  border-radius: 5px;
  transition: 0.3s;
}

.header {
  top: 0;
  margin: 0.3em;
  padding: 0.75em;
}
.header a {
  box-shadow: 0 4px 8px 0 rgba(45, 47, 51, 0.25);
  border-radius: 5px;
  transition: 0.3s;
  background-color: #6f2b9b;
  color: white;
  padding: 0.5em 0.75em 0.5em 0.75em;
  margin-left: 0.5em;
  margin-right: 0.5em;
}

blockquote {
  background-color: #27282c;
  padding: 0.25em 0.5em 0.25em 0.5em;
}

#map-asset-view {
  background-color: #2d2f33;
  padding: 1em;
  margin: 1em;
  border-radius: 1em;
}
#map-asset-view #content {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
#map-asset-view img {
  width: 25vw;
}

#readme {
  padding: 2em;
  margin: 2em;
  border-radius: 1em;
}
#readme:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
#readme img {
  width: 15vw;
  filter: brightness(1.5);
}

#catalog {
  padding: 2em;
  margin: 2em;
  border-radius: 1em;
}
#catalog > #map-asset-vcc {
  display: flex;
  overflow: auto;
  flex-flow: wrap;
}
#catalog .card {
  display: flex;
  flex-direction: column;
  min-height: min-content;
  padding: 1em;
  margin: 1em;
}
#catalog .card button {
  background: none !important;
  border: none;
  padding: 0 !important;
  /*optional*/
  font-family: arial, sans-serif;
  /*input has OS specific font-family*/
  color: #0683c1;
  text-decoration: underline;
  cursor: pointer;
  font-weight: bold;
}
#catalog .image-mosaic {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
#catalog .image-mosaic .card {
  padding: 0;
  margin: 1vh;
}
#catalog .image-mosaic .card .responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}
#catalog .card:last-child {
  position: relative;
}