<div class="out-of-office">
  <h2 class="title">Summer Hours 2022</h2>
  <p class="text">
    I am currently out-of-office for summer 2022. That means instead of writing
    and documenting, I'm going to spend time with great people, in great places,
    hopefully eating great food.
  </p>

  <p class="text">Long days and pleasant nights, friend.</p>

  <p class="text">Thomas, 2022-07-06</p>
</div>

<link href="https://fonts.bunny.net/css?family=amiko:700" rel="stylesheet" />

<style>
  .out-of-office {
    font-size: 1.5rem;
    max-width: 750px;
    font-weight: 700;

    text-align: center;
    padding: 1rem;
    background-color: #ffcb00;
    border: 5px solid #f8aa4b;
    border-radius: 12px;
  }

  .title,
  .text {
    color: inherit;
    font-family: inherit;
  }

  .title {
    font-family: "Amiko", var(--font-family-title);
    font-weight: 700;
    font-size: 1.35rem;
    padding: 0;
    margin: 0;
    color: #072448;
  }

  .text {
    font-size: var(--font-size-base);
    color: #072448;
    font-family: var(--font-family-sans);
    font-weight: 500;
  }
</style>
