:root{
  /* Customize these */
  --bg: #165B7E;
  --logo-fill: #222222;
  --bottom-color: #ffffff;
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --max-logo-size: 48vmin; /* max size relative to viewport */
  --min-logo-size: 80px;   /* minimum pixel size */
}

/* Reset + base */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg);
  font-family:var(--font-family);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  position:relative;
  overflow:hidden;
}

/* Center container holds the scalable logo */
.center-container{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  pointer-events:none; /* lets overlay content be clickable if added later */
}

/* Logo wrapper uses fluid sizing while respecting min/max */
.logo{
  width:clamp(var(--min-logo-size), 30vmin, var(--max-logo-size));
  height:auto;
  max-width:90%;
  max-height:90%;
  pointer-events:auto; /* enable interactions if you replace with a link/button */
  display:block;
}

/* Bottom line always centered at bottom */
.bottom-line{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:48px; /* adjust spacing from bottom */
  color:#0297d5;
  font-size:0.95rem;
  padding:6px 12px;
  text-align:center;
  pointer-events:auto;
  white-space:nowrap;
  background:transparent; /* change if you want a pill/background */
}

/* Responsive small-screen tweak */
@media (max-height:420px){
  .bottom-line{bottom:8px;font-size:0.85rem}
}