/* UTILITIES */
:root{
  --clr-bg: linear-gradient(135deg,#b0d3ff 0%,#f1f9ff 50%,#ffe9f3 100%);
  --clr-accent: #0066ff;
  --clr-accent-dark:#0040a8;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family: 'Segoe UI',sans-serif;
  background: var(--clr-bg);
  color:#2c2c2c;
  line-height:1.6;
}

/* CONTAINER */
.container{
  max-width:900px;
  margin:3rem auto;
  padding:2rem 2.5rem;
  background:#ffffffee;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
}

/* TYPOGRAPHY */
p,strong,li,a{margin-bottom:1em}
strong{color:var(--clr-accent-dark)}
a{color:var(--clr-accent);text-decoration:none}
a:hover{text-decoration:underline}

/* LISTS */
ul,ol{padding-left:1.25rem}

/* BACK TO TOP BUTTON */
#topBtn{
  position:fixed;
  bottom:1.5rem;
  right:1.5rem;
  background:var(--clr-accent);
  color:#fff;
  border:none;
  padding:.8rem 1rem;
  border-radius:50%;
  font-size:1.25rem;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease,transform .3s ease;
}
#topBtn.show{opacity:1;visibility:visible;transform:translateY(0)}
#topBtn:hover{background:var(--clr-accent-dark)}

/* FADE-IN ON SCROLL */
.fade{opacity:0;transform:translateY(30px);transition:all .8s ease}
.fade.appear{opacity:1;transform:none}