:root{
  --anchor:#305885;
  --bg-1:#fff8e7;
  --bg-2:#ffe8d6;
  --paper:#ffffff;
  --ink:#1c2b3a;
  --font-display:'Baloo 2', sans-serif;
  --font-body:'Fredoka', sans-serif;
  --brand-1:#4cd07d;
  --brand-2:#ffc23c;
  --brand-solid:#4cd07d;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; font-family:var(--font-body); color:var(--ink);
  background:
    radial-gradient(circle at 12% 15%, var(--bg-2), transparent 55%),
    radial-gradient(circle at 88% 85%, var(--bg-2), transparent 55%),
    var(--bg-1);
  min-height:100vh; overflow-x:hidden; position:relative;
}

.noise{position:fixed; inset:0; pointer-events:none; opacity:.035; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

header{position:relative; z-index:2; display:flex; justify-content:center; align-items:center; padding:22px 34px; flex-shrink:0;}
.logo{font-family:var(--font-display); font-weight:800; font-size:1.4rem; color:var(--anchor); text-align:center;}
.logo span{color:#ff5d5d;}