/*
 * Base styles for HTML elements.
 * Builds on reset.css with your app's defaults.
 */
@layer base {
  body {
    background-attachment: fixed;
    min-height: 100vh;
    overflow-x: hidden;
    color: white;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: radial-gradient(circle at center, #1a1a2e 0%, #0a0a0b 100%);
    font-family: system-ui, -apple-system, sans-serif;
  }

  header {
    grid-row: 1;
  }

  main {
    grid-row: 2;
    padding-inline: 2rem;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  main .container {
    border-radius: 24px;
    padding: 3rem;
    text-align: center;
    max-width: 850px;
    position: relative;
    z-index: 10;
  }

  .decoration {
    font-size: 3rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 10px #d4af37);
  }

  footer {
    text-align: right;
    padding-inline: 2rem;
    margin-top: 3rem;
    font-size: 0.8rem;
    color: rgba(212, 175, 55, 0.6);
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    padding-top: 1.5rem;
  }

  @media (max-width: 650px) {
    h1 {
      font-size: 2.2rem;
    }

    main.container {
      padding: 1.5rem;
    }
  }
}