#mobile-menu {
  /* display: none; */
}

#mobile-menu.active {
  /* display: block; */
}

header {
  width: 100%;
}

body {
  width: 100%;
  /* transition: all 3000ms ease-in-out; */
  overflow-x: hidden;
}

.right-0 {
  right: 0 !important;
}

@media screen and (min-width:1024px) {
  .main-container {
    width: calc(100% - 330px);
  }
}

.box-shadow {
  box-shadow: 
    inset -5px -5px 10px 0px transparent,
    inset  5px 3px 10px 0px transparent,
    0 20px 25px -5px rgb(0 0 0 / 0.1), 
    0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.box-shadow:hover {
  box-shadow: 
    inset -5px -5px 10px 0px rgba(255, 255, 255, 0.5),
    inset 5px 3px 10px 0px rgba(107, 107, 107, 0.231),
    0 20px 25px -5px transparent, 
    0 8px 10px -6px transparent;
}

.prose :where(h1):not(:where([class~="not-prose"] *)) {
  padding-bottom: .2em;
  margin-bottom: 1.1rem;
  font-size: 1.7em !important;
  position: relative;
  border-bottom: 1px solid #5c93bb2b;
}

.w-250 {
  width: 600px;
}

.posts-container:after{
  content: "";
  width: 320px;
  height: 0;
}

.santen-leader-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.santen-leader-3, .santen-leader {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}


#mobile-menu {
  right: calc(-100vw - 1rem);
  /* background-color: #f5f5f5; */
  overflow-x: scroll;
  max-width: 100vw;
  padding-left: 2px;
  top: 0;
  height: 100vh;
  transition: all 300ms ease-in-out;
  z-index: 50;
}

@media (min-width: 768px) {
  #mobile-menu {
    max-width: 60vw;
  }
}

@media (min-width: 1024px) {
  #mobile-menu {
    max-width: 40vw;
  }
}

#mobile-menu #mobile-nav-ul li {
  transition: all 0.8s ease;
  opacity: 0;
  margin-left: 50vw;
}

#mobile-menu.right-0 #mobile-nav-ul li {
  opacity: 1;
  margin-left: 0;
}
/* .button {
  @apply h-12 text-2xl font-bold p-2 tracking-wide inline-block leading-8
  transition-all duration-300 ease-in-out rounded-md shadow-md
  text-gray-700 bg-gray-100 hover:bg-gray-200
  dark:text-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700;
}
header {
  @apply py-2 mb-3;
}

aside {
  right: calc(-100vw - 1rem);
  @apply 
  bg-[#f5f5f5] dark:bg-gray-700
  overflow-x-scroll max-w-[100vw] md:max-w-[60vw] lg:max-w-[40vw] px-2 top-0  h-screen transition-all duration-300 ease-in-out z-50;
}


#close-nav {
  @apply bg-black bg-opacity-50 ;
} */