@charset "UTF-8";
*:focus {
  outline: none !important;
}

body {
  background-color: #f6f2fb;
  background-size: 4px 4px;
  background-image: linear-gradient(90deg, transparent, transparent 3px, rgba(0, 0, 0, 0.05) 4px), linear-gradient(transparent, transparent 3px, rgba(0, 0, 0, 0.07) 4px);
  color: #8e3bb8;
  font-family: "Noto Sans", sans-serif;
  font-weight: 300;
  margin: 0;
  min-height: 100vh;
  box-shadow: inset 0 0 150px rgba(142, 59, 184, 0.4), inset 0 0 150px rgba(142, 59, 184, 0.3);
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  letter-spacing: 0.1rem;
}

.container {
  padding: 0 4rem;
}

header {
  padding: 1rem 0;
}

h1 {
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: 0.7rem;
  text-shadow: 0.3rem 0.3rem 0 rgba(142, 59, 184, 0.2);
}
h1 span {
  margin-right: -0.7rem;
}
h1 small::before {
  content: "–";
}
h1 small {
  font-weight: 500;
  text-transform: none;
  text-shadow: none;
  letter-spacing: 0.1rem;
}

.pattern {
  border-top: 2px solid #8e3bb8;
}

.pattern-inner {
  height: 40px;
  background-size: 50px 3px, 50px 1px, 50px 1px, 50px 1px, 50px 1px, 50px 1px, 50px 1px, 50px 1px, 50px 1px;
  background-position: 0 0, 22px 4px, 22px 5px, 22px 6px, 22px 7px, 28px 12px, 28px 13px, 28px 14px, 28px 15px;
  background-image: linear-gradient(90deg, #8e3bb8, #8e3bb8 10px, transparent 10px), linear-gradient(90deg, rgba(142, 59, 184, 0.4), rgba(142, 59, 184, 0.4) 1px, rgba(142, 59, 184, 0.8) 1px, rgba(142, 59, 184, 0.8) 2px, rgba(142, 59, 184, 0.9) 2px, rgba(142, 59, 184, 0.9) 3px, rgba(142, 59, 184, 0.4) 3px, rgba(142, 59, 184, 0.4) 4px, transparent 4px, transparent 12px, rgba(142, 59, 184, 0.4) 12px, rgba(142, 59, 184, 0.4) 13px, rgba(142, 59, 184, 0.8) 13px, rgba(142, 59, 184, 0.8) 14px, rgba(142, 59, 184, 0.9) 14px, rgba(142, 59, 184, 0.9) 15px, rgba(142, 59, 184, 0.4) 15px, rgba(142, 59, 184, 0.4) 16px, transparent 16px), linear-gradient(90deg, rgba(142, 59, 184, 0.9), rgba(142, 59, 184, 0.9) 1px, #8e3bb8 1px, #8e3bb8 2px, #8e3bb8 2px, #8e3bb8 3px, rgba(142, 59, 184, 0.9) 3px, rgba(142, 59, 184, 0.9) 4px, transparent 4px, transparent 12px, rgba(142, 59, 184, 0.9) 12px, rgba(142, 59, 184, 0.9) 13px, #8e3bb8 13px, #8e3bb8 14px, #8e3bb8 14px, #8e3bb8 15px, rgba(142, 59, 184, 0.9) 15px, rgba(142, 59, 184, 0.9) 16px, transparent 16px), linear-gradient(90deg, rgba(142, 59, 184, 0.9), rgba(142, 59, 184, 0.9) 1px, #8e3bb8 1px, #8e3bb8 2px, #8e3bb8 2px, #8e3bb8 3px, rgba(142, 59, 184, 0.9) 3px, rgba(142, 59, 184, 0.9) 4px, transparent 4px, transparent 12px, rgba(142, 59, 184, 0.9) 12px, rgba(142, 59, 184, 0.9) 13px, #8e3bb8 13px, #8e3bb8 14px, #8e3bb8 14px, #8e3bb8 15px, rgba(142, 59, 184, 0.9) 15px, rgba(142, 59, 184, 0.9) 16px, transparent 16px), linear-gradient(90deg, rgba(142, 59, 184, 0.4), rgba(142, 59, 184, 0.4) 1px, rgba(142, 59, 184, 0.8) 1px, rgba(142, 59, 184, 0.8) 2px, rgba(142, 59, 184, 0.9) 2px, rgba(142, 59, 184, 0.9) 3px, rgba(142, 59, 184, 0.4) 3px, rgba(142, 59, 184, 0.4) 4px, transparent 4px, transparent 12px, rgba(142, 59, 184, 0.4) 12px, rgba(142, 59, 184, 0.4) 13px, rgba(142, 59, 184, 0.8) 13px, rgba(142, 59, 184, 0.8) 14px, rgba(142, 59, 184, 0.9) 14px, rgba(142, 59, 184, 0.9) 15px, rgba(142, 59, 184, 0.4) 15px, rgba(142, 59, 184, 0.4) 16px, transparent 16px), linear-gradient(90deg, rgba(142, 59, 184, 0.4), rgba(142, 59, 184, 0.4) 1px, rgba(142, 59, 184, 0.8) 1px, rgba(142, 59, 184, 0.8) 2px, rgba(142, 59, 184, 0.9) 2px, rgba(142, 59, 184, 0.9) 3px, rgba(142, 59, 184, 0.4) 3px, rgba(142, 59, 184, 0.4) 4px, transparent 4px), linear-gradient(90deg, rgba(142, 59, 184, 0.9), rgba(142, 59, 184, 0.9) 1px, #8e3bb8 1px, #8e3bb8 2px, #8e3bb8 2px, #8e3bb8 3px, rgba(142, 59, 184, 0.9) 3px, rgba(142, 59, 184, 0.9) 4px, transparent 4px), linear-gradient(90deg, rgba(142, 59, 184, 0.9), rgba(142, 59, 184, 0.9) 1px, #8e3bb8 1px, #8e3bb8 2px, #8e3bb8 2px, #8e3bb8 3px, rgba(142, 59, 184, 0.9) 3px, rgba(142, 59, 184, 0.9) 4px, transparent 4px), linear-gradient(90deg, rgba(142, 59, 184, 0.4), rgba(142, 59, 184, 0.4) 1px, rgba(142, 59, 184, 0.8) 1px, rgba(142, 59, 184, 0.8) 2px, rgba(142, 59, 184, 0.9) 2px, rgba(142, 59, 184, 0.9) 3px, rgba(142, 59, 184, 0.4) 3px, rgba(142, 59, 184, 0.4) 4px, transparent 4px);
  background-repeat: repeat-x;
}

button {
  cursor: pointer;
  font: inherit;
  border: none;
  padding: 0.4rem 1rem;
  background-color: rgba(142, 59, 184, 0.35);
  color: #8e3bb8;
  box-sizing: content-box;
  position: relative;
  border: 1px solid transparent;
  border-left: none;
  border-right: none;
}
button::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 0;
  background-color: #8e3bb8;
  transition: width 0.2s;
}
button::after {
  content: "";
  display: none;
  position: absolute;
  background: #8e3bb8;
  width: 100%;
  height: 2px;
  left: 0;
  bottom: -4px;
}
button:hover, button:focus {
  background-color: transparent;
  color: #f6f2fb;
  border-color: #8e3bb8;
}
button:hover::before, button:focus::before {
  width: 100%;
}

main {
  flex: 1;
}

.content_thingOnLeft {
  padding-left: 4rem;
  background-image: linear-gradient(90deg, rgba(142, 59, 184, 0.2), rgba(142, 59, 184, 0.2) 14px, transparent 14px, transparent 20px, rgba(142, 59, 184, 0.2) 20px, rgba(142, 59, 184, 0.2) 23px, transparent 23px);
  margin-bottom: 2rem;
}

.content {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

img {
  box-shadow: 3px 3px 0 rgba(142, 59, 184, 0.6);
}

img#main_logo {
  box-shadow: none;
  filter: none;
  animation: none;
  opacity: 0.6;
}

.animation_bg {
  position: relative;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: hidden;
  z-index: 1;
}

body > header,
body > main,
body > .pattern {
  position: relative;
  z-index: 1;
}

.sigil-field {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.sigil {
  --size: clamp(11rem, 24vw, 27rem);
  --turn: 360deg;
  --turn-mid: 126deg;
  --turn-late: 252deg;
  --drift-speed: 70s;
  --drift-delay: 0s;
  --pulse-speed: 10s;
  --pulse-delay: 0s;
  --sigil-low: 0.07;
  --sigil-high: 0.16;
  --glow-low: rgba(142, 59, 184, 0.12);
  --glow-high: rgba(142, 59, 184, 0.42);
  position: absolute;
  width: var(--size);
  height: auto;
  opacity: 0.075;
  box-shadow: none;
  animation: sigil-drift var(--drift-speed) linear var(--drift-delay) infinite,
             sigil-pulse var(--pulse-speed) ease-in-out var(--pulse-delay) infinite alternate;
  will-change: transform, opacity, filter;
}

.sigil--michael { --size: clamp(18rem, 36vw, 40rem); --drift-speed: 112s; --pulse-speed: 13s; top: -19%; left: -10%; }
.sigil--uriel { --turn: -360deg; --turn-mid: -126deg; --turn-late: -252deg; --drift-speed: 91s; --drift-delay: -37s; --pulse-speed: 9s; --pulse-delay: -4s; top: 7%; right: 5%; }
.sigil--gabriel { --size: clamp(9rem, 17vw, 19rem); --drift-speed: 73s; --drift-delay: -19s; --pulse-speed: 11s; --pulse-delay: -7s; top: 42%; left: 8%; }
.sigil--raphael { --turn: -360deg; --turn-mid: -126deg; --turn-late: -252deg; --size: clamp(16rem, 29vw, 32rem); --drift-speed: 127s; --drift-delay: -63s; --pulse-speed: 15s; --pulse-delay: -9s; right: -9%; bottom: -13%; }
.sigil--samael { --size: clamp(8rem, 14vw, 16rem); --drift-speed: 64s; --drift-delay: -48s; --pulse-speed: 8s; --pulse-delay: -3s; left: 44%; bottom: -7%; }
.sigil--zadkiel { --turn: -360deg; --turn-mid: -126deg; --turn-late: -252deg; --size: clamp(7rem, 11vw, 12rem); --drift-speed: 57s; --drift-delay: -8s; --pulse-speed: 12s; --pulse-delay: -10s; left: 36%; top: 12%; }
.sigil--thavael { --size: clamp(6rem, 9vw, 10rem); --drift-speed: 49s; --drift-delay: -29s; --pulse-speed: 10s; --pulse-delay: -6s; right: 27%; top: 48%; }

@keyframes sigil-drift {
  0% { transform: rotate(0deg) translate(0, 0); }
  35% { transform: rotate(var(--turn-mid)) translate(1.2rem, -0.8rem); }
  70% { transform: rotate(var(--turn-late)) translate(-0.8rem, 1rem); }
  100% { transform: rotate(var(--turn)) translate(0, 0); }
}

@keyframes sigil-pulse {
  from { opacity: var(--sigil-low); filter: drop-shadow(0 0 0.5rem var(--glow-low)); }
  to { opacity: var(--sigil-high); filter: drop-shadow(0 0 2.6rem var(--glow-high)); }
}

body.dark-mode .sigil { --sigil-low: 0.08; --sigil-high: 0.16; --glow-low: rgba(207, 166, 255, 0.16); --glow-high: rgba(207, 166, 255, 0.5); }

@media (max-width: 700px) {
  .sigil--zadkiel,
  .sigil--thavael { display: none; }
  .sigil--michael { top: -8%; left: -28%; }
  .sigil--uriel { top: 18%; right: -22%; }
  .sigil--gabriel { top: 54%; left: -15%; }
}

@media (prefers-reduced-motion: reduce) {
  .sigil { animation: none; }
  .sigil { opacity: 0.1; }
}
/* unvisited link */
a:link {
  color: #8e3bb8;
}

a.postLink {
  text-decoration: underline;
}

/* visited link */
a:visited {
  color: rgba(142, 59, 184, 0.2);
}

#wrap {
  float: left;
  position: relative;
  left: 50%;
}

#content {
  float: left;
  position: relative;
  left: -50%;
}

.post {
  overflow: scroll;
  scrollbar-color: #8e3bb8 transparent;
  scrollbar-width: thin;
  padding-right: 25px;
  text-align: justify;
  text-justify: auto;
  font-size: 1.5rem;
  max-width: 800px;
  margin: 0 auto;
}

.post p {
  text-indent: 25px;
  margin-bottom: 1.5em;
  line-height: 1.7;
}

ul li:hover {
  background-color: rgba(142, 59, 184, 0.35);
}

ul#archive {
  list-style: none;
}

table {
  border-collapse: collapse;
  font-weight: inherit;
}

td,
th {
  padding: 0.5rem;
}

th {
  font-weight: normal;
  text-align: left;
  border-bottom: 0.1rem solid rgba(142, 59, 184, 0.3);
}

hr {
  margin: 1rem 0;
  border-top: solid #8e3bb8;
  border-width: 0.1rem 0 0 0;
}

h2 {
  font-weight: lighter;
  border: solid #8e3bb8;
  border-width: 0.1rem 0;
  padding: 0.1rem 1rem;
}

h3,
h4,
h5,
h6 {
  font-weight: lighter;
  letter-spacing: 0.1rem;
}

figure {
  display: -ms-flexbox;
  display: box;
  display: flex;
  -o-box-orient: vertical;
  flex-direction: column;
  margin: 0;
  margin-bottom: 1rem;
  padding: 0.5rem;
}

figure > :not(figcaption) {
  margin: 0.5rem;
}

figure > figcaption {
  -o-box-ordinal-group: -1;
  order: -1;
  margin: -0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  background-color: #8e3bb8;
  color: #f6f2fb;
}

iframe {
  border: 0.1rem solid #f6f2fb;
}

blockquote {
  position: relative;
  padding: 2rem;
  text-align: justify;
  line-height: 1.5;
  font-family: "Noto Sans", sans-serif;
  font-weight: 300;
  font-size: 1.5rem;
  font-style: italic;
  margin: 0;
  display: flex;
  flex-direction: column;
  fallback: lower-alpha;
  border: solid rgba(177, 92, 205, 0.2);
}

cite {
  position: relative;
  padding-left: 2rem;
  font-style: normal;
}

cite:before {
  content: "";
  position: absolute;
  width: 0.7rem;
  height: 0.7rem;
  background-color: #b15ccd;
  margin-left: -1rem;
  top: 0.25em;
}

/* =========================
   DARK MODE
========================= */
body.dark-mode {
  background-color: #140f1a;
  color: #d6b3ff;
  background-image: linear-gradient(90deg, transparent, transparent 3px, rgba(255, 255, 255, 0.03) 4px), linear-gradient(transparent, transparent 3px, rgba(255, 255, 255, 0.05) 4px);
  box-shadow: inset 0 0 120px rgba(142, 59, 184, 0.25), inset 0 0 80px rgba(142, 59, 184, 0.15);
}

/* Keep purple identity but adjust readability */
body.dark-mode a:link {
  color: #cfa6ff;
}

body.dark-mode a:visited {
  color: rgba(207, 166, 255, 0.4);
}

body.dark-mode button {
  background-color: rgba(207, 166, 255, 0.2);
  color: #d6b3ff;
}

body.dark-mode button:hover,
body.dark-mode button:focus {
  color: #140f1a;
}

/* Slightly soften block elements */
body.dark-mode blockquote {
  border-color: rgba(207, 166, 255, 0.2);
}

body.dark-mode hr {
  border-top: solid #cfa6ff;
}

/* Optional: make scrollbars visible in dark */
body.dark-mode .post {
  scrollbar-color: #cfa6ff transparent;
}

/* =========================
   THEME TRANSITIONS
========================= */
body,
body * {
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.5s ease;
}