* {
  box-sizing: border-box;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
}

body {
  min-height: 100vh;
  width: 100%;
  /* max-width: 100vw; */

  display: grid;
  grid-template: auto 1fr auto/ 1fr;
}

header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  padding: 2rem;
}

footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  padding: 1rem;
  font-weight: bold;

  color: white;
  background-color: gray;
}

a {
  color: black;
}

main {
  display: flex;
  flex-direction: column;

  row-gap: 2rem;
}

section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

h2 {
  margin-bottom: 2rem;
}

/* #inputs {
  background-color: aquamarine;
} */

#favorites {
  /* background-color: lightyellow; */

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

#favorites-container {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1rem;
  row-gap: 1rem;
  justify-content: center;
  align-items: baseline;
}

#units {
  /* background-color: lightpink; */

  flex-grow: 1;
}

#cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: baseline;
  column-gap: 1rem;
  row-gap: 1rem;

  /* margin-top: 2rem; */
}

.card {
  border: 2px solid black;
  border-radius: 1rem;
  padding: 0.5rem;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.card button,
h3 {
  align-self: center;
}

#favorites .card {
  background-color: lightcyan;
}