style.css

@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/normalize.min.css";
@use postcss-preset-env;


html {
  background: var(--gray-9);
  color: var(--gray-1);
}


body {
  display: grid;
  place-content: center;
}

#top {
  place-content: center;
  display: grid;
}

button {
  background: var(--gray-7);
  min-height: 35px;
  border-radius: 5px;
  margin-bottom: 10px;
  max-width: var(--size-15);
  box-shadow: var(--shadow-2);
}

button:hover {
  background-color: var(--brown-9);
  box-shadow: var(--shadow-4);
}

#find-brewery-input {
  min-height: 35px;
  border-radius: 5px;
}

#submit {
  background: var(--gray-7);
  margin-left: 5px;
  min-height: 35px;
  border-radius: 5px;
  box-shadow: var(--shadow-2);
}

#submit:hover {
  background-color: var(--brown-9);
  box-shadow: var(--shadow-4);
}

h1 {
  font-size: var(--font-size-6);
}

#radio-buttons {
  margin-top: 5px;
}

label {
  margin-right: 10px;
}

main {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: space-around;
  max-inline-size: calc(var(--size-content-1) * 4);
  gap: var(--size-5);
  padding: var(--size-5);
}

.card {
  flex-basis: var(--size-content-1);
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  background: var(--gray-7);
  border: 1px solid var(--gray-9);
  padding: var(--size-4);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-2);
}

.card:hover {
  box-shadow: var(--shadow-4);
  background-color: var(--brown-9);
}

.card {
  animation: var(--animation-fade-in) forwards;
}

.card>h5 {
  line-height: var(--font-lineheight-1);
}

h1,
h4,
h5 {
  color: var(--gray-4);
}