@import url('https://fonts.googleapis.com/css2?family=Andika:ital,wght@0,400;0,700;1,400;1,700&family=Lexend:wght@100..900&display=swap');

@font-face {
	font-family: 'Sci36X';
	src: url('/assets/sci36x.ttf') format('truetype');
}

@font-face {
  font-family: "sitelen seli kiwen asuki";
  src: /*url("https://www.kreativekorp.com/software/fonts/sitelenselikiwen/sitelenselikiwenasuki.ttf") format('truetype'),*/
       url("https://static.wikitide.net/sonaponawiki/b/b5/sitelenselikiwenasuki.woff2") format('woff2'),
       url("https://static.wikitide.net/sonaponawiki/2/24/sitelenselikiwenasuki.woff") format('woff');
}

@font-face {
  font-family: "sitelen seli kiwen mono asuki";
  src: url("https://static.wikitide.net/sonaponawiki/e/eb/sitelenselikiwenmonoasuki.woff2") format('woff2'),
       url("https://static.wikitide.net/sonaponawiki/a/a3/sitelenselikiwenmonoasuki.woff") format('woff');
}

@font-face {
  font-family: "Fairfax Pona HD";
  src: url("https://static.wikitide.net/sonaponawiki/1/12/FairfaxPonaHD.woff") format("woff");
}

* {
  box-sizing: border-box;
}

:root {
  --blue: #00bfff;
  --purple: #6040bf;
  --yellow: #ffff57;
  background-color: var(--purple);
  background-image: repeating-conic-gradient(#0000000f 0%, #ffffff0f 25%);
  background-attachment: local;
  background-position: top;
  background-size: 0.5em 0.5em;
  color: var(--yellow);
  font-family: Andika;
  font-size: 12pt;
  image-rendering: pixelated;
  scrollbar-color: var(--yellow) var(--purple);
}

#Winter, .Winter {
  --blue: white;
  --purple: #6040bf;
  --yellow: #00bfff;
}

#Lavender, .Lavender {
  --blue: #d4ccdb;
  --purple: #542a7e;
  --yellow: #aa8ec5;
}

#Zara, .Zara {
  --blue: #96c116;
  --purple: #70712e;
  --yellow: #d4d600;
}

body {
  margin: 0;
  padding: 0;
  position: relative;
}

section {
  margin: 2em 1em;
  position: relative;
  z-index: 1;
}

section *::selection {
  background: color-mix(in oklch, var(--purple), transparent 50%);
  color: var(--yellow);
}

article {
  background: var(--blue);
  background-image: repeating-linear-gradient(175deg, transparent 0 calc(1/3 * 100%), #ffffff1f calc(50% - 2px), transparent 50%),
    repeating-conic-gradient(transparent 0%, #ffffff1f 25%);
  background-attachment: fixed, local;
  background-position: top;
  background-size: cover, 0.5em 0.5em;
  background-blend-mode: color-dodge;
  /* border: 1em solid var(--yellow); */
  border-radius: 3em;
  box-shadow: 0 0.5em 1em color-mix(in oklch, var(--yellow), transparent 75%) inset,
    0 -0.5em 1em color-mix(in oklch, var(--purple), transparent 75%) inset,
    0 0.25em 0.5em #ffffff7f,
    0 -0.25em 0.5em #ff00001f;
  box-sizing: content-box;
  color: color-mix(in oklch, var(--blue), black 75%);
  margin: 5em auto;
  max-width: 72ch;
  /* outline: 2px solid var(--purple); */
  padding: 2em;
  position: relative;
}

article::before {
  content: ' ';
  position: absolute;
  top: -1em; left: -1em; right: -1em; bottom: -1em;
  z-index: -1;
  background-color: var(--yellow);
  background-image: repeating-linear-gradient(175deg, transparent 0 calc(1/3 * 100%), white calc(50% - 4px), transparent 50%),
    repeating-conic-gradient(#ff00000f 0%, #ffffff1f 25%);
  background-attachment: fixed, local;
  background-position: top;
  background-size: cover, 0.5em 0.5em;
  background-blend-mode: screen, hard-light;
  border-radius: 4em;
  box-shadow: 0 0.5em 1em color-mix(in oklch, black, transparent 75%),
    0 0.25em 0.5em #ffffff7f inset,
    0 -0.25em 0.5em #ff00003f inset;
  outline: 2px solid var(--purple);
}

p, blockquote, center, li {
  line-height: calc(100% * 4/3);
  margin: 1em 0;
}

ul {
  padding-inline-start: 2em;
}

blockquote {
  background: color-mix(in oklch, var(--yellow), var(--blue) 75%);
  border: 0.5em ridge var(--yellow);
  border-radius: 0.5em;
  box-shadow: 0.25em 0.25em 0.5em #0000007f;
  color: black;
  font-style:italic;
  margin: 1em;
  padding: 0.5em 1em;
  position: relative;
  text-shadow: 0 0 4px white;
}

blockquote::before, blockquote::after {
  border: 0.25em outset var(--yellow);
  border-radius: 0.25em;
  box-shadow: 0.125em 0.125em 0.25em #0000003f,
    0.25em 0.25em 0.5em color-mix(in oklch, var(--yellow), #0000003f 75%);
  content: ' ';
  height: 0; width: 0;
  position: absolute;
  top: 0.25em;
}

blockquote::before {
  left: 0.25em;
}

blockquote::after {
  right: 0.25em;
}

h1 {
  color: var(--purple);
  font-family: Lexend, sans-serif;
  font-size: 2em;
  font-weight: bold;
  margin: 0.25em 0 1em;
  text-align: center;
  text-shadow: 0 -2px 2px color-mix(in oklch, var(--yellow), transparent 75%),
    0 2px var(--blue),
    0 4px 4px color-mix(in oklch, var(--purple), transparent 75%),
    0 8px 8px color-mix(in oklch, var(--purple), transparent 87.5%);
}

h1 img {
  filter:
    drop-shadow(0 -2px 1px #ffff573f)
    drop-shadow(0 2px 0 #00bfff)
    drop-shadow(0 2px 2px #6040bf3f)
    drop-shadow(0 4px 4px #6040bf1f);
}

h1:has(+ :is([role="doc-subtitle"], .pronouns)) {
  margin-block-end: 0;
}

[role="doc-subtitle"], .pronouns {
  color: color-mix(in oklch, var(--purple), transparent 25%);
  font-family: Lexend, sans-serif;
  font-weight: bold;
  margin-block-end: 2em;
  text-align: center;
}

h2 {
  color: var(--purple);
  font-family: Lexend, sans-serif;
  font-size: 1.5em;
  font-weight: normal;
  margin: 1em 0 0;
}

a {
  border-bottom: 2px solid;
  color: inherit;
  display: inline-block;
  font-weight: bolder;
  margin-bottom: -2px;
  text-decoration: none;
}

a:is(:hover, :active) {
  background-color: color-mix(in oklch, var(--yellow), transparent 50%);
  border-radius: 2px;
  outline: 2px solid color-mix(in oklch, var(--yellow), transparent 50%);
}

article a {
  color: var(--purple);
  transition: transform 200ms cubic-bezier(0,2,.5,.5);
}

article a:is(:hover, :active) {
  background-image: linear-gradient(175deg, transparent 0, #ffffffbf 50%, transparent 50%);
  border: none;
  border-radius: 1em;
  box-shadow: 0 0.25em 0.5em color-mix(in oklch, var(--purple), transparent 25%),
    0 0.25em 0.5em color-mix(in oklch, white, transparent 25%) inset,
    0 -0.25em 0.5em color-mix(in oklch, var(--blue), transparent 25%) inset;
  margin: -0.5em;
  margin-bottom: calc(-2px + -0.5em);
  outline: 2px solid transparent;
  padding: 0.5em;
  text-shadow: 0 0 2px white,
    0 0 4px var(--yellow);
  transform: scale(1.2);
  transition: transform 1s cubic-bezier(0,.5,.5,1),
    margin-block 200ms cubic-bezier(0,4,.5,0),
    margin-inline 200ms cubic-bezier(0,2,.5,2),
    padding-block 200ms cubic-bezier(0,4,.5,0),
    padding-inline 200ms cubic-bezier(0,2,.5,2);
  z-index: 99;
}

article a:active {
  background-image: linear-gradient(355deg, transparent 0, #ffffff3f 50%, transparent 50%);
  box-shadow: 0 2px 0.5em 2px var(--purple),
    0 0 0.5em color-mix(in oklch, var(--purple), transparent 75%) inset,
    0 -0.125em 0.25em color-mix(in oklch, white, transparent 75%) inset,
    0 0.125em 0.25em color-mix(in oklch, var(--blue), transparent 75%) inset;
  outline: 2px solid color-mix(in oklch, var(--yellow), transparent 50%);
  text-shadow: 0 0 2px var(--blue);
  transform: scale(1);
  transition: transform 100ms cubic-bezier(0,4,.5,0);
}

html {
  cursor: url('/assets/cursor pointer.png'), pointer;
}

a, input, label {
  cursor: url('/assets/cursor grab.png'), grab;
}

html:active, a:active, input:active, label:active {
  cursor: url('/assets/cursor grabbing.png'), grabbing;
}

.emoticon {
  display: inline-block;
  transform: rotate(0.25turn)
}

[lang] {
  font-style: italic;
}

[lang|="tok-sp"] {
  font-family: "sitelen seli kiwen mono asuki", "sitelen seli kiwen asuki", "sitelen seli kiwen", "Fairfax Pona HD", "Fairfax HD";
  font-size: 1.5em;
  font-style: normal;
  vertical-align: middle;
}

.construction {
  background: linear-gradient(to bottom, transparent 0 calc(25% - 2px), #ffbf00 calc(25% - 2px) calc(75% + 2px), transparent calc(75% + 2px) 100%), repeating-linear-gradient(0.375turn, #ffbf00 0 0.5em, black 0.5em 1em);
  box-shadow: inset 0 0.25em 1em #ffffff7f, 0 1px 2px color-mix(in oklch, var(--purple), transparent 75%);
  color: black;
  font-weight: bold;
  height: 2em;
  left: 0.5em;
  margin: 0 auto;
  max-width: 36ch;
  opacity: 0.875;
  padding: 0.125em;
  position: absolute;
  right: 0.5em;
  text-align: center;
  top: -0.5em;
  transform: rotate(-6deg);
  z-index: 1;
}

kbd {
  font-family: inherit;
}

article kbd {
  background: color-mix(in oklch, var(--yellow), transparent 87.5%);
  border: 1px solid color-mix(in oklch, var(--purple), transparent 50%);
  border-radius: 0.5em;
  box-shadow: 0 1px var(--blue),
    0 2px 2px color-mix(in oklch, var(--purple), transparent 50%),
    0 1px 2px color-mix(in oklch, var(--yellow), transparent 50%) inset;
  display: inline-block;
  font-size: smaller;
  margin-inline: -1px;
  padding: 2px;
  text-align: center;
  text-shadow: 0 1px 2px #ffffff7f;
  min-width: 2em;
  max-width: auto;
}

iframe {
  border: 0 none transparent;
  display: block !important;
  height: 0;
  margin: 0;
  margin-block-end: -4em;
  padding: 0;
  width: 100%;
}

iframe[src="header"] {
  min-height: 118px;
  transition: height 200ms cubic-bezier(0,1,0,1) /* 500ms cubic-bezier(1,-0.5,0,1.5) */;
}

header {
  /* padding-block: 2em; */
}

.home {
  background-image: linear-gradient(to right, transparent 25%, #ffffff7f 50%, transparent 75%);
  background-position: 0 0;
  background-size: 400% 100%;
  border-bottom-style: none;
  font-family: Lexend, sans-serif;
  padding: 2em;
  position: relative;
  transform-origin: bottom right;
  transition: transform 200ms cubic-bezier(.5,2,.5,.5);
}

.home:is(:hover, :active) {
  background-position: 100% 0;
  font-style: italic;
  transform: skewX(15deg);
  transition: background-position 200ms cubic-bezier(.5,0,1,1),
    transform 500ms cubic-bezier(0,2,.5,1);
}

iframe + section {
  padding-block-start: 0;
}

footer {
  padding-block-end: 2em;
  position: relative;
}

footer hr {
  background: linear-gradient(to bottom, color-mix(in oklch, var(--blue), transparent 75%), transparent, color-mix(in oklch, var(--purple), transparent 75%)), repeating-linear-gradient(90deg, var(--blue) 0 calc(100vw/7), var(--purple) calc(100vw/7) calc(200vw/7));
  border: 0 none transparent;
  box-shadow: inset 0 4px 2px color-mix(in oklch, var(--yellow), transparent calc(100% * 11 / 12));
  height: 4em;
  margin-block-end: 2em;
  top: 0;
  width: 100%;
}

@keyframes marquee {
  0% {
    left: 100%;
    right: 0;
  }
  100% {
    left: 0;
    right: 100%;
  }
}

/*
.marquee-container {
  overflow: hidden;
  position: relative;
}

.marquee-container::before {
  content: '\00a0';
}

.marquee-content {
  animation: marquee 10s linear infinite;
  display: block;
  position: absolute;
  top: 0;
  white-space: nowrap;
  width: max-content;
}
*/

.energy-type {
  border: 1px solid var(--blue);
  border-radius: 50%;
  box-shadow: 0 -1px 1px color-mix(in oklch, var(--yellow), transparent 75%),
    0 2px 2px color-mix(in oklch, var(--purple), transparent 87.5%),
    0 2px 4px color-mix(in oklch, var(--purple), transparent 87.5%);
  box-sizing: content-box;
  height: 2em;
  image-rendering: initial;
  margin: -1px;
  position: absolute;
  top: 2em;
  right: 2em;
  width: 2em;
}

.age-18-plus {
  background: #0000007f;
  color: #8e8e8e;
  border: 2px solid currentColor;
  border-radius: 1em;
  box-shadow: 0 2px 0.5em 2px currentColor;
  display: inline-block;
  font-family: Lexend, sans-serif;
  font-weight: bold;
  outline: 4px solid #0000007f;
  padding-inline: 0.5em;
  transition: border-color, box-shadow, color, transform;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0,4,0,0);
}

.age-18-plus::after {
  content: "18+"; 
}

[type="checkbox"]#age-18-plus:not(:checked) + .age-18-plus:hover {
  color: #cd6987;
}

[type="checkbox"]#age-18-plus + .age-18-plus:active {
  box-shadow: 0 0 0.5em 2px currentColor;
  transform: translateY(2px);
}

[type="checkbox"]#age-18-plus:checked + .age-18-plus {
  background: black;
  color: #ff0080;
  outline-color: black;
}

[role="doc-subtitle"]:has([type="checkbox"]#age-18-plus:not(:checked)) {
  margin-block-end: 0.5em;
}

[type="checkbox"]#age-18-plus,
[role="doc-subtitle"]:has([type="checkbox"]#age-18-plus:not(:checked)) ~ * {
  display: none;
}

article:has([type="checkbox"]#age-18-plus:checked) {
  --blue: black;
  --purple: #ff0080;
  --yellow: #ff0080;
  background-blend-mode: normal;
  color: color-mix(in oklch, var(--yellow), white 75%);
  outline-color: var(--blue);
  transition: background, border-color, color, outline-color;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(.5,0,.5,1);
}

article:has([type="checkbox"]#age-18-plus:checked) :is(h1, h2, h3 /* , a */) {
  transition: color, text-shadow;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(.5,0,.5,1);
}