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);
}

.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;
}
}



textarea {
  height: 150px !important;
  padding: .8rem !important;
  font-size: 1.2rem !important;
  line-height: 1.5rem !important;
}






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

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

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

.logo-mobile{
padding: 10px;
}

.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;
  }

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

    #wheel {
      width: 200px;
      height: 200px;
  }
  #wheel { border-radius: 50%; }

  .wheel-container {
    position: relative;
    width: auto !important;
    height: auto !important;
    margin: auto;
  }
  
  textarea {
    height: 90px !important;
    padding: .5rem !important;
    font-size: 0.8rem !important;
    line-height: 1rem !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;
}

.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;
}

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

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

  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 */
  }


/* Scrollable area */
.blog-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0px !important;
  background-color: none;
  max-height: 460px !important; /* 👈 set desired height */
  }

  #wheel {
    width: 250px;
    height: 250px;
}
#wheel { border-radius: 50%; }


.wheel-container {
  position: relative;
  width: auto !important;
  height: auto !important;
  margin: auto;
}

textarea {
  height: 100px !important;
  padding: .5rem !important;
  font-size: 0.8rem !important;
  line-height: 1rem !important;
}



}

/* 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;
}

.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;
}

.brain-main {
  height: auto;
  background-color: none;
  padding: 0px;
}

.scroll-area {
  padding: 0px !important;
  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;
}

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



.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; }

/* Scrollable area */


  .blog-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background-color: none;
    max-height: 360px !important;
}

.wheel-container {
  position: relative;
  width: auto !important;
  height: auto !important;
  margin: auto;
}

#wheel {
  width: 200px;
  height: 200px;
}
#wheel { border-radius: 50%; }

textarea {
  height: 100px !important;
  padding: .5rem !important;
  font-size: 0.8rem !important;
  line-height: 1rem !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 */
}


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