#voldemortToggle.active{
background:linear-gradient(220deg, #BCE121, rgba(255, 255, 255, 0.7), #6FCE34);
}
#voldemortToggle.active i,
#voldemortToggle.active span,
#voldemortToggle.active .material-symbols-rounded {
    color: #000 !important;
}
#voldemortToggle.active {
background:linear-gradient(7deg, #BCE121, #6FCE34, rgba(255, 255, 255, 0.8),rgba(255, 255, 255, 0.7) #BCE121, #6FCE34);
}
.ink-vanish {
  -webkit-mask-image: linear-gradient(to right, transparent 45%, #000 50%, #000 55%);
  mask-image: linear-gradient(to right, transparent 45%, #000 50%, #000 55%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  animation: diaryVanish 2s ease-in-out forwards !important;
  pointer-events: none;
}

.ink-appear {
  -webkit-mask-image: linear-gradient(to right, #000 45%, transparent 50%, transparent 55%);
  mask-image: linear-gradient(to right, #000 45%, transparent 50%, transparent 55%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  animation: diaryAppear 2s ease-in-out forwards !important;
}

@keyframes diaryVanish {
  0% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  100% { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
}

@keyframes diaryAppear {
  0% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  100% { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
}