:root {
  --background: #ffffff;
  --foreground: #000000;
}

@font-face {
  font-family: "arialn";
  src: url("arial-narrow.woff") format("woff");
}
@font-face {
  font-family: "compacta";
  src: url("Compacta Black Poster W01.woff") format("woff");
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #4c7200;
  color: #333;
}

.album-art {
  background-color: var(--background);
  color: var(--foreground);
  width: 24rem;
  height: 24rem;
  text-align: justify;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  font-family: "arialn", sans-serif;
  font-size: 6rem;
  white-space: normal;
  word-break: break-word;
}

.settings {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  margin: 2rem 0;
  justify-content: center;
}

.settings div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.settings select,
.settings input {
  padding: 0.5rem;
  font-size: 1rem;
}

.export button {
  font-size: 1rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

@media (max-width: 768px) {
  .settings {
    flex-direction: column;
    align-items: center;
  }
}