:root{
  --bg1:#0f3779;          /* duboka plava */
  --bg2:#165ca7;          /* srednja plava */
  --bg3:#11436e;          /* akcent plava */
  --card: rgba(6, 30, 60, .55);
  --card2: rgba(255,255,255,.06);
  --text:#f4f8ff;
  --muted:#c8d6f3;
  --accent:#7fd8ff;       /* “bubble” highlight */
  --accent2:#ffffff;
  --border:rgba(255,255,255,.16);
  --shadow: 0 18px 40px rgba(0,0,0,.40);
  --radius:18px;
  --max:1100px;
}

  *{
    box-sizing:border-box;
  }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
  color:var(--text);
  line-height:1.55;
  background:var(--bg2);
}

/* Bubble overlay (ne smeta klikovima) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .40;

  /* puno “krugova/mjehurića” raznih veličina */
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.45) 0 2px, transparent 3px),
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.35) 0 10px, transparent 11px),
    radial-gradient(circle at 8% 45%, rgba(255,255,255,.30) 0 16px, transparent 17px),
    radial-gradient(circle at 25% 60%, rgba(255,255,255,.26) 0 6px, transparent 7px),
    radial-gradient(circle at 78% 18%, rgba(255,255,255,.32) 0 14px, transparent 15px),
    radial-gradient(circle at 92% 28%, rgba(255,255,255,.28) 0 22px, transparent 23px),
    radial-gradient(circle at 86% 56%, rgba(255,255,255,.22) 0 9px, transparent 10px),
    radial-gradient(circle at 70% 78%, rgba(255,255,255,.20) 0 18px, transparent 19px),

    /* dodatni “sitni šum” mjehurića */
    radial-gradient(circle, rgba(255,255,255,.18) 0 2px, transparent 3px);
  background-size:
    auto, auto, auto, auto, auto, auto, auto, auto,
    220px 220px;
  background-position:
    center, center, center, center, center, center, center, center,
    0 0;
  background-repeat:
    no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
    repeat;
  filter: blur(.2px);
}

/* da sadržaj bude iznad mjehurića */
body > *{
  position: relative;
  z-index: 1;
}

  a{
    color:inherit;
  }



  .logo{
  margin-top: 15%;
  height: 300px; /* was 120px */
  width: 300px;
  justify-content: center;
  width:auto;
  display:block;
  transition: transform .18s ease, filter .25s ease;
}

.logo:hover{
  transform: scale(1.05);
}

 .wrap{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  justify-content: center;
 }