@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;900&display=swap");

:root {
  --bg-clr: hsl(0, 0%, 95%);
  --bg-clr2: hsl(0, 0%, 85%);
  --txt-clr: hsl(0, 0%, 5%);
}

* {
  font: 400 1rem Montserrat, sans-serif;
  line-height: 1.5;
  letter-spacing: 0.3px;
  background-color: var(--bg-clr);
  color: var(--txt-clr);
  user-select: none;
}

h1 {
  font-weight: 100;
  letter-spacing: -1.5px;
}

.category-title {
  background-color: var(--bg-clr2);
  color: var(--txt-clr);
  font-size: 1.3rem;
  font-weight: 900;
  border-radius: 5px;
  cursor: pointer;
  transition: line-height 200ms, transform 200ms, background-color 100ms;
}
.category:hover {
  background-color: var(--txt-clr);
  color: var(--bg-clr2);
}

.content-container {
  transition: max-height 200ms, padding 50ms, opacity 100ms;
}

.sub-category-title-container > h3 {
  font-size: 1.2rem;
}

.button {
  border: 2px solid var(--bg-clr2);
  border-radius: 5px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 100ms;
}
.button:hover {
  background-color: var(--bg-clr2);
}