body {
  background-color: #2D4A3E;
  color: #fff;
  font-family: 'Nunito', sans-serif;
  overflow-x: hidden;
}

.chalkboard-bg {
  background-color: #2D4A3E;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.chalk-border {
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  border-style: solid;
}

.chalk-box {
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 2px 255px 3px 25px / 255px 5px 225px 3px;
  box-shadow: 2px 2px 0px rgba(0,0,0,0.2);
}

.chalk-btn {
  transition: transform 0.1s ease-in-out;
}
.chalk-btn:active {
  transform: scale(0.98);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.chalk-underline {
  background-image: linear-gradient(#8FBF6B, #8FBF6B);
  background-position: 0% 90%;
  background-repeat: no-repeat;
  background-size: 100% 3px;
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #243D33; }
::-webkit-scrollbar-thumb { background: #8FBF6B; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #7aad58; }