---
export interface Props {
  text: string
}
const { text } = Astro.props
---

<div>
  {text}
</div>

<style>
  div {
    display: flex;
    width: 100%;
    max-height: auto;
    background-color: var(--c-duskgray);
    text-align: center;
    justify-content: center;
    color: white;
    font-size: 2.75rem;
    letter-spacing: 0.075em;
    padding: 2rem 0rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bolder;
  }
  @media (min-width: 900px) {
    div {
      font-size: 4.5rem;
    }
  }
</style>
