@font-face {
  font-family: DepartureMono;
  src: url(assets/DepartureMono-Regular.woff2);
}

body {
        margin: 0;
        padding: 0;
        padding: 2rem 1rem;
        background: white;
        color: #38251f;
        font-family: "DepartureMono";
      }

      main {
        max-width: 760px;
        margin: 0 auto;
      }

      .return-link {
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 10;
      }

      .return-link a,
      .return-link a:visited {
        color: #F8C8DC;
      }

      .return-link a:hover,
      .return-link a:focus-visible {
        color: #8d3f52;
      }

      h1 {
        margin: 0 0 0.4rem;
        color: #F8C8DC;
        text-align: center;
      }

      .intro {
        margin: 0 0 1.5rem;
        text-align: center;
      }

      table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 0.5rem;
      }

      th,
      td {
        padding: 1rem;
        border: 2px solid #fff8f1;
        text-align: left;
      }

      th {
        width: 5rem;
        color: #38251f;
        font-size: 1.5rem;
        text-align: center;
      }

      td {
        background: #F8C8DC;
        border-radius: 0 0.5rem 0.5rem 0;
      }

      .tier-s th { background: #f28a83; }
      .tier-a th { background: #f7bd78; }
      .tier-b th { background: #f3df86; }
      .tier-c th { background: #b7d5a5; }
      .tier-d th { background: #a9c5df; }

      .dessert-image {
        display: inline-block;
        margin: 0.2rem;
        padding: 0.35rem;
        border: 0;
        border-radius: 0.35rem;
        background: transparent;
        cursor: pointer;
      }

      .dessert-image img {
        display: block;
        height: 5rem;
      }

      .dessert-image:hover,
      .dessert-image:focus-visible {
        outline: 2px solid #fff8f1;
        outline-offset: 2px;
        transform: scale(1.08);
      }

      dialog {
        max-width: min(28rem, calc(100% - 3rem));
        padding: 1.5rem;
        border: 2px solid #F8C8DC;
        color: #38251f;
        background: #fff8f1;
        font-family: "DepartureMono"";
      }

      dialog img {
        display: block;
        max-width: 100%;
        max-height: 16rem;
        margin: 0 auto 1rem;
        object-fit: contain;
      }

      dialog h2 {
        margin-top: 0;
        color: #F8C8DC;
      }

      dialog button {
        padding: 0.5rem 0.9rem;
        border: 0;
        border-radius: 0.35rem;
        color: white;
        background: #F8C8DC;
        font: inherit;
        cursor: pointer;
        display: block;
        width: 5rem;
        margin: auto;
      }

      @media (max-width: 480px) {
        th,
        td {
          padding: 0.75rem;
        }

        th {
          width: 3rem;
        }
      }

      h1 img {
        -webkit-animation: action 0.3s infinite  alternate;
        animation: action 0.5s infinite  alternate;
    }

    @-webkit-keyframes action {
        0% { transform: translateY(0); }
        100% { transform: translateY(-5px); }
    }

    @keyframes action {
        0% { transform: translateY(0); }
        100% { transform: translateY(-5px); }
    }