@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap");
html,
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", sans-serif;
}

body {
  background-color: transparent;
}
html {
  background-color: #0b3041;
}

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

ol,
ul {
  list-style: none;
}

#container {
  padding: 5em 0.4em 1em 5em;
  display: flex;
  flex-direction: column;
}

nav.breadcrumbs {
  margin: 0;
  padding: 1em 0em;
}
#albums {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1em;
  justify-items: center;
  justify-content: center;
}
#albums a {
  margin: 0;
  width: min(300px, 70vw);
}
#albums a .info .date {
  display: none;
}

#albums .info {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  justify-content: center;
  align-items: flex-start;
  gap: 0.4em;
}
#albums .info h3 {
  margin: 0;
}

#media {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1em;
  justify-items: center;
  padding: 0;
}

#media li {
  float: inherit;
  margin-right: 0;
  margin-bottom: 0;
}

/* ALBUM BACKGROUND */
.framinosona-album-preview-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  filter: blur(8px) brightness(0.3);
  z-index: -1;
}