body {
    background: #fef5e6;
    font-family: "Permanent Marker", "Comic Sans MS", cursive;
    padding: 0;
  }

  .joke-container {
    position: fixed;
    bottom: 10vh;
    right: 20%;
    z-index: 2;
    font-size: 24px;
    font-style: italic;
    border-radius: 50px;
    background: #f90;
    padding: 20px;
    max-width: 50%;
    max-height: 50vh;
  }
  .joke {
    overflow: scroll;
    max-height: 50vh;
  }

  @media (min-width: 600px) {
    .joke-container {
      bottom: 25vh;
    }
    .joke {
      font-size: 24px;
    }
  }

  .joke::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 40px solid transparent;
    border-left-color: #f90;
    border-right: 0;
    border-bottom: 0;
    margin-top: -20px;
    margin-right: -40px;
  }

  .update {
    appearance: none;
    border: none;
    background: transparent;
    position: fixed;
    z-index: 1;
    bottom: 0;
    right: 0%;
    width: 80%;
    transform: translateX(50%);
    cursor: pointer;
  }

  @media (min-width: 600px) {
    .update {
      width: 50%;
      transform: translateX(25%);
    }
  }

  .dad {
    width: 100%;
    vertical-align: bottom;
  }