:root {
  --primary: #484336;
  --secondary: #c5bda0;
}

html,
body {
  background-color: var(--secondary);
  font-family: "fraunces-variable", sans-serif;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 9, "wght" 700;
}

h1,
h2,
h3,
h4 {
  color: var(--primary);
}

h1 {
  margin: 0 0 -10px;
  font-size: 2rem;
}
h3 {
  font-size: 1rem;
}

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.container--title,
.container--footer {
  text-align: center;
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}
.container--title {
  display: none;
  margin-bottom: -8px;
}
.container--footer {
  margin-top: -32px;
}
.container--footer h3 {
  padding: 0 0 16px;
}
.album--img {
  width: 100%;
  height: 100%;
  display: block;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
  background: url("images/album_img.webp") center center no-repeat;
  background-size: contain;
}
.container--title,
.album--img,
.container--footer {
  opacity: 1;
}