body {
  margin: 0;
  padding: 0;
  font-family: 'Libre Baskerville', serif;
}


.background{
  height: 100%;
  background-color: none;
  margin: 0;
  padding: 0;
}

/* Header Starts */

.header {
  height: auto;
  background-color: none;
  display: flex;
  padding-top: 5px;
  padding-bottom: 5px;
}

.logo{
  height: auto;
  background-color: none;
border-radius: 15px;
/* background: rgba(255, 255, 255, 0.6); */
backdrop-filter: blur(1px);
/* box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); */
/* border: 1px solid rgba(255, 255, 255, 0.3); */
}

.logo img{
  height: 100%;
  width: 100%;
  padding: 10px;


}

.logo-mobile{
  height: auto;
  background-color: none;
border-radius: 15px;
/* background: rgba(255, 255, 255, 0.6); */
backdrop-filter: blur(1px);
/* box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); */
/* border: 1px solid rgba(255, 255, 255, 0.3); */
}

.logo-mobile img{
  height: 25px;
  width: auto;
  margin: 5px;

}

.menu {
  height: auto;
  background-color: none;
  padding-top: 0px; 
}

.navbar-nav {
--bs-nav-link-color: rgb(0 0 0);

border-radius: 12px;
color: #000000;
text-decoration: none;
font-weight: 500;
padding: 0px 0;

transition: all 0.3s;

background-color: none;
padding: 0px;
background: rgba(255, 255, 255, 0.6);
font-size: 12px;
width: auto;
text-align: center;
}

.bg-body-tertiary {
background-color: rgb(248 249 250 / 0%) !important;
}

.dropdown-menu
{
--bs-dropdown-spacer: 0.6rem;
margin-left: -10px;
border-radius: 20px;
--bs-dropdown-bg: rgba(255, 255, 255, 0.6);
}

.dropdown-item {
  border-radius: 8px;
}

.chevron {
font-size: 1rem;
transition: transform 0.3s ease;
}

/* Rotate when submenu is open */
a[aria-expanded="true"] .chevron {
transform: rotate(180deg);
}


/* Header Ends */




/* Brain Starts */


.main-bg{
height: 80vh;
margin-top: 2vh;
margin-bottom: 0vh;
background-color: none;
}

.brain-bg{
  height: auto;
  background-color: none;
}

.brain-main {
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(1px);
border-radius: 20px;
height: auto; /* fallback height  */
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 0px;
text-align: center;
}

.btn:hover {
  background: #000000;
color: white;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* Brain Ends */



/* Footer Starts */


footer {
font-family: 'Libre Baskerville', serif;
backdrop-filter: blur(2px);
background: rgba(255, 255, 255, 0.6);
}

.footer-text {
font-size: clamp(10px, 2vw, 14px);
}

/* Footer Ends */



/* Cookies */

/* Cookie pop-up styling */
.cookie-banner {
display: none; /* hidden by default */
margin-top: 50px;
}

@media (max-width: 767.98px) {
.cookie-banner span {
display: block;
margin-bottom: 10px;
text-align: center;
}
}










  /* ===== Media Queries ===== */

/* Extra small devices (phones, <576px) */
@media (max-width: 575.98px) {
.dropdown-menu
{
margin-left: 50% !important;
--bs-dropdown-bg: white;
}

.logo img {
height: 35px !important;
}

.logo{
padding: 10px;
}

.logo-mobile img{
  height: 60px !important;
}


.btn {
--bs-btn-font-size: 1rem;
}


.navbar-nav {
background: rgb(0 0 0);

}

.nav-link {
color: rgb(255 255 255);
}

.nav-link:focus, .nav-link:hover {
color: white;
}

.brain-main {
  height: auto; /* fallback height  */
  }

  .main-bg {
    height: 70vh;
    margin-top: 0vh;
    min-height: auto;
    max-height: auto;
    background-color: none;
    margin-bottom: 20vh;
  }

  html, body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* disables both vertical and horizontal scroll */
  height: 100%;
  width: 100%;
  touch-action: none; /* disables swipe/scroll on mobile */
}

 .content {
  padding: 0px !important;
  }

  #toggle-brain-btn {
    top: 160px !important;
  }

   /* Earth Controls */
   #earth-controls {
    top: 5px !important;

  }


}

/* Small devices (landscape phones, ≥576px and <768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
.dropdown-menu
{
margin-left: 50% !important;
--bs-dropdown-bg: white;
}

.logo img {
height: 35px !important;
}

.logo{
padding: 10px;
}

.logo-mobile img{
  height: 40px !important;
}

.btn {
--bs-btn-font-size: 1rem;
}


.navbar-nav {
background: rgb(0 0 0);

}

.nav-link {
color: rgb(255 255 255);
}

.nav-link:focus, .nav-link:hover {
color: white;
}

.background{
  background-color: none;
}




  html, body {
    margin: 0;
    padding: 0;
    overflow: hidden; /* disables both vertical and horizontal scroll */
    height: 100%;
    width: 100%;
    touch-action: none; /* disables swipe/scroll on mobile */
  }

  .terms-of-service{
    max-height: 400px !important;
  }

  .privacy-policy{
    max-height: 400px !important;
  }


  .blog-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0px;
    /* background-color: red; */
    max-height: 400px !important;
    min-height: 400px !important;
}


.brain-main {
  height: 400px !important;
  background-color: none;
  padding: 0px;
}



  .main-bg {
    height: 400px !important;
    margin-top: 10vh;
    min-height: 400px !important;
    max-height: 400px !important;
    background-color: none;
    margin-bottom: 0vh;
  }







 #toggle-brain-btn {
  top: 110px !important;
  right: 30px !important;
}

/* Earth Controls */
#earth-controls {
  top: 5px !important;
}
 
.main-container {
  margin: 0rem !important;
}

.footer-text {
  font-size: 16px;
}

}

/* Medium devices (tablets, ≥768px and <992px) */
@media (min-width: 768px) and (max-width: 991.98px) {
.dropdown-menu
{
margin-left: 50% !important;
--bs-dropdown-bg: white;
}

.logo img {
height: 35px !important;
}

.logo{
padding: 10px;
}

.logo-mobile img{
  height: 40px !important;
}

.btn {
--bs-btn-font-size: 1rem;
}


.navbar-nav {
background: rgb(0 0 0);

}

.nav-link {
color: rgb(255 255 255);
}

.nav-link:focus, .nav-link:hover {
color: white;
}

.background{
  background-color: none;
}



.board {
  max-width: 250px !important;
  margin: 20px auto;
}

.cell {
  aspect-ratio: 3 / 1 !important;
  font-size: 1rem;
}

.stat-box {
  padding: 2px 5px !important;
}



.btn {
--bs-btn-font-size: 1rem;
}

.win-message {
   padding: 0px !important;
  }

   html, body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* disables both vertical and horizontal scroll */
  height: 100%;
  width: 100%;
  touch-action: none; /* disables swipe/scroll on mobile */
}

.footer-text {
  font-size: clamp(10px, 2vw, 11px);
}



.album-cover { width: 100px !important; height: 100px !important; }



  .blog-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0px;
    /* background-color: red; */
    max-height: 350px !important;
    min-height: 350px !important;
}


.brain-main {
  height: 350px !important;
  background-color: none;
  padding: 0px;
}



  .main-bg {
    height: 350px !important;
    margin-top: 10vh;
    min-height: 350px !important;
    max-height: 350px !important;
    background-color: none;
    margin-bottom: 0vh;
  }





 #toggle-brain-btn {
  top: 130px !important;
  right: 30px !important;
}

/* Earth Controls */
#earth-controls {
  top: 5px !important;
}

.main-container {
  margin: 0rem !important;
}


}

/* Large devices (desktops, ≥992px and <1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {


}

/* Extra large devices (≥1200px and <1400px) */
@media (min-width: 1200px) and (max-width: 1399.98px) {

}

/* XXL devices (≥1400px) */
@media (min-width: 1400px) {

}


/* Lock the body so it never scrolls */
html, body {
  height: 100%;
  overflow: hidden; /* no vertical or horizontal scroll */
}

/* Allow scroll only inside this */
.blog-scroll {
  max-height: 560px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Confetti canvas fix */
#confettiCanvas {
  width: 100%;
  height: 100%;
}