@keyframes fire-diag {
  0% {
    background-position-x: 0em;
  }
  100% {
    background-position-x: -4.4em;
  }
}

@keyframes bubblebubble1 {
  0% {
    border-radius: 7em 7em 7em 7em;
  }
  /* 25% {
		border-radius: 6.5em 5.5em 6.5em 7.5em;
	} */
  50% {
    border-radius: 6em 6em 6em 6em;
  }
  /* 50% {
		border-radius: 5.5em 7.5em 6.5em 5.5em;
	} */
}

@keyframes wobble {
  0%,
  100% {
    transform: translateX(0%);
    transform-origin: 50% 50%;
  }

  15% {
    transform: translateX(10%) rotate(-6deg);
  }

  30% {
    transform: translateX(5%) rotate(6deg);
  }

  45% {
    transform: translateX(5%) rotate(-3.6deg);
  }

  60% {
    transform: translateX(3%) rotate(2.4deg);
  }

  75% {
    transform: translateX(-2%) rotate(-1.2deg);
  }
}

/* ROOT */

:root {
  --highlight-color: #dc3400;
  --container-width: 61.7em;
  --link-gradient: linear-gradient(
    -90deg,
    #ee7752 0%,
    #e73c7e 10%,
    #23a6d5 30%,
    #23d5ab 50%,
    #23a6d5 70%,
    #e73c7e 90%,
    #ee7752 100%
  );
}

@font-face {
  font-family: "Cutive Mono";
  font-display: swap;
  src: url("cutivemono.ttf");
}

@font-face {
  font-family: "Open Sans";
  font-display: swap;
  src: url("OpenSans-Light.ttf");
}

/* BASE */

dl {
  font-size: 1.15em;
  font-family: "Open Sans", "Courier New", monospace;
}

p {
  margin: 0;
  font-size: 1.15em;
  font-family: "Open Sans", "Courier New", monospace;
}

a {
  text-decoration: none;
  color: white;
}

::selection {
  background-color: var(--highlight-color);
  color: white;
}

h1 {
  margin: 0;
  font-size: 5.5em;
  font-weight: normal;
}

h2 {
  margin: 0;
  font-size: 3.2em;
  font-weight: normal;
}

.glyph {
  user-select: none;
}

/* HOVER SHIT */

@keyframes gradient {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 400% 0%;
  }
}

a:hover {
  background: var(--link-gradient);
  background-size: 800% 800%;
  animation: gradient 12s linear infinite alternate;
  color: rgb(255, 255, 255);
  cursor: url("images/horns.png"), pointer;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
}

h2 a:hover {
  border-radius: 0.1em 0.8em 0.1em 0.4em;
  background-size: 400% 400%;
  animation: gradient 9s linear infinite alternate;
}

nav a:hover .glyph {
  background: var(--link-gradient);
  background-size: 200% 200%;
  animation: gradient 3s linear infinite alternate;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  rotate: 180deg;
}

nav a:hover span {
  border-radius: 0.1em 0.6em 0.1em 0.5em;
  background: var(--link-gradient);
  background-size: 800% 800%;
  animation: gradient 10s linear infinite alternate;
}

main section#projects a.container:hover {
  background-size: 2000% 2000%;
  animation: gradient 40s linear infinite alternate;
  border-radius: 3em;
}

/* BODY */

body {
  font-size: 16px;
  color: black;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-image: url("images/stripesbkg100.png");
}

body > .container {
  position: relative;
  transition: all;
  transition-duration: 0.5s;
  margin: auto;
  margin-top: 1.7em;
  margin-bottom: 1.6em;
  padding: 0;
  font-family: "Cutive Mono", "Courier New", monospace;
  max-width: var(--container-width);
  border-radius: 5em 9.5em 3em 3em;
  box-shadow: -20px 5px 55px rgb(50, 60, 63), 20px -20px 70px rgb(50, 60, 63);
  background-color: #001a237a;
  filter: saturate(1.2);
}

header {
  width: 100%;
  display: grid;
  grid-template-columns: 16em 1fr;
  grid-template-rows: 8em 1fr;
  /* padding: 1.7em;
  padding-top: 1em; */
  border-radius: 0.8em 9.5em 0.7em 0.3em;
  background-color: rgb(129, 194, 216);
  transition: all;
  transition-duration: 0.25s;
  overflow: hidden;
  background: url(images/mountains-rockies.webp);
  background-size: cover;
}
header::before {
  display: inline-block;
  /* position: absolute; */
  width: 100%;
  height: 100%;
  content: "";
  background-color: rgb(129, 194, 216);
  grid-row: 1 / span 2;
  grid-column: 1 / span 2;
  transition: opacity 0.25s ease-in-out;
  z-index: 1;
  opacity: 100%;
}
header:hover::before {
  opacity: 0%;
}
header:hover {
  border-radius: 5em 8.5em 1.2em 2em;
  background-color: rgb(129, 194, 216, 0.6);
  /* opacity: 0.7; */
  /* filter: brightness(1.1) saturate(1.4); */
  box-shadow: inset 0em -3em 7em #82e2ff;
  /* border-top: 1px solid white;*/
}
header > .portrait {
  z-index: 2;
  grid-row-start: 1;
  grid-column-start: 1;
  height: 13.4em;
  width: 13.4em;
  border-radius: 0.3em 0em 1em 0.3em;
  grid-row: 1 / span 2;
  transition: all;
  transition-duration: 0.25s;
  background: url("images/me/square-600.webp");
  background-size: cover;
}
header:hover > .portrait {
  border-radius: 5em 3em 5em 2em;
  background: url("images/me/square-600-transparent.webp");
  background-size: cover;
  outline: 1px solid white;
  rotate: 3deg;
  /* box-shadow: 3em 0px 7em  #82e2ff; */
  /* box-shadow: 20px 20px 60px #82e2ff; */
}
header > h1 {
  z-index: 2;
  grid-column: 2 / span 1;
  grid-row: 1;
  display: flex;
  align-items: flex-end;
}
header > h2 {
  z-index: 2;
  grid-column: 2 / span 1;
  grid-row: 2;
  display: flex;
  align-items: baseline;
}
/* header > h2 > a {
  transition: rotate 0.15s ease-out;
  transform-origin: top left;
}

header > h2 > a:hover  {
  rotate: 0.5deg;
} */

main {
}

footer {
  padding: 1.7em;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  border-radius: 0.6em 0.6em 1.2em 3em;
  background-color: rgb(110 103 211);
  transition: all;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
}
footer:hover {
  border-radius: 1.5em 3em 0.5em 0.5em;
  /* opacity: 0.8; */
}

/* NAV */

nav {
  /* background: url(images/mountains-under.webp); */
  /* background-size: cover; */
  padding-left: 1em;
  /* padding: 0.8em 1.6em 0.8em 3.2em; */
  border-radius: 0.1em 0.7em 0.2em 1.9em;
  background-color: rgb(154, 211, 230);
  font-size: 2em;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* grid-template-rows: repeat(2, 1fr); */
  transition: all;
  transition-duration: 0.5s;
}
nav:hover,
nav.bottom:hover {
  border-radius: 0.3em 1.4em 0.4em 1.5em;
  /* background-color: rgb(129, 194, 216, 0.6); */
  /* opacity: 0.7; */
  /* filter: brightness(1.1) saturate(1.3); */
  /* box-shadow: inset 0em -3em 7em #82e2ff; */
  /* border-top: 1px solid white; */
}

nav > a {
  display: flex;
  gap: 1em;
  height: fit-content;
}

nav > a:hover {
  /*cursor: url("images/chefskiss.png"), default;*/
  background: none;
}

nav > a span {
  transition: rotate 0.15s ease-out;
  transform-origin: top left;
}

nav > a:hover span {
  rotate: 1.5deg;
}

nav > a > .glyph {
  transition: all;
  transition-duration: 0.5s;
  width: 0.8em;
  filter: invert(1) brightness(0.4) sepia(1) hue-rotate(136deg) saturate(5.5);
}
nav > a:hover > .glyph {
  filter: invert(1) brightness(0.4) sepia(1) hue-rotate(306deg) saturate(9.5);
}

nav.bottom {
  border-radius: 1.6em 0.6em 1.6em 0.6em;
  background-color: rgb(39 72 139 / 39%);
  padding-left: 0.7em;
  box-shadow: inset 0em -1.1em 2em #3e43d6aa;
}

nav.bottom a {
  color: #b5f8fb;
}

/* MAIN SECTIONS */

main > p:hover {
  border-radius: 1.4em 4em 0.5em 2em;
}
main > p {
  transition: all;
  transition-duration: 0.3s;
  border-radius: 0.7em 2em 1em 4em;
  background-color: #015160;
  padding: 2em 4em;
  font-family: "Open Sans", "Courier New", monospace;
  font-size: 1.3em;
  color: white;
}

/* @supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
  body > .container::before {
    opacity:0 !important;
  }
} */

body > .container::before {
  opacity: 0;
  border-radius: 5em;
  transition: all 0.5s ease-in-out;
  position: absolute;
  z-index: -1;
  content: ".";
  width: 100%;
  height: 100%;
  filter: saturate(1.2);
  background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.8) 0%,
      rgb(250, 255, 208) 23%,
      rgba(255, 207, 0, 0.8) 38%,
      rgba(239, 0, 150, 0.9) 54%,
      rgba(85, 215, 255, 0.9) 90%
    ),
    url(images/stripesbkg100.png);
  background-blend-mode: hard-light;
  top: 13em;
  bottom: 6em;
  width: 100%;
  height: 45em;
}

body > .container:has(#intro:hover)::before {
  opacity: 1;
  animation: fire-diag 4s linear infinite;
  box-shadow: 0 0em 14em #a800ff, 0 0em 3em #00e5ff;
  background-position-x: -1.3em;
  filter: saturate(1) blur(3px);
}

#intro {
  display: flex;
  flex-direction: column;
  gap: 2em;
  padding-top: 2em;
  padding-bottom: 2em;
}

#intro > p {
  font-size: 1.3em;
  padding: 0 4em 0 4em;
  color: white;
  line-height: 1.5em;
  /* background-color: rgb(173, 221, 236); */
  /* text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000; */
}

#intro > section#forge {
  display: flex;
  padding: 0.5em 2.5em 0em 2.5em;
  border-radius: 0.4em 1.5em 0.2em 2.7em;
  transition: all;
  transition-duration: 0.35s;
}
#intro:hover > section#forge {
  padding: 5.8em 0em 1.8em 0em;
}
#intro > section#forge:hover {
  border-radius: 0.8em 2.5em 0.6em 3.7em;
}
#intro:hover > section#forge > article > img {
  opacity: 100%;
  /* filter: sepia(100%) invert(0) hue-rotate(311deg) saturate(5.0) brightness(1.0) contrast(1); */
  filter: sepia(100%) invert(0) hue-rotate(311deg) saturate(6) brightness(1)
    contrast(1);
  box-shadow: 0 6em 7em #ffe8ad, 0 1.6em 1em #ff7a00, 0 1.6em 4em #ff5700,
    0 -1.5em 3em #ff0098, 0 -0.5em 0.2em #e300ff;
  /* animation: bubblebubble1 3s linear infinite alternate; */
}

#intro section#forge a {
  border-radius: 0.2em 0.5em 0.2em 0.5em;
}

#intro > section#forge > article {
  flex: 1 1 0em;
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  align-items: center;
  border-radius: 0.2em 1.5em 0.2em 1.5em;
}

#intro > section#forge > article b {
  /* font-family: "Cutive Mono", "Courier New", monospace; */
  font-family: "Open Sans";
  color: #888888;
  font-size: 1.7em;
  font-weight: normal;
  position: relative;
  transition: all 0.2s ease-in-out;
  bottom: 0em;
}
#intro:hover > section#forge > article b {
  color: black;
  z-index: 1;
}

#intro > section#forge > article p {
  padding: 0.4em;
}
#intro:hover > section#forge > article b {
  color: black;
  z-index: 1;
}

#intro > section#forge img,
video {
  transition: all 0.3s ease-in-out;
  width: 13em;
  border-radius: 7.5em;
  border: 0.0625em solid rgb(110, 255, 199);
  filter: sepia(100%) hue-rotate(150deg);
  opacity: 50%;
  user-select: none;
}

#intro > section#forge article:hover img,
#intro > section#forge article:hover video {
  filter: none;
  border-radius: 0 1.5em 0 1.5em;
  border: none;
  opacity: 100%;
  scale: 1.9;
  box-shadow: 0 3.5em 4em #ffe100, 0 1.6em 1em #ff7a00, 0 1.6em 4em #ff5700,
    0 -0.1em 1em #ff006d;
  z-index: 2;
  /* rotate: 3deg; */
}
#intro > section#forge > article:hover:last-child img {
  border-radius: 1.5em 1.5em 3em 0.2em;
  /* translate: 2em; */
}
#intro > section#forge > article:hover:first-child img {
  border-radius: 3em 1.5em 0.2em 1.5em;
  /* translate: -2em; */
}
#intro > section#forge > article:hover:nth-child(2) img {
  border-radius: 1.1em 1.5em 1.2em 0.8em;
  /* translate: -2em; */
}
#intro > section#forge article:hover b {
  z-index: 2;
  position: relative;
  bottom: -3em;
}

p.d1,
p.d2,
p.d3 {
  display: none;
}
#intro p.general {
  display: flex;
  justify-content: center;
}
#intro p.general:has(~ section > article:hover) {
  display: none;
}
#intro p.d1:has(~ section > article.a1:hover),
#intro p.d2:has(~ section > article.a2:hover),
#intro p.d3:has(~ section > article.a3:hover) {
  display: inline-block;
}
#intro > p b,
#intro > p h3 {
  background-color: rgba(40, 0, 119, 0.4);
  color: rgb(255, 255, 255);
  font-weight: normal;
}

/* p:has(+ section#forge article:hover):before {
  content: "BAJA BLAST"
} */

/* BOOKSHELF */
::-webkit-scrollbar {
  width: 15px;
}

::-webkit-scrollbar-track {
  /* -webkit-box-shadow: inset 0 0 6px     rgba(0,0,0,0.3);  */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  /* -webkit-box-shadow: inset 0 0 6px     rgba(0,0,0,0.5);  */
}
section#books {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em 1em 1em 1em;
  transition: all;
  transition-duration: 0.5s;
  /* flex-wrap: wrap; */
  overflow-y: hidden;
  overflow-x: scroll;
  resize: vertical;
  min-height: 6em;
  height: 10.23em;
  max-height: 32em;
  scrollbar-color: #0b8567 #0000;
  scrollbar-width: thin;
}
section#books img,
video {
  margin: 0.2em;
  height: 100%;
}

/* TRAD NEWS */

main > section#news {
  display: flex;
  padding: 1.5em 2.5em 1.5em 2.5em;
  /* background-color: rgb(16 82 104); */
  border-radius: 0.4em 1.5em 0.2em 2.7em;
  transition: all;
  transition-duration: 0.5s;
}
main > section#news:hover {
  border-radius: 0.8em 2.5em 0.6em 3.7em;
}

/* main section#news a {
  border-radius: 0.2em 0.5em 0.2em 0.5em;
} */

main > section#news > article {
  flex: 1 1 0em;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 0.2em 1.5em 0.2em 1.5em;
  /* background-color: rgb(154, 211, 230);
  background: linear-gradient(
    180deg,
    rgb(154, 211, 230) 0%,
    rgb(129, 194, 216) 25%,
    rgb(110, 177, 199) 49%,
    rgb(73, 202, 181) 100%
  ); */
  margin: 0.07em;
  padding: 1.5em;
}

main > section#news > article span {
  line-height: 1.5em;
  color: rgb(170 210 255);
  background-color: rgb(9 55 69);
}
main > section#news > article span a {
  color: white;
  background-color: #32758a;
}

main > section#news > article b {
  transition: 0.3s all ease-in-out;
  margin-bottom: 0.4em;
  font-family: "Cutive Mono", "Courier New", monospace;
  color: white;
  font-size: 1.7em;
  font-weight: normal;
}

main > section#news > article p {
  transition: 0.3s all ease-in-out;
  padding: 0.4em;
}

main > section#news img,
video {
  transition: all 0.2s ease-out;
  width: 13em;
  border-radius: 7.5em;
  border: 0.0625em solid rgb(110, 255, 199);
  margin-top: 1em;
  margin-bottom: 2em;
  filter: sepia(100%) hue-rotate(150deg);
  opacity: 40%;
}

main > section#news article:hover img,
main > section#news article:hover video {
  filter: none;
  border-radius: 0 1.5em 0 1.5em;
  border-color: #0000;
  opacity: 100%;
  scale: 1.4;
  translate: 0 -2em;
  box-shadow: 0 3px 60px #00203088, 0 3px 20px #002030bb;
}
main > section#news article:hover > b {
  scale: 1.2;
}
main > section#news article:hover > p {
  scale: 1.03;
}
main > section#news article > p > span {
  transition: 0.25s all ease-in;
}
main > section#news article:hover > p > span {
  /* box-shadow: 0 -3px 20px #00203066, 0 -3px 15px #00203066; */
}

/* NEWSFEED */

main > section#newsfeed {
  display: flex;
  padding: 1.5em 2.5em 2.5em 2.5em;
  background-color: rgb(9 55 69);
  border-radius: 0.3em 3.5em 1em 0.3em;
  transition: all;
  transition-duration: 0.5s;
  position: relative;
  color: white;
  border-bottom: 0.3px solid #5dffb0;
}
section#newsfeed label {
  width: 90%;
  text-align: right;
  font-family: "Open Sans", "Courier New", monospace;
  position: absolute;
  color: #00ffdf;
  padding: 1.4em;
  bottom: 0;
  font-size: 0.6em;
  cursor: pointer;
}
section#newsfeed label:hover {
  color: white;
}
section#newsfeed input {
  display: none;
}
section#newsfeed label:after {
  content: "MORE";
}
section#newsfeed input:checked + label:after {
  content: "LESS";
}
section#newsfeed input:checked ~ dl {
  height: 60.5em;
}

main > section#newsfeed:hover {
  border-radius: 1.6em 7.5em 2.4em 3.6em;
}

section#newsfeed dl {
  line-height: 1.4em;
  margin: 0;
  height: 17em;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}
section#newsfeed dl dt {
  width: 10%;
  color: #00ebff;
  display: inline-block;
  vertical-align: top;
  text-align: right;
  margin-right: 2em;
  font-variant: oldstyle-nums;
  font-size: 0.75em;
}
section#newsfeed dl dd {
  margin-inline-start: 0;
  width: 85%;
  display: inline-block;
  margin-bottom: 0.5em;
}
section#newsfeed dl a {
  color: #b9e2ff;
  background-color: #105e74;
}

/* PROJECTS */

main > section#projects figure {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 10;
  background-color: #073036;
  border-radius: 3em;
  transition: all 0.3s ease-in-out;
}
main > section#projects article:hover figure {
  scale: 0.93;
}

main > section#projects a.container {
  background: none;
}

main > section#projects .container {
  display: grid;
  grid-template-columns: 5.0625em 1fr 3.625em;
  grid-template-rows:
    minmax(0, auto) minmax(1.5em, auto) minmax(3.25em, auto) minmax(3em, auto)
    1fr minmax(3.1em, auto);
}

main > section#projects .container h1 {
  grid-column: 2/3;
  grid-row: 3;
  align-self: baseline;
  font-size: 3em;
  color: white;
}

main > section#projects .container h2 {
  grid-column: 2/3;
  grid-row: 4;
  font-size: 1.5em;
  color: #a8faf4;
}

main > section#projects .container p {
  grid-column: 2/3;
  grid-row: 5;
}

main > section#projects .glyph {
  grid-column: 1;
  grid-row: 3;
  align-self: center;
  justify-self: center;
  content: url("images/icons/arrowLR.svg");
  width: 1.75em;
  height: 1.75em;
  filter: invert(0.8) sepia(1) hue-rotate(78deg) saturate(5.5) brightness(20)
    opacity(90%);
  transition: all;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
  rotate: 0;
}
main > section#projects > article:hover .glyph {
  rotate: -45deg;
}

main > section#projects > article {
  border-radius: 3.5em;
}

main > section#projects > article:hover {
  background: var(--link-gradient);
  background-size: 2000% 2000%;
  animation: gradient 40s linear infinite alternate;
}

main > section#projects > article#context-patterns {
  display: flex;
  flex-direction: row;
  background-color: rgb(73, 202, 137);
  /* border-radius: 3em 3em 3em 2em; */
}

main > section#projects > article#depthop {
  display: flex;
  flex-direction: row-reverse;
  background-color: rgb(73, 202, 94);
}

/* PROJECT : FRUCTURE */

main > section#projects > article#fructure {
  display: grid;
  grid-template-columns: minmax(0, 18.75em) minmax(0, auto);
  grid-template-rows: minmax(0, auto) 1fr;
  background-color: rgb(73, 202, 181);
}

main > section#projects > article#fructure figure {
  grid-column: 1;
  grid-row: 1/3;
  border-radius: 3em 0 3em 3em;
}
main > section#projects > article figure img {
  border-radius: 3em;
}
main > section#projects > article#fructure .videolink {
  grid-column: 2;
  grid-row: 1;
  height: 3.75em;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #dc3400;
  border-radius: 0 1em 0 0;
}

main > section#projects > article#fructure .videolink a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-right: 1.25em;
  font-size: 1.5em;
}

main > section#projects > article#fructure .videolink .scrot {
  content: url("images/me/fructure-talk.webp");
  border-radius: 0 1em 0 0;
  height: 100%;
}

/* PROJECT ICONS */

main > section#projects .container .githubicon {
  grid-column: 3;
  grid-row: 3;
  align-self: baseline;
  content: url("images/icons/github-32.png");
  height: 1.6em;
  width: 1.6em;
}

main > section#projects .container .tumblricon {
  grid-column: 3;
  grid-row: 4;
  align-self: baseline;
  content: url("images/icons/tumblr-32.png");
  height: 1.6em;
  width: 1.6em;
}

main > section#projects .youtubeicon {
  content: url("images/icons/youtube-48-white.png");
  padding-left: 0.9em;
  padding-right: 1em;
  height: 1.65em;
  width: 1.65em;
}

/* HEADER HELPERS */

header .glyph {
  display: inline-block;
  content: url("images/icons/arrowLR.svg");
  width: 0.67em;
  height: 0.67em;
  margin-right: 0.6em;
  margin-left: 0.2em;
  color: var(--highlight-color);
  filter: invert(0.7) sepia(1) hue-rotate(78deg) saturate(0) brightness(4);
  transition: all;
  transition-duration: 0.5s;
}

header .glyph:has(+ a:hover) {
  filter: invert(0.7) sepia(1) hue-rotate(308deg) saturate(10) brightness(1);
  rotate: -45deg;
}
/* FOOTER HELPERS */

.arrowup {
  display: inline-block;
  content: url("images/icons/arrow-up-white.svg");
  height: 0.8em;
  width: 0.8em;
}

.arrowdown {
  display: inline-block;
  content: url("images/icons/arrow-up-white.svg");
  transform: rotate(180deg);
  height: 0.8em;
  width: 0.8em;
}

footer a:hover {
  border-radius: 0.2em;
  background: none;
  background-color: var(--highlight-color);
}