@font-face {
    font-family: 'Silkscreen';
    src: url('/fonts/silkscreen/slkscr.ttf') format('truetype');
    font-weight: normal;
}

/* Recipe tags */
.categories > button, #show-all {
  font-family: "Silkscreen", monospace;
  background-color: var(--accent);
  color: var(--text-color-invert);
  border: none;
  margin: 0 0.25rem;
  font-size: 1em;
}

.categories button:hover {
    background-color: var(--bg-color);
}

h3 > button:hover {
    color: var(--accent);
}

button:hover {
    cursor: url('/i/cursor2.png'), auto;
}

h3.categories {
    margin-bottom: 0.25rem;
}

/* Extra text "+" button */
h3 > button {
  font: inherit;
  background-color: inherit;
  border: none;
  padding: 0;
}

.recipe-txt, .recipe-notes {
    display: none;
}

div.categories {
    margin: 0.5rem 0;
    display: flex;
    flex-flow: row wrap;
    row-gap: 0.5rem;
    align-items: center;
}

.categories label {
    font-weight: bold;
}

#show-all {
    display: none;
    margin: 1rem auto 0.5rem;
    background-color: var(--bg-color);
}

#show-all:hover {
    background-color: var(--accent);
    cursor: url('/i/cursor.png'), auto;
}

@media screen and (max-width: 1200px) {
    .categories > button, #show-all {
        font-size: 0.75em;
    }
}