/* Center everything on page */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  font-family: Arial, sans-serif;
  color: white;
  text-align: center;

  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.05), transparent 30%),
    radial-gradient(circle at bottom right, rgba(255,255,255,0.03), transparent 35%),
    linear-gradient(135deg, #050505, #111111, #1a1a1a);
}

/* Liquid Glass panel */
h1, p {
  width: fit-content;
  max-width: 80%;
  padding: 20px 30px;
  margin: 12px;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;

  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.08),
    0 10px 30px rgba(0,0,0,0.45);
}

/* Heading style */
h1 {
  font-size: 2rem;
  font-weight: 700;
}

/* Paragraph style */
p {
  font-size: 1.1rem;
  line-height: 1.5;
}

/* Link */
a {
  color: #7dd3fc;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  color: #ffffff;
}