body {
  background-color: var(--c_bg_dark);
}

header {
  height: 75vh;
  width: 100%;
  position: relative;
  background-color: var(--c_bg_dark);
  display: flex;
}

header img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(34.8181818px * var(--font_size));
  max-width: 100%;
}

header h1 {
  color: #fff;
  font-size: 1rem;
  transform: translateY(9em);
  text-align: center;
}
header h1 label {
  display: inline-block;
  transform: scaleX(5);
  margin-right: 1em;
}

#section_intro {
  background-blend-mode: hard-light;
  color: #fff;
}
section.impress h1 {
  font-size: 3rem;
  color: transparent;
  background-color: #0e0e0e;
  text-shadow: 2px 2px 2px rgb(90 90 90 / 22%);
  -webkit-background-clip: text;
  /* line-height: 0.85em; */
  margin-bottom: 1.1em;
}
#section_intro h1 > sub {
}
#section_intro .button.plus {
  fill: #ccc;
}
#section_intro .button.plus:hover {
  fill: #fff;
}
#section_intro contentInner:first-child p {
  font-size: 2em;
  font-weight: bold;
  text-align: center;
  max-width: 18em;
}
#section_intro contentInner:first-child p label {
  display: inline-block;
  transform: scaleX(5);
  margin-right: 1em;
}
#section_intro contentInner:first-child p::first-letter {
  display: block;
  position:absolute;
  transform: rotate(45deg);
}
#section_intro contentHidden {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition-delay: 300ms;
}
#section_intro > article.highlighted contentHidden {
  transition-delay: 0ms;
}
#section_intro contentHidden images {
  display: flex;
  overflow-y: clip;
  padding: 0.7em 0;
}
#section_intro contentHidden images > div {
  --skew: -25deg;
  width: 8em;
  height: 12em;
  margin-right: 1em;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  border-radius: 0.5em;
  box-shadow: 0.2em 0.3em 0.4em 0em #0003;
  transition-property: transform opacity;
  transition-duration: 500ms;
  transition-timing-function: ease-in-out;
  transform: translate(calc(51.2938% * (12/8)), -110%) skewX(var(--skew));
  opacity: 0;
}
#section_intro contentHidden images > div:nth-child(2) {
  transform: translate(calc(-51.2938% * (12/8)), 110%) skewX(var(--skew));
}
#section_intro > article.highlighted contentHidden images > div {
  transform: skewX(var(--skew));
  opacity: 1;
  --delay: 200ms;
  transition-delay: var(--delay);
}
/* #section_intro contentHidden.visible images > div:nth-child(1) {
  transition-delay: calc(var(--delay));
}
#section_intro contentHidden.visible images > div:nth-child(2) {
  transition-delay: calc(var(--delay) + 100ms);
}
#section_intro contentHidden.visible images > div:nth-child(3) {
  transition-delay: calc(var(--delay) + 200ms);
} */
#section_intro contentHidden images > div::before {
  content: '';
  position: absolute;
  width: 172%;
  height: 100%;
  transform: skewX(calc(var(--skew) * -1));
  transform-origin: bottom left;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#section_intro contentHidden images > div:last-child {
  margin-right: 0;
}
#section_intro contentHidden images > div:nth-child(1)::before {
  background-image: url('/Images/Bg/Kittens/1.png');
}
#section_intro contentHidden images > div:nth-child(2)::before {
  background-image: url('/Images/Bg/Kittens/2.png');
}
#section_intro contentHidden images > div:nth-child(3)::before {
  background-image: url('/Images/Bg/Kittens/3.jpg');
}



/* Circles */
contentInner > placeholder img:nth-child(n+2) {
  width: 60%;
  --time: 35;
  animation: spin calc(var(--time) * 1s) linear infinite;
}
contentInner > placeholder img:nth-child(n+7) {
  opacity: 0.5;
  animation-direction: reverse;
}
contentInner > placeholder img:nth-child(2) {animation-duration: calc(var(--time)*5s);}
contentInner > placeholder img:nth-child(3) {animation-duration: calc(var(--time)*3.5s);}
contentInner > placeholder img:nth-child(4) {animation-duration: calc(var(--time)*2.6s);}
contentInner > placeholder img:nth-child(5) {animation-duration: calc(var(--time)*2s);}
contentInner > placeholder img:nth-child(6) {animation-duration: calc(var(--time)*1.5s);}
contentInner > placeholder img:nth-child(7) {animation-duration: calc(var(--time)*1s);}
contentInner > placeholder img:nth-child(8) {animation-duration: calc(var(--time)*2s);}
contentInner > placeholder img:nth-child(9) {animation-duration: calc(var(--time)*1.5s);}
contentInner > placeholder img:nth-child(10) {animation-duration: calc(var(--time)*1s);}

contentInner > placeholder #console_glow {
  width: 14%;
  height: 11.5%;
  border-radius: 14%;
  margin-top: -7%;
  animation: console_glow2 3.1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes console_glow2 {
  0% {
    background-color: #ccffcc30;
    box-shadow: 0 0 70px 0px #ccffcc;
  }
  15% {
      background-color: #caffca25;
      box-shadow: 0 0 100px 5px #caffca;
  }
  30% {
      background-color: #ccffcc30;
      box-shadow: 0 0 70px 0px #ccffcc;
  }
  65% {
      background-color: #eaffea22;
      box-shadow: 0 0 120px 10px #eaffea;
  }
  100% {
      background-color: #ccffcc30;
      box-shadow: 0 0 70px 0px #ccffcc;
  }
}

/* Illustrations (jellyfish) */
#ph_illustrations {
  /* justify-content: flex-start; */
}
#ph_illustrations img {
  animation: up-down 5s ease-in-out infinite alternate both;
  transform-origin: top right;
  width: 50%;
}
@keyframes up-down {
  0% {transform: scale(0.97);}
  100% {transform: scale(1);}
}