/** This stuff is necessary !! **/
.explode > p {
  position: absolute;
  cursor: inherit;
}

.explode {
  transform: translate(-10px,-20px);
  position: absolute;
  pointer-events: none;
}


/** Here's just stuff for the demo, to make the effect more obvious **/
body {
  background-color: black;
  color: white;
  cursor: pointer;
  font-family: 'Verdana', 'Arial', sans-serif;
}

main {
  height: 100vh;
  width: 100vw;
}





.scroll-container {
  position: absolute;    /* Не влияет на другие элементы */
  top: 70px;            /* Отступ сверху */
  right: 650px;         /* Отступ справа */
}

.magic-scroll-box {
  /* Убрать прозрачность - сделать сплошным цветом */
  background: #FAEBD7; /* Бежевый (Beige) - сплошной цвет */
  backdrop-filter: none; /* Убрать размытие */
  -webkit-backdrop-filter: none; /* Убрать размытие */
  
  /* Убрать прозрачность у границ */
  border: 2px solid #d2b48c; /* Тан (Tan) - сплошной цвет */
  border-radius: 20px;
  
  /* Упростить тени - убрать прозрачность */
  box-shadow: 
    0 5px 15px rgba(139, 69, 19, 0.3); /* Простая коричневая тень */
  
  /* Текст в тёмном цвете для контраста */
  color: #5d4037; /* Тёмно-коричневый */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  
  /* Плавная прокрутка */
  scroll-behavior: smooth;
  
  /* Анимация появления */
  animation: fadeInUp 0.8s ease-out;
  
  /* Обязательные свойства */
  overflow-y: auto;
  padding: 25px;
  width: 600px; /* или укажите в HTML */
  height: 900px; /* или укажите в HTML */
}

/* Анимация появления */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Простой бежевый скроллбар для .magic-scroll-box */
.magic-scroll-box::-webkit-scrollbar {
  width: 14px; /* Немного шире для удобства */
}

.magic-scroll-box::-webkit-scrollbar-track {
  background: #f5f5dc; /* Бежевый - сплошной цвет */
  border-radius: 10px;
  border: 1px solid #d2b48c; /* Тан */
}

.magic-scroll-box::-webkit-scrollbar-thumb {
  background: #d2b48c; /* Тан - сплошной цвет */
  border-radius: 10px;
  border: 2px solid #8b4513; /* Седло-коричневый */
}

.magic-scroll-box::-webkit-scrollbar-thumb:hover {
  background: #b8860b; /* Тёмно-золотистый при наведении */
  transform: none; /* Убрать трансформацию */
  transition: background 0.3s ease;
}

/* Свечение при фокусе - убрать прозрачность */
.magic-scroll-box:focus {
  outline: none;
  box-shadow: 
    0 0 0 3px #8b4513, /* Коричневая обводка */
    0 5px 20px rgba(139, 69, 19, 0.4);
}

/* ОБЩИЙ СКРОЛЛБАР СТРАНИЦЫ (если нужен) */
/* Если хотите, чтобы общий скроллбар тоже был бежевым: */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #f5f5dc; /* Бежевый */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #d2b48c; /* Тан */
  border-radius: 10px;
  border: 2px solid #8b4513;
}

::-webkit-scrollbar-thumb:hover {
  background: #b8860b; /* Тёмно-золотистый */
}