/* ---------------- BODY & GENERAL ---------------- */
body { 
  padding-top: 56px; 
  font-family: 'Roboto', 'Montserrat', 'Lato', Arial, sans-serif; 
  color: white; 
  background-color: #1b1b29;
  overflow-x: hidden;
  min-height: 100%;
  margin: 0;
}

html, body {
  height: auto;
}

/* ---------------- NAVBAR ---------------- */
.navbar.fixed-top {
  background-color: #1c1c28 !important; 
  border-bottom: 2px solid #442244;
  z-index: 3;
  padding: 0.5rem 2rem;
}

.navbar.fixed-top .navbar-brand {
  color: #ff66aa !important;
  font-weight: bold;
  font-size: 1.5rem;
}

.navbar.fixed-top .nav-link {
  color: #ffffff !important;
  font-weight: bold;
}

.navbar.fixed-top .nav-link:hover {
  color: #ff66aa !important;
}

/* ---------------- FOOTER ---------------- */
footer {
  background-color: #1c1c28 !important;
  border-top: 2px solid #442244;
  color: #ffffff;
  padding: 1rem 2rem;
  text-align: center;
  z-index: 3;
}

footer a {
  color: #ff66aa !important;
  font-weight: bold;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
  color: #ffffff !important;
}

/* ---------------- PARALLAX ---------------- */
.parallax {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

/* ---------------- LAYERS ---------------- */
.layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;   /* ensures scrolling still works */
  z-index: 0;
  will-change: transform;
}

/* ---------------- MOON ---------------- */
.layer-back::before {
  content: "";
  position: absolute;
  top: 1%;
  right: 5%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    #f6f6f2 50%,
    #f6f6f2 65%,
    rgba(238,238,238,0.5) 75%,
    rgba(238,238,238,0.3) 85%,
    rgba(230,230,255,0.25) 92%,
    rgba(230,230,255,0.1) 97%,
    transparent 100% 
  );
  box-shadow: 0 0 40px 10px rgba(230,230,240,0.1);
  z-index: 0;
  will-change: transform, opacity;
}

/* ---------------- STARS ---------------- */
.layer-stars {
  background: transparent;
  background-image: 
    radial-gradient(white 0.8px, transparent 1px),
    radial-gradient(white 0.6px, transparent 1px),
    radial-gradient(white 0.7px, transparent 1px);
  background-size: 200px 200px, 300px 300px, 400px 400px;
  background-position: 0 0, 60px 120px, 180px 220px;
  background-repeat: repeat;
  opacity: 0.7;
  z-index: 0;
  transform: translateZ(-0.5px) scale(1.5);
}

/* ---------------- CONTENT LAYERS ---------------- */
.container,
.transition,
.row,
.col-12,
.col-lg-8,
.col-lg-4,
.col-lg-6,
footer {
  position: relative;
  z-index: 2;
}

.left-aligned { margin-left: auto; }
.bg-dark { color: #000000; }
.navbar { color: #000000; }

.col-lg-8, .col-lg-4 {
  background-color: transparent;
  border-radius: 25px;
  padding-top: 10px;
  margin: auto;
}

.row {
  background-color: rgba(26, 18, 36, 0.7);
  border-radius: 25px;
  padding-top: 10px;
  border: black;
  margin: 10px;
}

.center { 
  display: block;
  margin-left: auto;
  margin-right: auto; 
}

/* ---------------- CALLOUT ---------------- */
.bd-callout {
  padding: 1.25rem; 
  margin: 1.25rem 0; 
  border: 1px solid #ff66aa; 
  border-radius: .25rem;
}
.bd-callout h4 { margin-bottom: .25rem; }
.bd-callout p:last-child { margin-bottom: 0; }
.bd-callout code { border-radius: .25rem; }
.bd-callout+.bd-callout { margin-top: -.25rem; }
.bd-callout-info { border-left-color: #5bc0de; }
.bd-callout-warning { border-left-color: #f0ad4e; }
.bd-callout-danger { border-left-color: #d9534f; }

/* ---------------- HEADINGS ---------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', 'Roboto', Arial, sans-serif;
  font-weight: bold;
}

/* ---------------- TRANSITIONS ---------------- */
.transition {
  opacity: 0;
  transform: scale(0.95);
  transition: none;
  animation: none;
}
.transition.loaded {
  animation: fadeZoomIn 0.5s cubic-bezier(.17,.67,.83,.67) forwards;
}
@keyframes fadeZoomIn {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---------------- BATS ---------------- */
#bats-container {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  z-index: 0;         
  pointer-events: none;
}

.bat {
  width: 90px !important;
  height: auto !important;
  position: absolute;
  opacity: 0;
  will-change: transform, opacity, left, top;
}