/*
Theme Name: SaiMorphX Retro
Description: Responsive cleanup of the SaiMorphX retro design.
Version: 1.2.1
Text Domain: saimorphx
*/
@font-face {
  font-family:Nunito;
  src:url('https://saimorphx.com/fonts/Nunito-Regular.ttf') format('truetype');
  font-display:swap;
}
@font-face {
  font-family:Nunito;
  src:url('https://saimorphx.com/fonts/Nunito-Bold.ttf') format('truetype');
  font-weight:700;
  font-display:swap;
}
@font-face {
  font-family:Atarian;
  src:url('https://saimorphx.com/fonts/Atarian/SF%20Atarian%20System%20Extended%20Bold.ttf') format('truetype');
  font-weight:700;
  font-display:swap;
}
@font-face {
  font-family:Cyber;
  src:url('https://saimorphx.com/assets/fonts/Blender-Pro-Bold.otf') format('opentype');
  font-display:swap;
}
:root {
  --pink:#ed64f5;
  --yellow:#fff700;
  --purple:#43256e;
  --dark:#241445;
  --ink:#13092d;
}
* {
  box-sizing:border-box;
}
html {
  min-width:320px;
}
body {
  margin:0;
  background:#08031a url('https://saimorphx.com/images/tiles/purplesky.gif') repeat;
  background-size:65px auto;
  color:#fff;
  font:16px Nunito,Arial,sans-serif;
}
#container {
  width:min(100%,900px);
  margin:auto;
}
#header {
  height:500px;
  position:relative;
  background:#5e4e8c url('https://saimorphx.com/images/layouts/wp_900_clean.jpg') center top/cover no-repeat;
  text-align:center;
  overflow:hidden;
}
.hero {
  padding-top:25px;
  font:700 clamp(3rem,9vw,6.25rem)/1 Atarian,sans-serif;
  letter-spacing:.06em;
  color:var(--yellow);
  text-shadow:0 2px 5px #270544;
}
.herotitle {
  display:block;
}
#xenomorph-container {
  --mascot-width:110px;
  position:absolute;
  left:calc(50% - var(--mascot-width)/2);
  top:200px;
  width:var(--mascot-width);
  height:200px;
  z-index:9;
  user-select:none;
}
#xenomorph-movable {
  width:100%;
  height:100%;
  touch-action:none;
  background:url('https://saimorphx.com/images/xenomorph/xenomorph_chibi.png') center top/100% auto no-repeat;
  cursor:grab;
}
#xenomorph-movable:active,#xenomorph-movable.is-dragging {
  cursor:grabbing;
}
/* Same cut-corner button and glitch treatment as the original site. */
#navbar {
  background:var(--yellow);
  padding:0 20px 4px;
}
#navbar ul {
  display:flex;
  gap:20px;
  list-style:none;
  margin:0;
  padding:0;
}
#navbar li {
  flex:1;
  min-width:0;
}
#navbar a {
  --primary-hue:274;
  --primary-lightness:50;
  --primary:hsl(var(--primary-hue) 85% calc(var(--primary-lightness)*1%));
  --shadow-primary:#00d8e2;
  --shadow-secondary:var(--yellow);
  --shimmy-distance:6;
  display:block;
  position:relative;
  padding:7px 5px;
  text-align:center;
  background:var(--primary);
  color:white;
  text-decoration:none;
  text-transform:uppercase;
  font:700 clamp(.8rem,1.8vw,1.2rem) Cyber,Arial,sans-serif;
  white-space:nowrap;
  box-shadow:inset -5px 0 var(--shadow-primary);
  clip-path:polygon(-10% -10%,110% -10%,110% 110%,10% 110%,-10% 40%);
  transition:background-color .2s ease-out;
}
#navbar a::after {
  content:attr(data-subtext);
  position:absolute;
  right:5%;
  bottom:-.2rem;
  background:var(--yellow);
  color:#0d0d0d;
  padding:0 .2rem;
  font-size:.65rem;
  z-index:3;
}
.cybr-btn__text {
  display:block;
  position:relative;
  z-index:2;
}
.cybr-btn__text::after {
  content:attr(data-text);
  display:none;
  position:absolute;
  inset:0;
  text-shadow:2px 2px var(--shadow-primary),-2px -2px var(--shadow-secondary);
}
.cybr-btn__glitch {
  position:absolute;
  inset:0;
  pointer-events:none;
  filter:drop-shadow(-2px 2px var(--shadow-primary));
}
.cybr-btn__glitch::after {
  content:attr(data-text);
  display:none;
  position:absolute;
  inset:1%;
  background:var(--primary);
  text-shadow:2px 2px var(--shadow-primary),-2px -2px var(--shadow-secondary);
}
#navbar a:is(:hover,:focus-visible) {
  --primary-lightness:40;
}
#navbar a:is(:hover,:focus-visible) .cybr-btn__text::after,#navbar a:is(:hover,:focus-visible) .cybr-btn__glitch::after {
  display:block;
  animation:shimmy-text 2s ease-in-out infinite alternate;
}
#navbar a:is(:hover,:focus-visible) .cybr-btn__text {
  animation:glitch 1s linear infinite;
}
#navbar li:focus-within {
  outline:3px solid white;
  outline-offset:2px;
}
a:focus-visible,button:focus-visible {
  outline:3px solid var(--yellow);
  outline-offset:2px;
}
#flex {
  display:flex;
  align-items:stretch;
}
#leftSidebar {
  width:200px;
  flex:none;
  background:var(--dark);
  padding:20px;
  font-size:.85rem;
  overflow-wrap:break-word;
}
#leftSidebar h2,#leftSidebar h3 {
  font-size:1rem;
  margin:.25rem 0;
}
#leftSidebar ul {
  padding-left:1rem;
  margin:.2rem 0;
}
.box {
  background:var(--ink);
  border:1px solid var(--pink);
  padding:10px;
  color:var(--yellow);
}
.box p {
  margin:0;
}
#main-content {
  background:var(--purple);
  flex:1;
  min-width:0;
  min-height:585px;
  padding:20px;
  overflow-wrap:anywhere;
}
h1,h2,h3,strong {
  color:var(--pink);
}
h1 {
  font-size:1.6rem;
}
a {
  color:var(--pink);
}
pre {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
#footer {
  background:var(--ink);
  text-align:center;
  padding:.5rem;
  font:700 clamp(1rem,3vw,1.6rem) Atarian,Arial,sans-serif;
}
#footer p {
  margin:0;
}
.smxhelp {
  border:0;
  padding:0;
  background:none;
  color:inherit;
  font:inherit;
  cursor:help;
}
@media(max-width:700px) {
  #header {
    height:clamp(220px,56vw,500px);
    background-size:cover;
  }
  .hero {
    font-size:clamp(2.4rem,10vw,5rem);
  }
  #xenomorph-container {
    --mascot-width:77px;
    top:40%;
    height:140px;
  }
  #navbar ul {
    flex-wrap:wrap;
  }
  #navbar li {
    flex:1 1 calc((100% - 40px)/3);
  }
  #navbar a {
    font-size:clamp(.8rem,3vw,1rem);
  }
  #flex {
    flex-direction:column;
  }
  #main-content {
    min-height:300px;
    order:1;
  }
  #leftSidebar {
    width:100%;
    order:2;
  }
  #leftSidebar ul {
    overflow-wrap:normal;
  }
}
@media(max-width:400px) {
  #navbar li {
    flex-basis:calc((100% - 20px)/2);
  }
}
@keyframes shimmy-text {
  0% {
    clip-path: inset(2% 0px 95%);
  }
  2%, 8% {
    clip-path: inset(78% 0px 0px);
    transform: translate(calc(var(--shimmy-distance) * -1%),0) skew(0);
  }
  6% {
    clip-path: inset(78% 0px 0px);
    transform: translate(calc(var(--shimmy-distance) * 1%),0) skew(6deg);
  }
  9% {
    clip-path: inset(78% 0px 0px);
    transform: translate(0px, 0px) skew(0deg);
  }
  10% {
    clip-path: inset(44% 0px 46%);
    transform: translate(calc(var(--shimmy-distance) * 1%),0) skew(0);
  }
  13% {
    clip-path: inset(44% 0px 46%);
    transform: translate(0px, 0px) skew(0deg);
  }
  14%, 21% {
    clip-path: inset(0px 0px 100%);
    transform: translate(calc(var(--shimmy-distance) * 1%),0) skew(0);
  }
  15%, 20% {
    clip-path: inset(40% 0px 60%);
    transform: translate(calc(var(--shimmy-distance) * 1%),0) skew(5deg);
  }
  25% {
    clip-path: inset(40% 0px 15%);
    transform: translate(calc(var(--shimmy-distance) * 1%),0) skew(0);
  }
  30% {
    clip-path: inset(40% 0px 15%);
    transform: translate(calc(var(--shimmy-distance) * -1%),0) skew(0);
  }
  35%, 45% {
    clip-path: inset(63% 0px 20%);
    transform: translate(calc(var(--shimmy-distance) * -1%)) skew(6deg);
  }
  40% {
    clip-path: inset(63% 0px 20%);
    transform: translate(calc(var(--shimmy-distance) * 1%)) skew(0);
  }
  50% {
    clip-path: inset(63% 0px 20%);
    transform: translate(0px, 0px) skew(6deg);
  }
  55% {
    clip-path: inset(0px 0px 90%);
    transform: translate(calc(var(--shimmy-distance) * 1%),0) skew(5deg);
  }
  60% {
    clip-path: inset(0px 0px 90%);
    transform: translate(0px, 0px) skew(-13deg);
  }
  100%, 31%, 61% {
    clip-path: inset(0px 0px 100%);
    transform: translate(-22px, 5px) skew(21deg);
  }
}
@keyframes glitch {
  2%, 64% {
    transform: translate(2px, 0px) skew(0deg);
    clip-path: polygon(0px 0px, 100% 0px, 100% 33%, 0px 33%);
  }
  4%, 60% {
    transform: translate(-2px, 0px) skew(0deg);
  }
  62% {
    transform: translate(0px, 0px) skew(5deg);
    clip-path: polygon(0px 67%, 100% 67%, 100% 100%, 0px 100%);
  }
}
@media(prefers-reduced-motion:reduce) {
  #navbar a .cybr-btn__text,#navbar a .cybr-btn__text::after,#navbar a .cybr-btn__glitch::after {
    animation:none!important;
  }
  #navbar a .cybr-btn__text::after,#navbar a .cybr-btn__glitch::after {
    display:none!important;
  }
}

/* Original SaiMorphX title: Japanese glitch layers and original keyframes.
   Scope everything to the title so the menu animations stay independent. */
.hero.layers {
  display: inline-block;
  padding-top: 0;
  margin-top: 25px;
  z-index: 2;
  letter-spacing: clamp(2px, 1vw, 10px);
  filter: drop-shadow(0 1px 3px);
}
.hero.layers::before,
.hero.layers::after {
  pointer-events: none;
}
.hero.layers {
  position: relative
}
.hero.layers::after,
.hero.layers::before {
  content: attr(data-text);
  position: absolute;
  width: 110%;
  z-index: -1
}
.hero.layers::before {
  top: 10px;
  left: 15px;
  color: #e0287d
}
.hero.layers::after {
  top: 5px;
  left: -10px;
  color: #1bc7fb
}
@keyframes smx-title-paths {
  0% {
    clip-path: polygon(0% 43%,83% 43%,83% 22%,23% 22%,23% 24%,91% 24%,91% 26%,18% 26%,18% 83%,29% 83%,29% 17%,41% 17%,41% 39%,18% 39%,18% 82%,54% 82%,54% 88%,19% 88%,19% 4%,39% 4%,39% 14%,76% 14%,76% 52%,23% 52%,23% 35%,19% 35%,19% 8%,36% 8%,36% 31%,73% 31%,73% 16%,1% 16%,1% 56%,50% 56%,50% 8%)
  }
  5% {
    clip-path: polygon(0% 29%,44% 29%,44% 83%,94% 83%,94% 56%,11% 56%,11% 64%,94% 64%,94% 70%,88% 70%,88% 32%,18% 32%,18% 96%,10% 96%,10% 62%,9% 62%,9% 84%,68% 84%,68% 50%,52% 50%,52% 55%,35% 55%,35% 87%,25% 87%,25% 39%,15% 39%,15% 88%,52% 88%)
  }
  30% {
    clip-path: polygon(0% 53%,93% 53%,93% 62%,68% 62%,68% 37%,97% 37%,97% 89%,13% 89%,13% 45%,51% 45%,51% 88%,17% 88%,17% 54%,81% 54%,81% 75%,79% 75%,79% 76%,38% 76%,38% 28%,61% 28%,61% 12%,55% 12%,55% 62%,68% 62%,68% 51%,0% 51%,0% 92%,63% 92%,63% 4%,65% 4%)
  }
  45% {
    clip-path: polygon(0% 33%,2% 33%,2% 69%,58% 69%,58% 94%,55% 94%,55% 25%,33% 25%,33% 85%,16% 85%,16% 19%,5% 19%,5% 20%,79% 20%,79% 96%,93% 96%,93% 50%,5% 50%,5% 74%,55% 74%,55% 57%,96% 57%,96% 59%,87% 59%,87% 65%,82% 65%,82% 39%,63% 39%,63% 92%,4% 92%,4% 36%,24% 36%,24% 70%,1% 70%,1% 43%,15% 43%,15% 28%,23% 28%,23% 71%,90% 71%,90% 86%,97% 86%,97% 1%,60% 1%,60% 67%,71% 67%,71% 91%,17% 91%,17% 14%,39% 14%,39% 30%,58% 30%,58% 11%,52% 11%,52% 83%,68% 83%)
  }
  76% {
    clip-path: polygon(0% 26%,15% 26%,15% 73%,72% 73%,72% 70%,77% 70%,77% 75%,8% 75%,8% 42%,4% 42%,4% 61%,17% 61%,17% 12%,26% 12%,26% 63%,73% 63%,73% 43%,90% 43%,90% 67%,50% 67%,50% 41%,42% 41%,42% 46%,50% 46%,50% 84%,96% 84%,96% 78%,49% 78%,49% 25%,63% 25%,63% 14%)
  }
  90% {
    clip-path: polygon(0% 41%,13% 41%,13% 6%,87% 6%,87% 93%,10% 93%,10% 13%,89% 13%,89% 6%,3% 6%,3% 8%,16% 8%,16% 79%,0% 79%,0% 99%,92% 99%,92% 90%,5% 90%,5% 60%,0% 60%,0% 48%,89% 48%,89% 13%,80% 13%,80% 43%,95% 43%,95% 19%,80% 19%,80% 85%,38% 85%,38% 62%)
  }
  1%,
  33%,
  47%,
  7%,
  78%,
  93% {
    clip-path: none
  }
}
@keyframes smx-title-movement {
  0% {
    top: 0;
    left: -20px
  }
  15% {
    top: 10px;
    left: 10px
  }
  30% {
    top: 10px;
    left: -15px
  }
  60% {
    top: 5px;
    left: -10px
  }
  75% {
    top: -5px;
    left: 20px
  }
  100% {
    top: 10px;
    left: 5px
  }
}
@keyframes smx-title-opacity {
  0% {
    opacity: .1
  }
  5% {
    opacity: .7
  }
  30% {
    opacity: .4
  }
  45% {
    opacity: .6
  }
  76% {
    opacity: .4
  }
  90% {
    opacity: .8
  }
  1%,
  33%,
  47%,
  7%,
  78%,
  93% {
    opacity: 0
  }
}
@keyframes smx-title-font {
  0% {
    font-weight: 100;
    color: #e0287d;
    filter: blur(3px)
  }
  20% {
    font-weight: 500;
    color: #fff;
    filter: blur(0)
  }
  50% {
    font-weight: 300;
    color: #1bc7fb;
    filter: blur(2px)
  }
  60% {
    font-weight: 700;
    color: #fff;
    filter: blur(0)
  }
  90% {
    font-weight: 500;
    color: #e0287d;
    filter: blur(6px)
  }
}
.hero.glitch span {
  animation: smx-title-paths 5s step-end infinite
}
.hero.glitch::before {
  animation: smx-title-paths 5s step-end infinite,smx-title-opacity 5s step-end infinite,smx-title-font 8s step-end infinite,smx-title-movement 10s step-end infinite
}
.hero.glitch::after {
  animation: smx-title-paths 5s step-end infinite,smx-title-opacity 5s step-end infinite,smx-title-font 7s step-end infinite,smx-title-movement 8s step-end infinite
}
@media (prefers-reduced-motion: reduce) {
  .hero.glitch .herotitle,
  .hero.glitch::before,
  .hero.glitch::after {
    animation: none;
  }
  .hero.glitch::before,
  .hero.glitch::after {
    display: none;
  }
}
/* Blog list, single-post navigation and sidebar page list. */
.screen-reader-text {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
#main-content article + article {
  border-top:1px solid var(--pink);
  margin-top:1rem;
  padding-top:.5rem;
}
.post-meta {
  font-size:.8rem;
  opacity:.8;
  margin:.2rem 0 .6rem;
}
.nav-links {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1rem;
  justify-content:space-between;
  margin-top:1.5rem;
}
.pagination .nav-links {
  justify-content:center;
}
#leftSidebar .current_page_item > a {
  color:var(--yellow);
}