@import url('https://fonts.googleapis.com/css2?family=Nabla&display=swap');
:root{--text:#0f1720}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Nabla', Georgia, 'Times New Roman', serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  /* background image (place a file named `image1.png` next to this HTML)
     If the image is missing, a subtle background color will be used as fallback */
  background-color: #f7f8fb;
  background-image: url('image1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position:relative;
  overflow:hidden;
}
/* dark overlay for better text contrast */
body::before{
  content: "";
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1));
  z-index:0;
  pointer-events:none;
}
.container{position:relative;z-index:1;text-align:center;padding:2rem;display:flex;flex-direction:column;align-items:center;box-sizing:border-box}
/* center only the hero text block vertically within viewport */
.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh}
h1{font-size:3rem;margin:0 0 .5rem;text-shadow:0 2px 6px rgba(0,0,0,0.35);color:#87ceeb;font-family:'Nabla', Georgia, 'Times New Roman', serif}
p{font-size:1.125rem;margin:0;color:#87ceeb;text-shadow:0 1px 4px rgba(0,0,0,0.35);font-family:'Nabla', Georgia, 'Times New Roman', serif}
a img{display:inline-block;margin-top:1rem;width:84px;height:auto;border-radius:8px;box-shadow:0 6px 18px rgba(2,6,23,0.35)}
/* Mobile only: use fallback fonts (Georgia, Times) in white */
@media (max-width:480px){
  h1{font-size:2rem;font-family:Georgia, 'Times New Roman', serif;color:#fff}
  p{font-size:1rem;font-family:Georgia, 'Times New Roman', serif;color:#fff}
  a img{width:56px}
}