.canonical-tip
  position: fixed
  display: flex
  text-align: center
  border-radius: 8px
  bottom: 4rem
  left: 50%
  transform: translateX(-50%)
  max-width: 90%
  color: var(--text)
  font-family: #fff8e1
  z-index: 9999999
  box-shadow: 0 2px 8px rgba(black, .1), 0 4px 16px rgba(black, .1), 0 8px 32px rgba(black, .1)
  .headline
    font-size: $fsh2
    margin-bottom: .5rem
  a
    display: block
    color: inherit
    padding: .75rem
    font-size: $fs-14

.canonical-tip.official
  background-color: var(--bg-a100)

.canonical-tip.unofficial
  background-color: hsl(5, 100%, 60%)
  color: white
  animation: breathe 3s ease-in-out infinite
  @keyframes breathe
    0%
      background-color: hsl(5, 100%, 60%)
    50%
      background-color: hsl(5, 100%, 30%)
    100%
      background-color: hsl(5, 100%, 60%)