@font-face {
  font-family: GochiHand;
  src: url("/ricette/fonts/Gochi_Hand/GochiHand-Regular.ttf"); }

*,
*::before,
*::after {
  box-sizing: border-box; }

* {
  margin: 0;
  padding: 0; }

ul {
  list-style: none; }

a:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px deeppink; }

/** 
 * Show the children of the element like a list of inline items.
 */
.pagination {
  display: flex; }

.page-link {
  padding: 0 0.5rem;
  text-decoration: none;
  color: inherit; }
  .page-link:hover {
    background-color: #f6e2ff; }

.page-item {
  color: #555; }
  .page-item.active {
    color: #e1a0ff; }
  .page-item.disabled {
    color: #ccc; }
    .page-item.disabled .page-link:hover {
      background-color: transparent; }

.credits {
  position: relative;
  top: -1.3rem;
  text-align: right;
  padding: 0 0.2rem;
  color: lightgray;
  font-size: 60%;
  font-family: sans-serif; }
  .credits a {
    color: inherit;
    text-decoration: none; }
    .credits a:hover {
      text-decoration: underline; }

/*

.recipe-list
    __item
        __image
            a
                img
        __info
            __title
            __description
            __category
            __duration
            __tags
*/
.recipes-list {
  list-style: none;
  padding: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%,300px), 1fr));
  gap: 1rem; }
  .recipes-list__item {
    background-color: whitesmoke;
    display: grid;
    grid-template-rows: auto 1fr;
    border: 2px solid #F2F2F2;
    border-radius: 16px;
    overflow: hidden; }
    .recipes-list__item:hover {
      background-color: #f6e2ff; }
      .recipes-list__item:hover img {
        opacity: 0.7; }
  .recipes-list__image {
    margin: 0;
    padding: 0;
    max-height: 150px;
    overflow: hidden;
    height: 150px; }
    .recipes-list__image img {
      min-width: 100%;
      min-height: 100%;
      width: auto;
      object-fit: cover;
      object-position: center; }
  .recipes-list__info {
    padding: 1rem;
    display: grid;
    grid-template-rows: auto auto auto auto 1fr; }
  .recipes-list__category {
    text-transform: uppercase;
    letter-spacing: 0.125rem;
    color: #e1a0ff; }
  .recipes-list__title a {
    color: #555;
    text-decoration-color: #e1a0ff; }
    .recipes-list__title a:hover {
      color: #e1a0ff; }
  .recipes-list__description {
    color: gray;
    font-size: 100%; }
  .recipes-list__tags {
    align-self: flex-end;
    font-size: 80%;
    padding: 0;
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    flex-wrap: wrap-reverse; }
    .recipes-list__tags > * {
      display: block;
      flex: 0 0 auto; }
    .recipes-list__tags a {
      background-color: #e1a0ff;
      border-radius: 0.8rem;
      color: white;
      padding: 0.15rem 0.6rem;
      text-decoration: none;
      display: inline-block;
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 25ch; }
      .recipes-list__tags a:hover {
        color: black; }
      .recipes-list__tags a span {
        font-size: 80%;
        margin-left: 0.5rem;
        color: rgba(0, 0, 0, 0.5); }

.recipe {
  margin: 0 0 1rem 0.5rem;
  max-width: 70ex;
  color: gray; }
  .recipe img {
    width: 100%;
    height: auto; }
  .recipe__title {
    color: #e1a0ff;
    font-size: 3rem; }
  .recipe__description {
    color: #555; }
  .recipe h2 {
    margin-top: 1rem;
    color: #e1a0ff; }
  .recipe__info, .recipe__ingredients {
    margin-left: 1rem;
    list-style: disc; }
  .recipe__instructions {
    margin-left: 1rem;
    color: #e1a0ff; }
    .recipe__instructions li:not(:first-child) {
      margin-top: 0.5rem; }
    .recipe__instructions strong {
      color: #555; }
    .recipe__instructions p {
      color: gray; }
  .recipe__tags {
    margin-top: 1ex;
    font-size: 80%;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5ex 1ex; }
    .recipe__tags > * {
      display: block;
      flex: 0 0 auto; }
    .recipe__tags a {
      background-color: #e1a0ff;
      border-radius: 0.8rem;
      color: white;
      padding: 0.15rem 0.6rem;
      text-decoration: none;
      display: inline-block;
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 25ch; }
      .recipe__tags a:hover {
        color: black; }
      .recipe__tags a span {
        font-size: 80%;
        margin-left: 0.5rem;
        color: rgba(0, 0, 0, 0.5); }

html {
  color: black;
  background-color: white;
  font-family: GochiHand, Comic, Arial, Helvetica, sans-serif; }

body {
  display: grid;
  height: 100vh;
  grid-gap: 0;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas: 'header' 'nav' 'main' 'footer'; }

header {
  grid-area: header;
  background-color: #e1a0ff;
  padding: 1rem 1rem; }

.site-title a {
  text-decoration: none;
  color: white; }
  .site-title a:hover {
    text-decoration: underline; }

nav {
  grid-area: nav;
  display: grid;
  align-items: start;
  align-content: start;
  grid-template-columns: repeat(auto-fit, minmax(30ex, 1fr)); }

.recipes-sections {
  font-size: 1.25rem;
  padding: 1rem 0 1rem 0.4rem;
  list-style: none; }
  .recipes-sections li ul {
    padding-left: 2rem; }
  .recipes-sections a {
    color: #555;
    text-decoration-color: #e1a0ff;
    border-radius: 0.8rem;
    padding: 2px 0.6rem 0px 0.6rem;
    white-space: nowrap; }
    .recipes-sections a:hover {
      color: #e1a0ff; }
  .recipes-sections .selected {
    background-color: #f6e2ff; }
  .recipes-sections img {
    padding-inline-end: 0.5ex;
    position: relative;
    top: 6px;
    width: 24px;
    height: 24px; }

.recipes-tags {
  padding: 1rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 0.6rem; }
  .recipes-tags > * {
    display: block;
    flex: 0 0 auto; }
  .recipes-tags a {
    background-color: #e1a0ff;
    border-radius: 0.8rem;
    color: white;
    padding: 0.15rem 0.6rem;
    text-decoration: none;
    display: inline-block;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 25ch; }
    .recipes-tags a:hover {
      color: black; }
    .recipes-tags a span {
      font-size: 80%;
      margin-left: 0.5rem;
      color: rgba(0, 0, 0, 0.5); }

main {
  grid-area: main;
  min-width: 0; }

footer {
  grid-area: footer;
  background-color: #e1a0ff;
  color: white;
  padding: 1rem 1rem; }

.breadcrumb {
  margin: 1rem 0 0 0.5rem; }
  .breadcrumb > li {
    display: inline-block;
    vertical-align: top;
    line-height: 1; }
    .breadcrumb > li:not(:last-child)::after {
      content: ' /';
      color: #e1a0ff; }
  .breadcrumb a {
    color: #555;
    text-decoration-color: #e1a0ff; }
    .breadcrumb a:hover {
      color: #e1a0ff; }

@media (min-width: 800px) {
  body {
    display: grid;
    height: 100vh;
    grid-template-columns: 30ex 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 'header   header' 'nav     main' 'footer   footer'; } }

.recipes-number {
  padding-inline-start: 0.5rem; }

/*# sourceMappingURL=style.css.map */