/* blockquote:before, */
/* blockquote:after { */
/* 	position: absolute; */
/* 	color: #f1efe6; */
/* 	font-size: 8rem; */
/* 	width: 4rem; */
/* 	height: 4rem; */
/* } */

/* blockquote:before { */
/* 	content: '“'; */
/* 	left: -5rem; */
/* 	top: -2rem; */
/* } */

/* blockquote:after { */
/* 	content: '”'; */
/* 	right: -5rem; */
/* 	bottom: 1rem; */
/* } */


/* blockquote { */
/*     position: relative; */
/*     /1* background: #ddd; *1/ */
/* } */

/* blockquote p:before { */
/*   content: open-quote; */
/*   font-family: "Averia Serif Libre", serif; */
/*   position: absolute; */
/*   font-size: 3em; */
/*   margin-left: -0.6em; */
/*   margin-top: .1em; */
/* } */

/* blockquote p:after { */
/*   font-family: "Averia Serif Libre", serif; /1* 3 *1/ */
/*   /1* position: absolute; *1/ */
/*   content: close-quote; */
/*   font-size: 3em; */
/*   bottom: 0; */
/*   right: 0; */
/*   /1* margin-right: -0.6em; *1/ */
/*   margin-bottom: -0.8em; */
/* } */

blockquote p {
  display: inline;
}

blockquote ul {
  list-style-type: none; /* TODO fix */
  /* list-style: none; */
  text-align: right;
  /* margin-right: 4rem; */
  padding: 0; /* Remove padding */
  margin: 0;
}

/* .warning { */
/*   padding: 1px 16px; */
/*   border-left: 4px solid #461561; */
/*   background-color: #b285bc; */
/*   /1* border-radius: 0 3px 3px 0; *1/ */
/*   margin: 16px 0; */
/* } */
.warning {
  /* font-family: 'UnifrakturMaguntia', 'Times New Roman', serif; */
  color: #24292f;
  position: relative;
  padding: 1.2rem;
  margin: 1.5rem 0;
  background: #b285bc;

  /* border: 1px solid #9331CC; */
  /* border-radius: 0; */
  /* box-shadow: */
  /*   0 0 10px rgba(139, 0, 0, 0.2), */
  /*   inset 0 0 20px rgba(139, 69, 19, 0.1); */

  border: 2px solid transparent;
  border-radius: 8px;
  box-shadow:
    0 0 10px 2px #9331CC99, /* Outer glow */
    inset 0 0 10px 2px #9331CC99; /* Inner glow */
  transition: box-shadow 0.3s ease;
}
.warning::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  /* background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" opacity="0.05"><path d="M0 10 L100 10 M0 30 L100 30 M0 50 L100 50 M0 70 L100 70" stroke="%238b0000"/></svg>'); */
  pointer-events: none;
}

.warning .title {
  font-weight: bold;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}
.warning .title::before {
  content: '⛧';
  margin-right: 8px;
  font-weight: bold;
  font-size: 1.6em;
  display: inline-flex;
}

.section-inverse {
  color: #fff;
  background: #333;
}

.slant-up {
  clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
}

.slant-down {
  clip-path: polygon(0 0, 100% 5vw, 100% 100%, 0 calc(100% - 5vw));
}

.slant-t-up {
  clip-path: polygon(0 5vw, 100% 0, 100% 100%, 0 100%);
}

.slant-t-down {
  clip-path: polygon(0 0, 100% 5vw, 100% 100%, 0 100%);
}

.slant-b-up {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%);
}

.slant-b-down {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 5vw));
}

/* nav .menuItems { */
/*   list-style: none; */
/*   display: flex; */
/* } */
/* nav .menuItems li { */
/*   margin: 50px; */
/* } */
/* nav .menuItems li a { */
/*   text-decoration: none; */
/*   color: #8f8f8f; */
/*   font-size: 24px; */
/*   font-weight: 400; */
/*   transition: all 0.5s ease-in-out; */
/*   position: relative; */
/*   text-transform: uppercase; */
/* } */
/* nav .menuItems li a::before { */
/*   content: attr(data-item); */
/*   transition: 0.5s; */
/*   color: #8254ff; */
/*   position: absolute; */
/*   top: 0; */
/*   bottom: 0; */
/*   left: 0; */
/*   right: 0; */
/*   width: 0; */
/*   overflow: hidden; */
/* } */
/* nav .menuItems li a:hover::before { */
/*   width: 100%; */
/*   transition: all 0.5s ease-in-out; */
/* } */


a {
  background: linear-gradient(90deg, #B063E0 0%, #9331CC 100%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  /* color: #724A8C; /1* Vibrant purple *1/ */
  text-decoration: none;
  /* text-shadow: 0 0 5px #724A8C99; */
  /* text-shadow: 0 0 5px rgba(157, 78, 221, 0.6); */
  transition: all 0.3s ease-out;
  position: relative;
}
a:hover {
  color: #461561; /* Brighter purple */
  text-shadow:
    0 0 12px rgba(199, 125, 255, 0.8),
    0 0 24px rgba(123, 44, 191, 0.4);
}
/* Optional: Subtle underline glow */
a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    #c77dff,
    transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
a:hover::after {
  opacity: 0.8;
}

main ul {
  list-style-type: none;
  padding-left: 1em;
}

ul li {
  position: relative;
  padding-left: 2em; /* Space for bullet + gap */
  margin-bottom: 0.5em;
  text-indent: -2em; /* Pulls text back to align with bullet */
  padding-left: 1em; /* Space between bullet and text */
  margin-left: 1em; /* Additional indentation space */
}
main ul li::before {
  content: "✦";
  /* position: absolute; */
  /* left: 0; */
  color: #723680;
  font-size: 1.2em;
  width: 1em; /* Fixed width for bullet */
  margin-right: 0.5em; /* Space between bullet and text */
}

main ul ul li::before {
  content: "✧";
  padding-left: -3rem; /* Space for bullet + gap */
  /* color: #8b0000; */
}

main ul ul ul li::before {
  content: "✫";
  /* color: #333; */
}


code {
  font-family: 'Courier New', monospace;
  font-size: 0.93em;
  padding: 0.1em 0.3em;
  /* border: 1px solid #e0e0e0; */
  /* border-radius: 2px; */
  border: 2px solid transparent;
  border-radius: 6px;
  box-shadow: 0 0 10px 2px rgba(157, 78, 221, 0.25);
  background-color: #9d4edd40;
  position: relative;
}

code::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 1px solid rgba(157, 78, 221, 0.25); /* Subtle purple glow */
  border-radius: 3px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

code:hover::after {
  opacity: 1;
}


main p {
  text-align: justify;
}

main {
  /* Parchment base */
  background-color: #f4e7cb; /* Aged yellow */
  padding: 2rem;
  position: relative;

  /* Wrinkled edge effect */
  /* background-image: */
  /*   /1* Outer transparent edge *1/ */
  /*   linear-gradient(to right, transparent 20px, #f5e7c9 20px, #f5e7c9 calc(100% - 20px), transparent calc(100% - 20px)), */
  /*   linear-gradient(to bottom, transparent 20px, #f5e7c9 20px, #f5e7c9 calc(100% - 20px), transparent calc(100% - 20px)), */

  /*   /1* Wrinkle texture *1/ */
  /*   /1* url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" opacity="0.1"><path d="M0 10 Q30 5 50 15 T100 10 M0 30 Q20 25 60 35 T100 30 M0 50 Q40 45 70 55 T100 50" stroke="%238b4513" fill="none" stroke-width="1"/></svg>'), *1/ */

  /*   /1* Coffee stain effects *1/ */
  /*   radial-gradient(circle at 10% 90%, rgba(139,69,19,0.05) 0%, transparent 25%), */
  /*   radial-gradient(circle at 90% 15%, rgba(139,69,19,0.05) 0%, transparent 25%); */

  /* Cut-off edges */
  clip-path: polygon(
    20px 0%, calc(100% - 20px) 0%, 100% 20px,
    100% calc(100% - 20px), calc(100% - 20px) 100%,
    20px 100%, 0% calc(100% - 20px), 0% 20px
  );
  /* clip-path: polygon(3% 0, 7% 1%, 11% 0%, 16% 2%, 20% 0, 23% 2%, 28% 2%, 32% 1%, 35% 1%, 39% 3%, 41% 1%, 45% 0%, 47% 2%, 50% 2%, 53% 0, 58% 2%, 60% 2%, 63% 1%, 65% 0%, 67% 2%, 69% 2%, 73% 1%, 76% 1%, 79% 0, 82% 1%, 85% 0, 87% 1%, 89% 0, 92% 1%, 96% 0, 98% 3%, 99% 3%, 99% 6%, 100% 11%, 98% 15%, 100% 21%, 99% 28%, 100% 32%, 99% 35%, 99% 40%, 100% 43%, 99% 48%, 100% 53%, 100% 57%, 99% 60%, 100% 64%, 100% 68%, 99% 72%, 100% 75%, 100% 79%, 99% 83%, 100% 86%, 100% 90%, 99% 94%, 99% 98%, 95% 99%, 92% 99%, 89% 100%, 86% 99%, 83% 100%, 77% 99%, 72% 100%, 66% 98%, 62% 100%, 59% 99%, 54% 99%, 49% 100%, 46% 98%, 43% 100%, 40% 98%, 38% 100%, 35% 99%, 31% 100%, 28% 99%, 25% 99%, 22% 100%, 19% 99%, 16% 100%, 13% 99%, 10% 99%, 7% 100%, 4% 99%, 2% 97%, 1% 97%, 0% 94%, 1% 89%, 0% 84%, 1% 81%, 0 76%, 0 71%, 1% 66%, 0% 64%, 0% 61%, 0% 59%, 1% 54%, 0% 49%, 1% 45%, 0% 40%, 1% 37%, 0% 34%, 1% 29%, 0% 23%, 2% 20%, 1% 17%, 1% 13%, 0 10%, 1% 6%, 1% 3%); */

  /* Shadow for depth */
  box-shadow:
    0 0 15px rgba(0,0,0,0.1),
    inset 0 0 50px rgba(139,69,19,0.2);
}

/* /1* Optional: Add curled corner *1/ */
/* main::before { */
/*   content: ""; */
/*   position: absolute; */
/*   top: 0; */
/*   right: 0; */
/*   width: 40px; */
/*   height: 40px; */
/*   background: linear-gradient(135deg, transparent 50%, #d4b483 50%); */
/*   box-shadow: -2px 2px 5px rgba(0,0,0,0.2); */
/* } */