body.crooked {
  --bg-start: #DB98B9;
  --bg-end: #DB98B9;
  --accent-start: #CFE2F3;
  --accent-end: #7bbbf5;
  --text-color: #111;
  background: var(--bg-start);
}

.crooked-logo {
  width: 1000px;
  max-width: 90%;
  height: auto;
  margin-top: 1rem;
}

.singles-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 0;
  align-items: center;
}

.singles-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.album-art {
  width: 200px;
  height: 200px;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  object-fit: cover;
}

.icon-list {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.icon-list .social-icon {
  width: 40px;
  height: 40px;
}

.madeby-logo {
  width: 80px;
  height: auto;
  margin: 1rem auto 0;
  display: block;
}

.madeby-credit {
  text-align: center;
  margin-bottom: 1rem;
}

@media (min-width: 700px) {
  .singles-list {
    flex-direction: row;
  }
}