:root {
  --window-color: hsla(0, 0%, 93%, 1);
  --background-main: hsla(199, 19%, 88%, 1);
  --accent-line-top: hsla(199, 11%, 76%, 1);
  --text-600: #282828;
  --text-main: #454545;
  --text-300: #505050;
  --text-blue: #0074d2;
  --headers-shadow: 0 1px 0 hsla(0, 0%, 100%, 1);
  --overscroll-top: var(--accent-line-top);
  --overscroll-bottom: linear-gradient(to bottom,
  	hsla(185, 76%, 62%, 1.00),
  	hsl(195, 100%, 85%) 50%
  );
}

@media (prefers-color-scheme: dark) {
  :root {
    --window-color: hsla(0, 0%, 15%, 1);
    --background-main: hsla(216, 8%, 18%, 1);
    --accent-line-top: hsla(216, 4%, 13%, 1);
    --text-600: #d9dbe0;
    --text-main: #e8e8e8;
    --text-300: #b3b3b3;
    --text-blue: #0783e9;
    --headers-shadow: 0 1px 0 hsla(0, 0%, 0%, 1);
    --overscroll-top: var(--accent-line-top);
    --overscroll-bottom: linear-gradient(to bottom,
    	hsla(233, 81%, 48%, 1) 100%,
    	hsla(249, 100%, 54%, 1) 100% 50%
    );
  }
}
html {
  background: var(--background-main);
}

body {
  color: var(--text-main);
  font-family: "Maru Var", sans-serif;
  padding-bottom: 23rem;
}

main {
  background: var(--background-main);
  z-index: 2;
  box-shadow: 0 0.4rem 0.8rem 0 hsla(0, 0%, 0%, 0.05);
}

div.line-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent-line-top);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Draft Notice
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
div.draft {
  top: 2px;
  width: 100%;
  margin: 0;
  background: #ffb100;
  color: #000000;
  text-align: center;
}
div.draft strong {
  font-weight: 500;
}

/* Draft Notice [End] */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Nav Element
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
nav {
  height: 50px;
  align-items: center;
  display: flex;
  gap: 10px;
}
nav h2 {
  flex-grow: 1;
  text-align: center;
  font-family: "Pressura Var", "Inter Var", sans-serif;
  font-variation-settings: "wght" 400, "wdth" 110, "ital" 0.5;
  font-size: 1.2rem;
  opacity: 0.9;
}
nav h2 span {
  font-size: 1.4rem;
  font-variation-settings: "wght" 500, "wdth" 110, "ital" 0.3;
}
nav a {
  color: var(--text-600);
  text-decoration: none;
}
nav a:hover {
  color: var(--text-blue);
  text-decoration: underline;
}
nav img {
  height: 21px;
  width: 21px;
}

/* Nav [End] */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Header Element
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
header {
  margin-top: 6rem;
  margin-bottom: 11rem;
  font-family: "Pressura Var", "Inter Var", sans-serif;
}
header h1 {
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 0.04em;
  font-variation-settings: "wght" 550, "wdth" 100, "ital" 0.5;
  letter-spacing: -0.015em;
  text-shadow: var(--headers-shadow);
}
header h1 span.subtitle {
  font-size: 1.8rem;
  font-weight: 400;
  font-variation-settings: "wght" 400, "wdth" 100, "ital" 0.5;
  letter-spacing: -0.01em;
  opacity: 0.8;
}
header h1 a, header h1 a:visited, header h1 a:active, header h1 a:hover {
  color: inherit;
  text-decoration: none;
}
header p {
  text-align: center;
  font-size: 1.3rem;
  margin-top: 0.7em;
}
header p span {
  font-size: 1rem;
}

/* Header [End] */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Article
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
article {
  padding-bottom: 8rem;
  font-family: "Avenir", "Lato", "Inter Var", sans-serif;
  min-height: calc(100vh - 300px);
}
article p {
  font-size: 1.1rem;
  line-height: 1.65;
  padding-bottom: 1.64em;
}
article p a {
  color: var(--text-blue);
}
article p code {
  background: var(--accent-line-top);
  font-family: "Menlo", "PT Mono";
  padding: 0 0.2rem;
  border-radius: 0.2rem;
}
article h1, article h2, article h3 {
  font-family: "Pressura Var", "Avenir", "Inter Var", sans-serif;
  font-variation-settings: "wght" 600, "wdth" 120, "ital" 0.5;
}
article h1 {
  font-size: 2rem;
  letter-spacing: -0.009em;
  font-variation-settings: "wght" 700, "wdth" 120, "ital" 0.2;
  padding-bottom: 0.1em;
  color: #000;
  color: var(--text-600);
}
article h2 {
  font-size: 1.65rem;
  letter-spacing: -0.018em;
  font-variation-settings: "wght" 600, "wdth" 100, "ital" 0;
  padding-bottom: 0.08em;
  color: var(--text-main);
}
article h3 {
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  font-variation-settings: "wght" 500, "wdth" 100, "ital" 0.5;
  padding-bottom: 0.03em;
  color: var(--text-300);
}
article ol, article ul {
  list-style-position: outside;
  font-size: 1.05rem;
  padding-left: 2em;
  padding-bottom: 1.64em;
}
article ol > li {
  padding-bottom: 0.3em;
}
article ol > li::marker {
  font-weight: bold;
  color: var(--text-300);
}
article blockquote {
  background: var(--accent-line-top);
  padding: 1.64rem 1rem 0 1.35rem;
  margin-bottom: 1.9rem;
  border-radius: 0.5rem;
}
article pre {
  background: #0f0f0f;
  border-radius: 0.5rem;
  color: white;
  font-family: "Menlo", "PT Mono";
  font-size: 11pt;
  overflow-x: scroll;
  padding: 1.8rem 1.35rem;
  margin-bottom: 1.9rem;
}
article hr {
  width: 100%;
  height: 2px;
  margin-top: 0rem;
  margin-bottom: 5rem;
  background: var(--accent-line-top);
  border: none;
}
article img {
  border-radius: 0.3rem;
  box-shadow: 0 0.2rem 0.4rem 0 hsla(0, 0%, 0%, 0.05);
  transition: all 500ms;
}
article img:hover {
  transform: rotate(-1.7deg);
  box-shadow: 0 0.4rem 0.9rem 0 hsla(0, 0%, 0%, 0.09);
}

/* Article */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Index Pages (posts index, series index)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
main.index {
  box-shadow: none;
}

div.index.header {
  text-align: center;
  margin-top: 6rem;
  margin-bottom: 7rem;
}
div.index.header h1 {
  font-family: "Pressura Var", "Inter Var", sans-serif;
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 0.04em;
  font-variation-settings: "wght" 550, "wdth" 100, "ital" 0.5;
  letter-spacing: -0.015em;
  text-shadow: var(--headers-shadow);
}
div.index.header a {
  font-family: "Avenir", "Lato", "Inter Var", sans-serif;
  font-size: 1.1rem;
  line-height: 1.65;
  padding-bottom: 1.64em;
  color: var(--text-blue);
}

div.index.list {
  max-width: 30rem;
  padding-bottom: 17rem;
}
div.index.list h2 {
  text-align: center;
  font-family: "Pressura Var", "Inter Var", sans-serif;
  font-variation-settings: "wght" 400, "wdth" 110, "ital" 0.5;
  font-size: 1.2rem;
  opacity: 0.9;
  padding-bottom: 0.8rem;
}
div.index.list h2 span {
  font-size: 1.4rem;
  font-variation-settings: "wght" 500, "wdth" 110, "ital" 0.3;
}
div.index.list h2 a {
  color: var(--text-600);
}
div.index.list h2 a:hover {
  color: var(--text-blue);
  text-decoration: underline;
}
div.index.list ul li {
  list-style: none;
  margin-bottom: 1rem;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.15;
}
div.index.list ul li * {
  line-height: inherit;
}
div.index.list ul li span.subtitle {
  font-size: 1.2rem;
  font-weight: 400;
}
div.index.list ul li span.date {
  font-family: "Pressura Var";
  font-variation-settings: "wght" 500, "wdth" 100, "ital" 0.2;
  font-size: 1.2rem;
  opacity: 0.8;
  white-space: nowrap;
}
div.index.list ul li a {
  text-decoration: none;
  color: var(--text-main);
}
div.index.list ul li a:hover {
  color: var(--text-blue);
}
div.index.list > a {
  font-family: "Pressura Var", "Inter Var", sans-serif;
  font-variation-settings: "wght" 400, "wdth" 110, "ital" 0.5;
  font-size: 1.2rem;
  padding-bottom: 0.8rem;
  color: var(--text-300);
}

/* Index Pages (posts index, series index) [END]
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Footend
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.blank {
  height: 24rem;
  width: 100%;
}

#footend {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 24rem;
  padding: 6rem 1rem 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 1;
}
#footend > * {
  z-index: 1;
}
#footend > div.bg {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
#footend div.line {
  height: 2px;
  background: hsla(0, 0%, 100%, 0.8);
}
#footend div.top {
  z-index: 0;
  background-image: linear-gradient(to bottom, hsl(217, 100%, 50%) 0%, hsl(208, 89%, 64%) 18%, hsl(217, 100%, 74%) 32%, hsla(233, 76%, 83%, 0.81) 40%, hsla(264, 96%, 92%, 0.72) 52%, hsla(285, 100%, 94%, 0.57) 60%, hsla(280, 100%, 100%, 0) 100%);
}
#footend div.bottom {
  z-index: -1;
  background-image: linear-gradient(to top, hsl(182, 79%, 57%) 0%, hsl(193, 78%, 48%) 15%, hsl(197, 77%, 50%) 21%, hsl(203, 90%, 57%) 32%, hsl(208, 93%, 68%) 39%, hsla(208, 90%, 85%, 0) 100%);
}
#footend div.lighting {
  overflow-x: hidden;
}
#footend div.lighting > * {
  position: absolute;
  width: 120%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 4;
  mix-blend-mode: soft-light;
}
#footend div.lighting .m1 {
  opacity: 0.33;
  background-image: linear-gradient(274deg, rgba(238, 238, 238, 0) 0%, rgba(238, 238, 238, 0.06) 4%, rgba(238, 238, 238, 0.69) 5%, rgba(238, 238, 238, 0.79) 5%, rgba(238, 238, 238, 0.48) 7%, rgba(238, 238, 238, 0.1) 8%, rgba(238, 238, 238, 0.26) 19%, rgba(239, 239, 239, 0.82) 22%, rgba(239, 239, 239, 0.62) 24%, rgba(240, 240, 240, 0.19) 25%, rgba(240, 240, 240, 0.12) 26%, rgba(241, 241, 241, 0) 30%, rgba(242, 242, 242, 0) 33%, rgba(243, 243, 243, 0.33) 37%, rgba(243, 243, 243, 0.35) 39%, rgba(244, 244, 244, 0.26) 41%, rgba(244, 244, 244, 0) 42%, rgba(246, 246, 246, 0) 54%, rgba(246, 246, 246, 0.54) 55%, rgba(246, 246, 246, 0.81) 57%, rgba(247, 247, 247, 0.83) 60%, rgba(247, 247, 247, 0.44) 62%, rgba(248, 248, 248, 0.09) 64%, rgba(250, 250, 250, 0) 81%, rgba(251, 251, 251, 0.56) 86%, rgba(252, 252, 252, 0.64) 90%, rgba(252, 252, 252, 0.06) 93%, rgba(253, 253, 253, 0.07) 95%, rgba(255, 255, 255, 0) 100%);
  animation-name: lighting-movement-1;
  animation-duration: 29s;
  animation-fill-mode: forwards;
  animation-direction: normal;
  animation-iteration-count: infinite;
}
#footend div.lighting .m2 {
  opacity: 0.33;
  background-image: linear-gradient(274deg, rgba(238, 238, 238, 0) 0%, rgba(238, 238, 238, 0.01) 5%, rgba(238, 238, 238, 0.6) 6%, rgba(238, 238, 238, 0.51) 9%, rgba(238, 238, 238, 0.35) 10%, rgba(238, 238, 238, 0.49) 11%, rgba(238, 238, 238, 0.17) 12%, rgba(238, 238, 238, 0.26) 19%, rgba(239, 239, 239, 0.82) 24%, rgba(239, 239, 239, 0.62) 26%, rgba(240, 240, 240, 0.19) 27%, rgba(240, 240, 240, 0.12) 28%, rgba(241, 241, 241, 0) 31%, rgba(242, 242, 242, 0.44) 34%, rgba(242, 242, 242, 0.78) 35%, rgba(242, 242, 242, 0.62) 36%, rgba(243, 243, 243, 0.33) 37%, rgba(243, 243, 243, 0.35) 38%, rgba(244, 244, 244, 0) 40%, rgba(244, 244, 244, 0.18) 47%, rgba(244, 244, 244, 0.98) 48%, #F4F4F4 49%, rgba(246, 246, 246, 0.8) 50%, rgba(246, 246, 246, 0.28) 51%, rgba(246, 246, 246, 0.54) 53%, rgba(246, 246, 246, 0) 55%, rgba(248, 248, 248, 0) 60%, rgba(248, 248, 248, 0.41) 62%, rgba(248, 248, 248, 0.47) 63%, rgba(249, 249, 249, 0.76) 64%, rgba(249, 249, 249, 0) 65%, rgba(250, 250, 250, 0) 71%, rgba(251, 251, 251, 0.56) 74%, rgba(252, 252, 252, 0.87) 76%, rgba(252, 252, 252, 0.65) 77%, rgba(252, 252, 252, 0.72) 79%, rgba(253, 253, 253, 0.07) 83%, rgba(254, 254, 254, 0) 88%, rgba(254, 254, 254, 0.87) 92%, rgba(254, 254, 254, 0.63) 95%, rgba(255, 255, 255, 0) 97%, rgba(255, 255, 255, 0) 100%);
  animation-name: lighting-movement-2;
  animation-duration: 23s;
  animation-fill-mode: forwards;
  animation-direction: normal;
  animation-iteration-count: infinite;
}
#footend div.lighting .m3 {
  opacity: 0.25;
  background-image: linear-gradient(274deg, rgba(238, 238, 238, 0) 0%, rgba(238, 238, 238, 0.26) 8%, rgba(239, 239, 239, 0.82) 11%, rgba(239, 239, 239, 0.62) 15%, rgba(240, 240, 240, 0.19) 17%, rgba(240, 240, 240, 0.12) 18%, rgba(241, 241, 241, 0) 21%, rgba(242, 242, 242, 0) 24%, rgba(243, 243, 243, 0.33) 28%, rgba(243, 243, 243, 0.35) 34%, rgba(244, 244, 244, 0) 36%, rgba(244, 244, 244, 0.18) 40%, rgba(245, 245, 245, 0) 44%, rgba(245, 245, 245, 0.7) 46%, rgba(245, 245, 245, 0.71) 47%, rgba(245, 245, 245, 0.93) 48%, rgba(246, 246, 246, 0.71) 49%, rgba(246, 246, 246, 0.23) 51%, rgba(246, 246, 246, 0) 55%, rgba(250, 250, 250, 0) 61%, rgba(251, 251, 251, 0.56) 64%, rgba(252, 252, 252, 0.87) 68%, rgba(252, 252, 252, 0.72) 71%, rgba(253, 253, 253, 0.07) 74%, rgba(254, 254, 254, 0) 78%, rgba(254, 254, 254, 0.87) 87%, rgba(254, 254, 254, 0.63) 88%, rgba(255, 255, 255, 0) 90%, rgba(255, 255, 255, 0) 100%);
  animation-name: lighting-movement-3;
  animation-duration: 18s;
  animation-fill-mode: forwards;
  animation-direction: normal;
  animation-iteration-count: infinite;
}
#footend > div.blur {
  z-index: 1;
  backdrop-filter: blur(1.2rem);
  -webkit-backdrop-filter: blur(1.2rem);
}
#footend h1 {
  width: 90%;
  max-width: 24ch;
  margin: 1rem auto;
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: 0.12rem;
  color: hsl(0, 0%, 100%);
  text-align: center;
  font-family: "Unbounded Var";
  letter-spacing: -0.017em;
}
#footend div.engage {
  width: fit-content;
  min-width: 4rem;
  margin: 1.6rem auto;
  display: flex;
  align-items: center;
  padding: 0.4rem;
  border-radius: 100px;
  background: linear-gradient(to bottom, hsl(222, 100%, 54%) 0%, hsl(228, 100%, 58%) 49%, hsl(213, 100%, 55%) 100%);
  box-shadow: 0 7px 9px 1px hsla(0, 0%, 0%, 0.1);
}
#footend div.engage div.bg {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: inherit;
  z-index: 0;
}
#footend div.engage .bg.top {
  background: linear-gradient(to bottom, hsla(224, 100%, 96%, 0.82) 0%, hsla(226, 100%, 65%, 0.104) 23%, hsla(225, 100%, 64%, 0) 37%);
}
#footend div.engage .bg.bottom {
  background: linear-gradient(to bottom, rgba(74, 112, 255, 0) 71%, rgba(31, 241, 255, 0.71) 100%);
}
#footend div.engage .bg.blur {
  z-index: 1;
  backdrop-filter: blur(0.3rem);
  -webkit-backdrop-filter: blur(0.3rem);
}
#footend div.engage .bg.border {
  z-index: 2;
  box-shadow: inset 0 0 0 0.08rem rgba(0, 0, 0, 0.8);
  mix-blend-mode: overlay;
}
#footend div.engage p, #footend div.engage a {
  z-index: 2;
}
#footend div.engage p {
  color: white;
  font-size: 1.5rem;
}
#footend div.engage a {
  padding: 0.25rem 2.3rem;
  border-radius: 100px;
  font-family: "Inter Var", "Inter V", "Inter", sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.017em;
  text-decoration: none;
}
#footend div.engage a, #footend div.engage a:visited, #footend div.engage a:active {
  color: white;
}
#footend div.engage a:hover {
  background: linear-gradient(to bottom, #F4FDFF 0%, #C6E8FF 100%);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), inset 0 2px 2px 0 rgba(255, 255, 255, 0.5);
  border-radius: 100px;
  color: hsl(228, 100%, 58%);
}
#footend div.engage #copied {
  position: absolute;
  z-index: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: hsla(0, 0%, 100%, 0);
  font-size: 1.3rem;
  font-weight: 500;
}
#footend p.copyright {
  font-family: "Inter Var", "Inter V", "Inter", sans-serif;
  color: hsla(0, 0%, 100%, 0.8);
  padding-bottom: 1.8rem;
  margin-top: 3rem;
  width: 100%;
  text-align: center;
}

@keyframes copy-alert {
  0% {
    bottom: -1rem;
    color: hsla(0, 0%, 100%, 0);
  }
  8% {
    bottom: -2.5rem;
    color: hsla(0, 0%, 100%, 0.8);
  }
  80% {
    bottom: -2.5rem;
    color: hsla(0, 0%, 100%, 0.8);
  }
  100% {
    bottom: -3.5rem;
    color: hsla(0, 0%, 100%, 0);
  }
}
@media (max-width: 45rem) {
  #footend {
    padding: 6rem 0.2rem 0;
  }
  #footend div.process {
    padding: 0.8rem 0.5rem;
    margin-bottom: 2.3rem;
  }
  #footend div.process p {
    font-size: 1.4rem;
    padding: 0 0.2rem;
    font-weight: 500;
  }
  #footend h1 {
    width: 100%;
    font-size: 2.1rem;
  }
  #footend div.lighting {
    width: 200%;
    margin-left: -50%;
  }
}
@media (prefers-color-scheme: dark) {
  #footend div.top {
    background: linear-gradient(to bottom, hsl(290, 60%, 25%) 0%, hsl(267, 79%, 24%) 12%, hsl(260, 100%, 7%) 20%, hsl(258, 89%, 9%) 67%, hsl(255, 78%, 48%) 85%, hsl(233, 81%, 48%) 100%);
  }
  #footend div.line {
    background: hsla(210, 100%, 97%, 0.5);
    mix-blend-mode: soft-light;
  }
  #footend div.lighting {
    opacity: 0.2;
  }
}
@keyframes lighting-movement-1 {
  0% {
    opacity: 0;
    left: 20%;
    transform: scaleX(1);
  }
  5% {
    opacity: 0;
  }
  14% {
    opacity: 0.33;
  }
  17% {
    opacity: 0.1;
  }
  46% {
    opacity: 0.1;
    transform: scaleX(0.9);
  }
  53% {
    opacity: 0.33;
  }
  60% {
    opacity: 0.33;
  }
  68% {
    opacity: 0.1;
    transform: scaleX(1.1);
  }
  75% {
    opacity: 0.36;
  }
  84% {
    opacity: 0.3;
  }
  92% {
    opacity: 0.1;
  }
  97% {
    opacity: 0.28;
  }
  100% {
    opacity: 0;
    left: 0;
    transform: scaleX(1.15);
  }
}
@keyframes lighting-movement-2 {
  0% {
    opacity: 0;
    left: 5%;
    transform: scaleX(1);
  }
  7% {
    opacity: 0.21;
  }
  14% {
    opacity: 0.25;
  }
  21% {
    opacity: 0.05;
  }
  28% {
    opacity: 0.1;
    transform: scaleX(1.05);
  }
  31% {
    opacity: 0.21;
  }
  36% {
    opacity: 0.15;
  }
  38% {
    opacity: 0.22;
  }
  42% {
    opacity: 0.28;
  }
  50% {
    opacity: 0.05;
  }
  59% {
    opacity: 0.08;
    transform: scaleX(1.15);
  }
  64% {
    opacity: 0.25;
  }
  71% {
    opacity: 0.2;
  }
  76% {
    opacity: 0.05;
  }
  82% {
    opacity: 0;
  }
  93% {
    opacity: 0.23;
  }
  100% {
    opacity: 0;
    left: 0;
    transform: scaleX(1.2);
  }
}
@keyframes lighting-movement-3 {
  0% {
    opacity: 0;
    left: 10%;
    transform: scaleX(1);
  }
  10% {
    opacity: 0.3;
  }
  21% {
    opacity: 0.28;
  }
  27% {
    opacity: 0.09;
  }
  34% {
    opacity: 0;
    transform: scaleX(1);
  }
  39% {
    opacity: 0.25;
    transform: scaleX(1.05);
  }
  44% {
    opacity: 0.29;
  }
  50% {
    opacity: 0.14;
  }
  56% {
    opacity: 0;
  }
  63% {
    opacity: 0.28;
    transform: scaleX(1.1);
  }
  78% {
    opacity: 0.23;
  }
  83% {
    opacity: 0.31;
  }
  94% {
    opacity: 0.23;
  }
  100% {
    opacity: 0;
    left: -3%;
  }
}
/* Footend */