/*!
* LICENSE - style only: CC BY-NC-SA
* @link https://creativecommons.org/licenses/by-nc-sa/3.0/
* Graphics copyright of Inès K.
* 
* Title: Retro Cyberpunk
* Author: Inès K.
* Website: N/A
* Twitter: @inescodes
*
* View on Style Stage:
* @link https://stylestage.dev/styles/retro-cyberpunk/
*/


/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 2 version
*/

@import url("https://fonts.googleapis.com/css2?family=Audiowide&family=Share+Tech+Mono&display=swap");

:root {
  --font-body: "Share Tech Mono", monospace;
  --font-headings: "Audiowide", cursive;
  --neon-pink: 341, 100%, 58%;
  --neon-blue: 184, 96%, 46%;
  --very-light-blue: 190, 100%, 91%;
  --dark-blue: 240, 95%, 9%;
  --yellow: 44, 97%, 72%;
  --border: hsl(var(--neon-blue)), hsl(var(--neon-pink)), hsl(var(--neon-blue));
  --padding-wrapper: 1.5em;
  --border-image: linear-gradient(-45deg, var(--border)) 10% stretch;
  --background-lines: linear-gradient(
      hsla(184, 96%, 46%, 0) 90%,
      hsla(184, 96%, 46%, 0.25) 95%
    )
    top left / 100% 0.5rem;
}

/* === GLOBAL STYLES === */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  padding: 1em;
  background: hsl(var(--dark-blue)) var(--background-lines);
  color: hsl(var(--very-light-blue));
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-size: clamp(1.2rem, 0.7rem + 0.9vw, 4rem);
  line-height: 1.2;
  overflow-x: hidden;
  max-width: 112.5rem;
}

@media (min-width: 48rem) {
  body {
    margin-left: 13em;
  }
}

h1,
h2,
h3,
h4 {
  z-index: 2;
  position: relative;
  color: hsl(var(--yellow));
  font-family: var(--font-headings);
  text-transform: uppercase;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

h2,
h3,
h4 {
  z-index: 3;
  position: relative;
  font-size: 1.6rem;
  font-size: clamp(1.2rem, .8rem + 1.5vw, 2.5rem);
  padding-top: .5rem;
  padding-bottom: .25rem;
}

h3 {
  margin-top: 1em;
}

strong {
  color: hsl(var(--yellow));
}

hr {
  margin-bottom: .5em;
  border-top: 3px solid hsl(var(--neon-pink));
  border-radius: 1px;
  opacity: 70%;
}

li {
  list-style-type: none;
}

a {
  color: hsl(var(--neon-pink));
}

img {
  display: block;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  margin-left: auto;
  margin-right: auto;
  max-width: 80%;
}

img:hover {
  box-shadow: 0 0 5px 2px rgba(0, 140, 186, 0.5);
}

a:hover,
a:active {
  color: hsl(var(--very-light-blue));
  top: -0.03rem;
  left: -0.03rem;
  -webkit-filter: drop-shadow(0 0 0.2rem hsla(var(--neon-pink), 0.4))
    drop-shadow(0.5rem 0.5rem 0.2rem hsla(var(--neon-pink), 0.6))
    drop-shadow(-0.5rem 0.5rem 0.2rem hsla(var(--neon-pink), 0.6))
    drop-shadow(0.5rem -0.5rem 0.2rem hsla(var(--neon-pink), 0.6))
    drop-shadow(-0.5rem -0.5rem 0.2rem hsla(var(--neon-pink), 0.6));
  filter: drop-shadow(0 0 0.2rem hsla(var(--neon-pink), 0.4))
    drop-shadow(0.5rem 0.5rem 0.2rem hsla(var(--neon-pink), 0.6))
    drop-shadow(-0.5rem 0.5rem 0.2rem hsla(var(--neon-pink), 0.6))
    drop-shadow(0.5rem -0.5rem 0.2rem hsla(var(--neon-pink), 0.6))
    drop-shadow(-0.5rem -0.5rem 0.2rem hsla(var(--neon-pink), 0.6));
}

p:not(:first-child) {
  margin-top: 1.5em;
}

p:last-child {
  margin-bottom: 1.5em;
}

h1::before,
h2::before,
h3::before,
h4::before {
  z-index: -1;
  position: absolute;
  top: 0.2rem;
  left: -0.2rem;
  width: 100%;
  height: 100%;
  color: hsl(var(--neon-pink));
  opacity: 0.7;
  animation: glitch 0.3s linear infinite alternate-reverse;
}

h1::after,
h2::after,
h3::after,
h4::after {
  z-index: -1;
  position: absolute;
  top: 0.1rem;
  left: 0.2rem;
  width: 100%;
  height: 100%;
  color: hsl(var(--neon-blue));
  opacity: 0.7;
  animation: glitch 0.3s 0.1s linear infinite alternate-reverse;
  clip-path: polygon(3% 100%, 14% 28%, 67% 15%, 103% 67%);
}

aside {
  width: 100%;
  border: 0.4rem solid hsl(var(--neon-blue));
  padding: 1.5em;
  margin-top: 2em;
  background-color: hsl(var(--dark-blue));
  -o-border-image: var(--border-image);
  border-image: var(--border-image);
}

aside ul {
  margin-top: 0.5rem;
  display: -ms-grid;
  display: grid;
}

aside li {
  margin: 1em;
}

.profile .container > a,
[class^="link"] {
  display: block;
  margin-top: 1em;
  border: 0.2rem solid hsl(var(--yellow));
  padding: 0.6em 1.2em;
  background: hsl(var(--dark-blue)) var(--background-lines);
  text-decoration: none;
  text-align: center;
  font-size: 0.95em;
  max-width: 35ch;
  margin-left: auto;
  margin-right: auto;
}

.profile .container > a:hover,
[class^="link"]:hover {
  -webkit-transform: translate(-0.1rem, -0.1rem);
  transform: translate(-0.1rem, -0.1rem);
  -webkit-filter: none;
  filter: none;
  -webkit-box-shadow: 0px 0px 25px hsl(var(--yellow));
  box-shadow: 0px 0px 25px hsl(var(--yellow));
  border-color: hsl(var(--very-light-blue));
}

/* Go To Top button */
#topBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: 0.2rem solid hsl(var(--yellow));
  padding: 9px 17px 9px 17px;
  color: hsl(var(--neon-blue));
  background: hsl(var(--dark-blue));
  text-decoration: none;
  text-align: center;
  font-size: 18px;
  max-width: 35ch;
  margin-left: auto;
  margin-right: auto;
}
#topBtn:hover {
  -webkit-transform: translate(-0.1rem, -0.1rem);
  transform: translate(-0.1rem, -0.1rem);
  -webkit-filter: none;
  filter: none;
  -webkit-box-shadow: 0px 0px 25px hsl(var(--yellow));
  box-shadow: 0px 0px 25px hsl(var(--yellow));
  border-color: hsl(var(--very-light-blue));
}

::-moz-selection {
  background-color: hsl(var(--yellow));
  color: hsl(var(--dark-blue));
}

::selection {
  background-color: hsl(var(--yellow));
  color: hsl(var(--dark-blue));
}

:focus {
  outline: 2px solid transparent;
}

:focus-visible {
  outline-color: hsl(var(--neon-pink));
  outline-offset: 2px;
}

/* === SKIP LINK === */
.skip-link:not(:focus) {
  border: 0;
  clip: rect(0 0 0 0);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.skip-link:hover,
.skip-link:active {
  top: 0;
  left: 0;
  -webkit-filter: none;
  filter: none;
}

.skip-link {
  z-index: 100;
  position: fixed;
  left: 0;
  width: 100vw;
  top: 0;
  margin: 0 auto;
  padding: 0.3rem;
  background-color: hsl(var(--dark-blue));
  -webkit-filter: none;
  filter: none;
  text-align: center;
}

@media (min-width: 48rem) {
  .skip-link,
  .skip-link:hover,
  .skip-link:active {
    display: inline-block;
    width: initial;
    top: 2em;
    left: 1em;
  }
}

/* === HEADER === */
header {
  width: 100%;
  border: 0.4rem solid hsl(var(--neon-blue));
  padding: 1.5em;
  background-color: hsl(var(--dark-blue));
  -o-border-image: var(--border-image);
  border-image: var(--border-image);
  text-align: center;
}

header h1 {
  max-width: 5ch;
  font-size: 3rem;
  font-size: clamp(3rem, 2.5rem + 2.5vw, 6rem);
  overflow: hidden;
  opacity: 0.9;
}

article h1::before,
article h1::after {
  content: "{{title}}";
}

header h2 {
  margin-top: 1em;
  max-width: 25ch;
  color: hsl(var(--very-light-blue));
  font-size: 1.3rem;
  font-size: clamp(1rem, 1.3rem + 1.7vw, 4rem);
  font-family: var(--font-body);
  text-transform: none;
  line-height: 1;
}

.link-github svg {
  width: 1.5rem;
  vertical-align: middle;
  stroke: hsl(var(--neon-pink));
  stroke-width: 0.15rem;
  fill: transparent;
}

/* === NAVIGATION === */
nav {
  border: 0.4rem solid hsl(var(--neon-blue));
  margin-top: 2em;
  -o-border-image: var(--border-image);
  border-image: var(--border-image);
  background-color: hsl(var(--dark-blue));
}

nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

nav li {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 33%;
  flex: 1 1 33%;
  margin-top: 0;
  border: 1px solid hsl(var(--neon-blue));
  padding: 0.5em;
  width: 100%;
  text-align: center;
}

nav a {
  margin: 0;
  padding: 0;
  font-size: 1em;
}

#nextprev {
  text-align: center;
  margin-top: 2em;
  position:relative;
  padding: 3px;
  width: 50%;
}

@media screen and (min-width: 48rem) {
  nav {
    position: fixed;
    left: 1em;
    top: 3em;
    width: 12em;
  }

  nav ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  nav li:not(:last-child) {
    -ms-flex-preferred-size: content;
    flex-basis: content;
  }
}

/* === ABOUT === */
[id="about"] > .container {
  width: 100%;
  border: 0.4rem solid hsl(var(--neon-blue));
  padding: 1.5em;
  margin-top: 2em;
  background-color: hsl(var(--dark-blue));
  -o-border-image: var(--border-image);
  border-image: var(--border-image);
}

[id="about"] ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 1.5em auto;
  font-size: 0.8em;
  text-align: center;
}

[id="about"] li {
  border: 0.2rem solid hsl(var(--very-light-blue));
  padding: 1em;
  margin: 0.5em;
  border-radius: 15%;
  background: hsl(var(--dark-blue));
  -webkit-box-shadow: 0 0 1.2rem hsla(var(--neon-blue), 0.3),
    0.1rem 0.1rem 1.2rem hsla(var(--neon-blue), 0.3),
    -0.1rem 0.1rem 1.2rem hsla(var(--neon-blue), 0.3),
    0.1rem -0.1rem 1.2rem hsla(var(--neon-blue), 0.3),
    -0.1rem -0.1rem 1.2rem hsla(var(--neon-blue), 0.3),
    0 0 1.5rem hsla(var(--neon-blue), 0.4) inset,
    0.1rem 0.1rem 1.5rem hsla(var(--neon-blue), 0.2) inset,
    -0.1rem 0.1rem 1.5rem hsla(var(--neon-blue), 0.2) inset,
    0.1rem -0.1rem 1.5rem hsla(var(--neon-blue), 0.2) inset,
    -0.1rem -0.1rem 1.5rem hsla(var(--neon-blue), 0.2) inset;
  box-shadow: 0 0 1.2rem hsla(var(--neon-blue), 0.3),
    0.1rem 0.1rem 1.2rem hsla(var(--neon-blue), 0.3),
    -0.1rem 0.1rem 1.2rem hsla(var(--neon-blue), 0.3),
    0.1rem -0.1rem 1.2rem hsla(var(--neon-blue), 0.3),
    -0.1rem -0.1rem 1.2rem hsla(var(--neon-blue), 0.3),
    0 0 1.5rem hsla(var(--neon-blue), 0.4) inset,
    0.1rem 0.1rem 1.5rem hsla(var(--neon-blue), 0.2) inset,
    -0.1rem 0.1rem 1.5rem hsla(var(--neon-blue), 0.2) inset,
    0.1rem -0.1rem 1.5rem hsla(var(--neon-blue), 0.2) inset,
    -0.1rem -0.1rem 1.5rem hsla(var(--neon-blue), 0.2) inset;
  -webkit-transition: -webkit-transform 0.1s;
  transition: -webkit-transform 0.1s;
  transition: transform 0.1s;
  transition: transform 0.1s, -webkit-transform 0.1s;
}

[id="about"] li:nth-child(3n) {
  -webkit-transform: rotate(8deg);
  transform: rotate(8deg);
}

[id="about"] li:nth-child(2n + 2) {
  -webkit-transform: rotate(-8deg);
  transform: rotate(-8deg);
}

[id="about"] li:hover {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-animation: flicker 0.4s linear;
  animation: flicker 0.4s linear;
}

[id="about"] :first-child h2::before,
[id="about"] :first-child h2::after {
  content: "Setting the Stage";
}

[id="about"] :last-child h2::before,
[id="about"] :last-child h2::after {
  content: "Modern CSS Under the Spotlight";
}

blockquote {
  position: relative;
  margin: 1em 0 1em 2em;
}

blockquote::before {
  content: "";
  z-index: 2;
  position: absolute;
  width: 0.5rem;
  height: 100%;
  background-color: hsla(var(--very-light-blue), 0.25);
  top: 0;
  left: -2em;
  border-radius: 30%;
  -webkit-filter: drop-shadow(0 0 0.2rem hsla(var(--neon-blue), 0.6))
    drop-shadow(0.2rem 0.5rem 0.2rem hsla(var(--neon-blue), 0.6))
    drop-shadow(-0.2rem 0.5rem 0.2rem hsla(var(--neon-blue), 0.6))
    drop-shadow(0.2rem -0.5rem 0.2rem hsla(var(--neon-blue), 0.6))
    drop-shadow(-0.2rem -0.5rem 0.2rem hsla(var(--neon-blue), 0.6));
  filter: drop-shadow(0 0 0.2rem hsla(var(--neon-blue), 0.6))
    drop-shadow(0.2rem 0.5rem 0.2rem hsla(var(--neon-blue), 0.6))
    drop-shadow(-0.2rem 0.5rem 0.2rem hsla(var(--neon-blue), 0.6))
    drop-shadow(0.2rem -0.5rem 0.2rem hsla(var(--neon-blue), 0.6))
    drop-shadow(-0.2rem -0.5rem 0.2rem hsla(var(--neon-blue), 0.6));
}

blockquote::after {
  content: "";
  z-index: 3;
  position: absolute;
  width: 0.5rem;
  height: 100%;
  top: 0;
  left: -2em;
  border-radius: 15%;
  background-image: -webkit-gradient(
    linear,
    left top, left bottom,
    color-stop(1%, hsla(var(--very-light-blue), 0)),
    color-stop(35%, hsla(var(--very-light-blue), 0.8)),
    color-stop(99%, hsla(var(--very-light-blue), 0))
  );
  background-image: linear-gradient(
    hsla(var(--very-light-blue), 0) 1%,
    hsla(var(--very-light-blue), 0.8) 35% 60%,
    hsla(var(--very-light-blue), 0) 99%
  );
  background-position: top left;
  background-size: 100% 30%;
  background-repeat: no-repeat;
  animation: blockquote-animation 1s ease-in-out infinite alternate-reverse;
}

/* === GUIDELINES === */
[id="guidelines"] {
  width: 100%;
  border: 0.4rem solid hsl(var(--neon-blue));
  padding: 1.5em;
  margin-top: 2em;
  background-color: hsl(var(--dark-blue));
  -o-border-image: var(--border-image);
  border-image: var(--border-image);
}

[id="guidelines"] h2::before,
[id="guidelines"] h2::after {
  content: "Guidelines";
}

/* === CONTRIBUTE === */
[id="contribute"] {
  width: 100%;
  border: 0.4rem solid hsl(var(--neon-blue));
  padding: 1.5em;
  margin-top: 2em;
  background-color: hsl(var(--dark-blue));
  -o-border-image: var(--border-image);
  border-image: var(--border-image);
}

[id="contribute"] h2::before,
[id="contribute"] h2::after {
  content: "Contribute";
}

[id="contribute"] ol {
  margin: 1em 0 0 3em;
  counter-reset: contribution-steps;
}

[id="contribute"] li {
  position: relative;
  margin-top: 1em;
  text-align: left;
  counter-increment: contribution-steps;
}

[id="contribute"] li::before {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  content: counter(contribution-steps);
  position: absolute;
  top: 0rem;
  left: -3em;
  border: 0.2rem solid hsl(var(--neon-blue));
  width: 2ch;
  height: 2ch;
  border-radius: 50%;
  color: hsl(var(--neon-blue));
  text-align: center;
}

[id="contribute"] li:hover:before {
  color: hsl(var(--very-light-blue));
  border-color: hsl(var(--very-light-blue));
  -webkit-box-shadow: 0 0 1rem hsla(var(--neon-blue), 0.3),
    0.05rem 0.05rem 1rem hsla(var(--neon-blue), 0.3),
    -0.05rem 0.05rem 1rem hsla(var(--neon-blue), 0.3),
    0.05rem -0.05rem 1rem hsla(var(--neon-blue), 0.3),
    -0.05rem -0.05rem 1rem hsla(var(--neon-blue), 0.3),
    0 0 0.1rem hsla(var(--neon-blue), 0.4) inset,
    0.05rem 0.05rem 0.5rem hsla(var(--neon-blue), 0.2) inset,
    -0.05rem 0.05rem 0.5rem hsla(var(--neon-blue), 0.2) inset,
    0.05rem -0.05rem 0.5rem hsla(var(--neon-blue), 0.2) inset,
    -0.05rem -0.05rem 0.5rem hsla(var(--neon-blue), 0.2) inset;
  box-shadow: 0 0 1rem hsla(var(--neon-blue), 0.3),
    0.05rem 0.05rem 1rem hsla(var(--neon-blue), 0.3),
    -0.05rem 0.05rem 1rem hsla(var(--neon-blue), 0.3),
    0.05rem -0.05rem 1rem hsla(var(--neon-blue), 0.3),
    -0.05rem -0.05rem 1rem hsla(var(--neon-blue), 0.3),
    0 0 0.1rem hsla(var(--neon-blue), 0.4) inset,
    0.05rem 0.05rem 0.5rem hsla(var(--neon-blue), 0.2) inset,
    -0.05rem 0.05rem 0.5rem hsla(var(--neon-blue), 0.2) inset,
    0.05rem -0.05rem 0.5rem hsla(var(--neon-blue), 0.2) inset,
    -0.05rem -0.05rem 0.5rem hsla(var(--neon-blue), 0.2) inset;
}

/* === FILES === */
[id="files"] {
  margin-top: 1.5em;
}

[id="files"] .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

[id="files"] h3 {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 100%;
  flex: 1 0 100%;
}

[id="files"] a {
  margin: 1em;
}

/* === PROFILE === */
.profile h4::before,
.profile h4::after {
  content: "Currently Staged Style";
}

.profile {
  text-align: center;
}

.profile li {
  margin: 0;
}

.profile ul > * + * {
  margin-top: 1em;
}

/* === STYLES === */
[id="styles"] {
  text-align: center;
}

[id="styles"] h2::before,
[id="styles"] h2::after {
  content: "Featured Styles";
}

[id="styles"] li {
  margin: 0;
}

[id="styles"] ul > * + * {
  margin-top: 1em;
}

/* === FOOTER === */
#footer {
  width: 100%;
  border: 0.4rem solid hsl(var(--neon-blue));
  padding: 1.5em;
  margin-top: 2em;
  background-color: hsl(var(--dark-blue));
  -o-border-image: var(--border-image);
  border-image: var(--border-image);
}

#footer ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 -1em;
}

#footer li {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 30ch;
  flex: 0 1 30ch;
  margin: 1em 1em 0 1em;
}

#footer a {
  margin: 0;
  width: 100%;
}

/* === ANIMATIONS === */
@-webkit-keyframes flicker {
  50% {
    border-color: hsl(184, 96%, 46%, 0.5);
  }
}
@keyframes flicker {
  50% {
    border-color: hsl(184, 96%, 46%, 0.5);
  }
}

@-webkit-keyframes glitch {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-0.1rem, -0.1rem);
    transform: translate(-0.1rem, -0.1rem);
  }
  40% {
    -webkit-transform: translate(-0.1rem, -0.1rem);
    transform: translate(-0.1rem, -0.1rem);
  }
  60% {
    -webkit-transform: translate(0.1rem, 0.1rem);
    transform: translate(0.1rem, 0.1rem);
  }
  80% {
    -webkit-transform: translate(0.1rem, -0.1rem);
    transform: translate(0.1rem, -0.1rem);
  }
  to {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}

@keyframes glitch {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-0.1rem, -0.1rem);
    transform: translate(-0.1rem, -0.1rem);
  }
  40% {
    -webkit-transform: translate(-0.1rem, -0.1rem);
    transform: translate(-0.1rem, -0.1rem);
  }
  60% {
    -webkit-transform: translate(0.1rem, 0.1rem);
    transform: translate(0.1rem, 0.1rem);
  }
  80% {
    -webkit-transform: translate(0.1rem, -0.1rem);
    transform: translate(0.1rem, -0.1rem);
  }
  to {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}

@-webkit-keyframes blockquote-animation {
  from {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
  to {
    -webkit-transform: translateY(70%);
    transform: translateY(70%);
  }
}

@keyframes blockquote-animation {
  from {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
  to {
    -webkit-transform: translateY(70%);
    transform: translateY(70%);
  }
}

/* === DISABLE ANIMATIONS === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    -webkit-animation-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
    -webkit-transition-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}