/* pretty.css for kire by kire yayy */

/* ----- the basics ----- */

body {
  font-family: system-ui, sans-serif;
  color: #767676;
  background: #ffffff;
  margin: 0;
  padding: 3rem;
  line-height: 1.7;
}

/* ----- words ----- */

h1 {
  font-size: 1.5rem;
  margin: 0 0 1.5rem;
}

h2 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 1.5rem;
}

p {
  margin: 0 0 1.5rem;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ----- links ----- */

a {
  color: inherit;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.15em;
}

a:focus-visible {
  outline: 3px solid #000000;
  outline-offset: 3px;
}

/* ----- rainbow gradient on hover, same palette as sparkle.js ----- */

a:hover,
a:focus-visible {
  background-image: linear-gradient(
    90deg,
    #bd93f9,
    #ff79c6,
    #8be9fd,
    #50fa7b,
    #ffb86c,
    #f1fa8c,
    #bd93f9
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

[data-theme="neon"] a:hover,
[data-theme="neon"] a:focus-visible {
  background-image: linear-gradient(
    90deg,
    #00f0ff,
    #ff79c6,
    #bd93f9,
    #50fa7b,
    #00f0ff
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
}

/* ----- layout ----- */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

/* me in ink. everything else in pencil. */
.about {
  color: #000000;
  max-width: 900px;
  min-width: 0;
}

.about-bottom {
  margin-top: 2.5rem;
}

/* ----- tools list bullet ----- */

[aria-label="tools"] li {
  position: relative;
  padding-left: 1.2em;
}

[aria-label="tools"] li::before {
  content: "*";
  position: absolute;
  left: 0;
}

[aria-label="tools"] li:nth-child(6n + 1)::before {
  color: #bd93f9;
}

[aria-label="tools"] li:nth-child(6n + 2)::before {
  color: #ff79c6;
}

[aria-label="tools"] li:nth-child(6n + 3)::before {
  color: #8be9fd;
}

[aria-label="tools"] li:nth-child(6n + 4)::before {
  color: #50fa7b;
}

[aria-label="tools"] li:nth-child(6n + 5)::before {
  color: #ffb86c;
}

[aria-label="tools"] li:nth-child(6n + 6)::before {
  color: #f1fa8c;
}

/* ----- big screens ----- */

@media (min-width: 800px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }

  .loved {
    text-align: right;
  }

  /* pin my name to the top corner, socials to the bottom */
  .about {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: calc(100vh - 6rem);
  }
}

/* ----- secret rainbow highlights ----- */

h1::selection,
h2::selection {
  background: #f6c1d9;
}

p::selection {
  background: #f9e2af;
}

li:nth-child(4n + 1)::selection,
li:nth-child(4n + 1) a::selection {
  background: #c9b1f4;
}

li:nth-child(4n + 2)::selection,
li:nth-child(4n + 2) a::selection {
  background: #aee6d8;
}

li:nth-child(4n + 3)::selection,
li:nth-child(4n + 3) a::selection {
  background: #b8dcf7;
}

li:nth-child(4n + 4)::selection,
li:nth-child(4n + 4) a::selection {
  background: #fbd1b7;
}

/* ----- mobile ----- */

.peek {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 1.5rem;
  text-decoration: none;
}

@media (max-width: 799px) {
  .about {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: calc(100vh - 6rem);
    min-height: calc(100dvh - 6rem);
  }
}

@media (min-width: 800px) {
  .peek {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ----- jack in aka neuromancer mode ----- */

.jack {
  position: fixed;
  bottom: 3rem;
  right: 3rem;
  font: inherit;
  font-size: 0.8rem;
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
}

@media (max-width: 799px) {
  .jack {
    bottom: auto;
    top: 1rem;
    right: 1rem;
  }
}

/* ----- moving rainbow on hover, same palette as sparkle.js ----- */

.jack:hover {
  border-color: transparent;
  color: #000000;
  background-image: linear-gradient(
    90deg,
    #bd93f9,
    #ff79c6,
    #8be9fd,
    #50fa7b,
    #ffb86c,
    #f1fa8c,
    #bd93f9
  );
  background-size: 200% 100%;
}

@media (prefers-reduced-motion: no-preference) {
  a:hover,
  a:focus-visible,
  .jack:hover {
    animation: rainbow-shift 3s linear infinite;
  }
}

@keyframes rainbow-shift {
  to {
    background-position: 200% 0;
  }
}

[data-theme="neon"] .jack:hover {
  border-color: transparent;
  color: #0a0a12;
  background-image: linear-gradient(
    90deg,
    #00f0ff,
    #ff79c6,
    #bd93f9,
    #50fa7b,
    #00f0ff
  );
  background-size: 200% 100%;
}

/* ----- tools bullet, neon flavor ----- */

[data-theme="neon"] [aria-label="tools"] li:nth-child(4n + 1)::before {
  color: #00f0ff;
}

[data-theme="neon"] [aria-label="tools"] li:nth-child(4n + 2)::before {
  color: #ff79c6;
}

[data-theme="neon"] [aria-label="tools"] li:nth-child(4n + 3)::before {
  color: #bd93f9;
}

[data-theme="neon"] [aria-label="tools"] li:nth-child(4n + 4)::before {
  color: #50fa7b;
}

[data-theme="neon"] body {
  background: #0a0a12;
  color: #7a8fa6;
}

[data-theme="neon"] .about {
  color: #00f0ff; /* console cyan */
}

[data-theme="neon"] h1,
[data-theme="neon"] h2 {
  text-shadow: 0 0 8px currentColor; /* the glow */
}

[data-theme="neon"] a {
  color: #ff79c6; /* neon magenta */
  text-shadow: 0 0 6px currentColor;
}

[data-theme="neon"] a:focus-visible {
  outline-color: #00f0ff;
}

[data-theme="neon"] ::selection {
  background: #ff79c6;
  color: #0a0a12;
}

/* ----- le deck ----- */

[data-theme="neon"] body {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

[data-theme="neon"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 998;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.03) 0 1px,
    transparent 1px 3px
  );
}

[data-theme="neon"] h1::after {
  content: "\258E";
  margin-left: 0.2em;
}

@media (prefers-reduced-motion: no-preference) {
  [data-theme="neon"] h1::after {
    animation: blink 1.2s steps(1) infinite;
  }

  @keyframes blink {
    50% {
      opacity: 0;
    }
  }
}

/* ----- boot screen ----- */

.boot {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: #0a0a12;
  color: #00f0ff;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  padding: 3rem;
  white-space: pre-line;
  line-height: 2;
}