body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Exo', sans-serif;
}

.intro {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-image: url("");
  background-size: cover;
  background-position: center;
  padding: 0;

}

.lead {
  color: darkgray;
  font-size: 1.25rem;
}

#main {
  padding: 0;
}

#mutebtn {
  background-color: rgba(255, 255, 255, .05);
  color: white;
  border: none;
}

#hero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  padding: 0;
}

#video-background {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ensure the video maintains the cover look */
}

/* Fallback background image */
#hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: -1;
}

/* Media query for mobile devices */
@supports (-webkit-touch-callout: none) {


  #hero::after {
    background-image: url("");
    /* Show image on mobile */
  }
}

@media screen and (max-width: 767px) {


  #hero::after {
    background-image: url("");
    /* Show image on mobile */
  }
}


/* SPYRO FRONT */
.flex {
  position: relative;
}

.zindex-1 {
  z-index: 1;
}

.zindex-2 {
  z-index: 2;
}

.zindex-3 {
  z-index: 3;
}

.fly {
  animation: flyAnimation 2s infinite;
  /* Adjust the duration as needed */
}

@keyframes flyAnimation {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(20px);
    /* Adjust the vertical distance */
  }
}

.gems {
  animation: gemsAnimation 4s infinite 1s;
}

@keyframes gemsAnimation {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
    /* Adjust the vertical distance */
  }
}


/* BUTTON */
.button {
  font-family: "Open Sans", sans-serif;
  letter-spacing: 2px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.25rem;
  color: #9900e6;
  border: 3px solid;
  padding: 1rem 1.75em;
  -moz-box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
  -webkit-box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
  box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
  position: relative;
  display: inline-flex;
  background: transparent;
}

.button:hover {
  color: #00ffd5;
}

.button-second {
  font-family: "Open Sans", sans-serif;
  letter-spacing: 2px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.25rem;
  color: #ffc800;
  border: 3px solid;
  padding: 1rem 1.75em;
  -moz-box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
  -webkit-box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
  box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
  position: relative;
  display: inline-flex;
  background: transparent;
}

.button-second:hover {
  color: #9900e6;
}

.button:active {
  -moz-box-shadow: 0px 0px 0px 0px;
  -webkit-box-shadow: 0px 0px 0px 0px;
  box-shadow: 0px 0px 0px 0px;
  top: 5px;
  left: 5px;
}

/* menu */
a {
  cursor: pointer;
}

a:hover {
  text-decoration: none;
}


/* #Primary style
================================================== */

.section {
  position: relative;
  width: 100%;
  display: block;
}

.over-hide {
  overflow: hidden;
}

.full-height {
  height: 100vh;
}

/* #Navigation
================================================== */

.cd-header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
}

.header-wrapper {
  position: relative;
  width: calc(100% - 100px);
  margin-left: 50px;
}

.logo-wrap {
  position: absolute;
  display: block;
  left: 0;
  top: 40px;
  cursor: pointer;
}

.logo-wrap a {
  cursor: pointer;
  font-weight: 900;
  font-size: 20px;
  line-height: 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff;
  transition: all 0.3s ease-out;
}

.logo-wrap a span {
  color: #8167a9;
}

.logo-wrap a:hover {
  opacity: 0.9;
}

.nav-but-wrap {
  position: relative;
  margin-top: 26px;
  transition: all 0.3s ease-out;
  background-color: #1f2029;
  padding: 15px 10px 7px 10px;
  border: 1px solid #9900e6;
  -webkit-box-shadow: 0px 4px 13px -3px #000000;
  box-shadow: 0px 4px 13px -3px #000000;
}

.menu-icon {
  height: 30px;
  width: 30px;
  position: relative;
  z-index: 2;
  cursor: pointer;
  display: block;
}

.menu-icon__line {
  height: 2px;
  width: 30px;
  display: block;
  background-color: #fff;
  margin-bottom: 7px;
  cursor: pointer;
  -webkit-transition: background-color .5s ease, -webkit-transform .2s ease;
  transition: background-color .5s ease, -webkit-transform .2s ease;
  transition: transform .2s ease, background-color .5s ease;
  transition: transform .2s ease, background-color .5s ease, -webkit-transform .2s ease;
}

.menu-icon__line-left {
  width: 16.5px;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

.menu-icon__line-right {
  width: 16.5px;
  float: right;
  -webkit-transition: all 200ms linear;
  -moz-transition: all 200ms linear;
  -o-transition: all 200ms linear;
  -ms-transition: all 200ms linear;
  transition: all 200ms linear;
}

.menu-icon:hover .menu-icon__line-left,
.menu-icon:hover .menu-icon__line-right {
  width: 30px;
}

.nav {
  position: fixed;
  z-index: 98;
}

.nav:before,
.nav:after {
  content: "";
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(20, 21, 26, 0.6);
  border-bottom-left-radius: 200%;
  z-index: -1;
  -webkit-transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s;
  transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s;
  transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s;
  transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s;
  -webkit-transform: translateX(100%) translateY(-100%);
  transform: translateX(100%) translateY(-100%);
}

.nav:after {
  background: #9900e6;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.nav:before {
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}

.nav__content {
  position: fixed;
  visibility: hidden;
  top: 50%;
  margin-top: 20px;
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  width: 100%;
  text-align: center;
}

.nav__list {
  position: relative;
  padding: 0;
  margin: 0;
  z-index: 2;
}

.nav__list-item {
  position: relative;
  display: block;
  -webkit-transition-delay: 0.8s;
  transition-delay: 0.8s;
  opacity: 0;
  text-align: center;
  color: #ffffff;
  overflow: hidden;
  font-size: 8vh;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 3px;
  -webkit-transform: translate(100px, 0%);
  transform: translate(100px, 0%);
  -webkit-transition: opacity .2s ease, -webkit-transform .3s ease;
  transition: opacity .2s ease, -webkit-transform .3s ease;
  transition: opacity .2s ease, transform .3s ease;
  transition: opacity .2s ease, transform .3s ease, -webkit-transform .3s ease;
  margin-top: 0;
  margin-bottom: 0;
}

.nav__list-item a {
  position: relative;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.6);
  overflow: hidden;
  cursor: pointer;
  padding-left: 5px;
  padding-right: 5px;
  font-weight: 900;
  z-index: 2;
  display: inline-block;
  text-transform: uppercase;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

.nav__list-item a:after {
  position: absolute;
  content: '';
  top: 50%;
  margin-top: -2px;
  left: 50%;
  width: 0;
  height: 0;
  opacity: 0;
  background-color: #8167a9;
  z-index: 1;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

.nav__list-item a:hover:after {
  height: 4px;
  opacity: 1;
  left: 0;
  width: 100%;
}

.nav__list-item a:hover {
  color: rgb(0, 245, 167);
}

.nav__list-item.active-nav a {
  color: rgba(255, 255, 255, 1);
}

.nav__list-item.active-nav a:after {
  height: 4px;
  opacity: 1;
  left: 0;
  width: 100%;
}

body.nav-active .nav__content {
  visibility: visible;
}

body.nav-active .menu-icon__line {
  background-color: #fff;
  -webkit-transform: translate(0px, 0px) rotate(-45deg);
  transform: translate(0px, 0px) rotate(-45deg);
}

body.nav-active .menu-icon__line-left {
  width: 15px;
  -webkit-transform: translate(2px, 4px) rotate(45deg);
  transform: translate(2px, 4px) rotate(45deg);
}

body.nav-active .menu-icon__line-right {
  width: 15px;
  float: right;
  -webkit-transform: translate(-3px, -3.5px) rotate(45deg);
  transform: translate(-3px, -3.5px) rotate(45deg);
}

body.nav-active .menu-icon:hover .menu-icon__line-left,
body.nav-active .menu-icon:hover .menu-icon__line-right {
  width: 15px;
}

body.nav-active .nav {
  visibility: visible;
}

body.nav-active .nav:before,
body.nav-active .nav:after {
  -webkit-transform: translateX(0%) translateY(0%);
  transform: translateX(0%) translateY(0%);
  border-radius: 0;
}

body.nav-active .nav:after {
  -webkit-transition-delay: .1s;
  transition-delay: .1s;
}

body.nav-active .nav:before {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

body.nav-active .nav__list-item {
  opacity: 1;
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  -webkit-transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease;
  transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease;
  transition: opacity .3s ease, transform .3s ease, color .3s ease;
  transition: opacity .3s ease, transform .3s ease, color .3s ease, -webkit-transform .3s ease;
}

body.nav-active .nav__list-item:nth-child(0) {
  -webkit-transition-delay: 0.7s;
  transition-delay: 0.7s;
}

body.nav-active .nav__list-item:nth-child(1) {
  -webkit-transition-delay: 0.8s;
  transition-delay: 0.8s;
}

body.nav-active .nav__list-item:nth-child(2) {
  -webkit-transition-delay: 0.9s;
  transition-delay: 0.9s;
}

body.nav-active .nav__list-item:nth-child(3) {
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
}

body.nav-active .nav__list-item:nth-child(4) {
  -webkit-transition-delay: 1.1s;
  transition-delay: 1.1s;
}

body.nav-active .nav__list-item:nth-child(5) {
  -webkit-transition-delay: 1.2s;
  transition-delay: 1.2s;
}

body.nav-active .nav__list-item:nth-child(6) {
  -webkit-transition-delay: 1.3s;
  transition-delay: 1.3s;
}

body.nav-active .nav__list-item:nth-child(7) {
  -webkit-transition-delay: 1.4s;
  transition-delay: 1.4s;
}

body.nav-active .nav__list-item:nth-child(8) {
  -webkit-transition-delay: 1.5s;
  transition-delay: 1.5s;
}

body.nav-active .nav__list-item:nth-child(9) {
  -webkit-transition-delay: 1.6s;
  transition-delay: 1.6s;
}

body.nav-active .nav__list-item:nth-child(10) {
  -webkit-transition-delay: 1.7s;
  transition-delay: 1.7s;
}

.switch-wrap {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 10;
  transform: translateY(-50%);
  width: 100%;
  -webkit-transition: all 500ms linear;
  transition: all 500ms linear;
  margin: 0 auto;
  text-align: center;
}

.switch-wrap h1 {
  font-weight: 900;
  font-size: 46px;
  line-height: 1;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 40px;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

@media screen and (max-width: 580px) {
  .switch-wrap h1 {
    font-size: 32px;
  }
}

.switch-wrap p {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1;
  color: #8167a9;
  text-align: center;
  margin-top: 15px;
}

.switch-wrap p span {
  position: relative;
}

.switch-wrap p span:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 2px;
  background-color: #fff;
  left: 0;
  bottom: -4px;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

.switch-wrap p span:nth-child(2):before {
  opacity: 0;
}

#switch,
#circle {
  cursor: pointer;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

#switch {
  width: 60px;
  height: 8px;
  margin: 0 auto;
  text-align: center;
  border: 2px solid #000;
  border-radius: 27px;
  background: #8167a9;
  position: relative;
  display: inline-block;
}

#circle {
  position: absolute;
  top: -11px;
  left: -13px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: 0 4px 4px rgba(26, 53, 71, 0.25), 0 0 0 1px rgba(26, 53, 71, 0.07);
  background: #fff;
}

.switched {
  border-color: #8167a9 !important;
  background: #000 !important;
}

.switched #circle {
  left: 43px;
  background: #000;
}

/* #Light
================================================== */

body.light {
  background-color: #fff;
}

body.light .cursor,
body.light .cursor2,
body.light .cursor3 {
  mix-blend-mode: normal;
}

body.light .cursor2 {
  border: 2px solid #1f2029;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}

body.light .cursor2.hover {
  background: rgba(0, 0, 0, 0.06);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
  border-color: transparent;
}

body.light .logo-wrap a {
  color: #1f2029;
}

body.light .menu-icon__line {
  background-color: #1f2029;
}

body.light .nav:before {
  background: rgba(235, 235, 235, 0.6);
}

body.light .nav:after {
  background: rgba(250, 250, 250, 1);
}

body.light .nav__list-item a {
  color: rgba(0, 0, 0, 0.6);
}

body.light .nav__list-item a:hover {
  color: #1f2029;
}

body.light .nav__list-item.active-nav a {
  color: #1f2029;
}

body.light .switch-wrap h1 {
  color: #000;
}

body.light .switch-wrap p span:nth-child(2):before {
  opacity: 1;
  background-color: #000;
}

body.light .switch-wrap p span:nth-child(1):before {
  opacity: 0;
}

/* #Link to page
================================================== */

.link-to-portfolio {
  position: fixed;
  bottom: 40px;
  right: 50px;
  z-index: 200;
  cursor: pointer;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 3px;
  background-position: center center;
  background-size: 65%;
  background-repeat: no-repeat;
  background-image: url("");
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .1);
  transition: opacity .2s, border-radius .2s, box-shadow .2s;
  transition-timing-function: ease-out;
}

.link-to-portfolio:hover {
  opacity: 0.8;
  border-radius: 50%;
  box-shadow: 0 0 0 20px rgba(255, 255, 255, .1);
}


/* GLITCH EFFECT */
:root {
  --speed: 1;
  --delay: 0.5;
  --font-size: 24;
}

/**
 * Jump and translates around a bit
*/
.glitch--0 {
  -webkit-animation: glitch--0 4s infinite steps(1);
  animation: glitch--0 4s infinite steps(1);
}

.glitch--0 [data-char='F'],
.glitch--0 [data-char='I'],
.glitch--0 [data-char='O'],
.glitch--0 [data-char='E'] {
  --x-1: 50;
  --y-1: 50;
  -webkit-animation: jump-0 calc(var(--speed) * 1s) infinite steps(1);
  animation: jump-0 calc(var(--speed) * 1s) infinite steps(1);
}

.glitch--0 [data-char='O'] {
  --x-2: -20;
  --y-2: -25;
  --scale-1: 1.3;
  --scale-2: 0.75;
  --speed: 2;
}

.glitch--0 [data-char='F'],
.glitch--0 [data-char='I'] {
  --scale-1: 1.3;
  --scale-2: 0.75;
  --speed: 1.25;
  --x-2: 15;
  --y-2: -40;
}

.glitch--0 [data-char='E'] {
  --scale-1: 0.5;
  --scale-2: 0.5;
  --speed: 10;
  --x-1: 0;
  --x-2: 0;
  --y-1: 20;
  --y-2: 10;
}

/**
 * Slide sections of letters about
*/
.glitch--1 {
  --shift: 5;
  -webkit-animation: glitch--1 4s infinite steps(1);
  animation: glitch--1 4s infinite steps(1);
}

.glitch--1 [data-char='G'],
.glitch--1 [data-char='L'],
.glitch--1 [data-char='T'],
.glitch--1 [data-char='H'] {
  position: relative;
}

.glitch--1 [data-char='G']:after,
.glitch--1 [data-char='L']:after,
.glitch--1 [data-char='T']:after,
.glitch--1 [data-char='H']:after,
.glitch--1 [data-char='G']:before,
.glitch--1 [data-char='L']:before,
.glitch--1 [data-char='T']:before,
.glitch--1 [data-char='H']:before {
  content: attr(data-char);
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  color: #fff;
  -webkit-clip-path: var(--clip);
  clip-path: var(--clip);
}

.glitch--1 [data-char='G']:after,
.glitch--1 [data-char='L']:after,
.glitch--1 [data-char='T']:after,
.glitch--1 [data-char='H']:after {
  --clip: inset(0 0 calc(var(--split) * 1%) 0);
}

.glitch--1 [data-char='G']:before,
.glitch--1 [data-char='L']:before,
.glitch--1 [data-char='T']:before,
.glitch--1 [data-char='H']:before {
  --clip: inset(calc((95 - var(--split)) * 1%) 0 0 0);
}

.glitch--1 [data-char='G']:after,
.glitch--1 [data-char='L']:after,
.glitch--1 [data-char='G']:before,
.glitch--1 [data-char='L']:before {
  --split: 70;
  opacity: 0.75;
}

.glitch--1 [data-char='G']:after,
.glitch--1 [data-char='L']:after {
  --shift: -25;
}

.glitch--1 [data-char='G']:before,
.glitch--1 [data-char='L']:before {
  animation: glitch--1 5s 1s infinite steps(1) alternate-reverse;
  --shift: -50;
}

.glitch--1 [data-char='T'] {
  color: transparent;
}

.glitch--1 [data-char='T']:after,
.glitch--1 [data-char='T']:before {
  --split: 60;
  animation: glitch--1 3s 1s infinite steps(1) alternate-reverse;
}

.glitch--1 [data-char='T']:after {
  --shift: -25;
}

.glitch--1 [data-char='T']:before {
  --shift: 10;
}

.glitch--1 [data-char='H'] {
  color: transparent;
}

.glitch--1 [data-char='H']:after,
.glitch--1 [data-char='H']:before {
  --split: 50;
  color: #fff;
}

.glitch--1 [data-char='H']:after {
  -webkit-animation: drop--1 2s 1s infinite steps(1);
  animation: drop--1 2s 1s infinite steps(1);
}

.glitch--2 [data-char='G'] {
  --scale: 1.75;
  -webkit-animation: scale 4s infinite steps(1);
  animation: scale 4s infinite steps(1);
}

.glitch--2 [data-char='T'],
.glitch--2 [data-char='C'] {
  -webkit-animation: shrink 5s infinite steps(1), shift 4s infinite steps(1);
  animation: shrink 5s infinite steps(1), shift 4s infinite steps(1);
}

.glitch--2 [data-char='L'],
.glitch--2 [data-char='I'] {
  --scale: 0.65;
  -webkit-animation: scale 5s infinite steps(1);
  animation: scale 5s infinite steps(1);
}

.glitch--2 [data-char='H'] {
  -webkit-animation: shift 5s infinite steps(1);
  animation: shift 5s infinite steps(1);
}

.glitch--3 [data-char] {
  --split: 50;
  color: transparent;
  position: relative;
  animation: glitch--3 1.5s infinite ease-in-out alternate-reverse;
}

.glitch--3 [data-char]:after,
.glitch--3 [data-char]:before {
  content: attr(data-char);
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  color: #fff;
  -webkit-clip-path: var(--clip);
  clip-path: var(--clip);
}

.glitch--3 [data-char]:after {
  transform: translate(calc(var(--shift) * 1%), 0);
  --clip: inset(0 0 calc(var(--split) * 1%) 0);
  text-shadow: calc(var(--shadow) * 1px) calc(var(--shadow) * 1px) #f00;
}

.glitch--3 [data-char]:before {
  --clip: inset(calc((95 - var(--split)) * 1%) 0 0 0);
}

.glitch--4 [data-char] {
  --delay: 0;
  --speed: 5;
  --skew: 25;
  -webkit-animation: skew 5s infinite steps(1) alternate, shrink calc(var(--speed) * 1s) calc(var(--delay) * 1s) infinite steps(1);
  animation: skew 5s infinite steps(1) alternate, shrink calc(var(--speed) * 1s) calc(var(--delay) * 1s) infinite steps(1);
}

.glitch--4 [data-char='G'] {
  --speed: 4;
  --delay: 2;
}

.glitch--4 [data-char='T'],
.glitch--4 [data-char='C'] {
  --speed: 6;
  --delay: 1;
  transform-origin: bottom;
}

.glitch--4 [data-char='I'] {
  --skew: -10;
  --speed: 10;
  --delay: 3;
}

.glitch--5 [data-char] {
  position: relative;
  -webkit-animation: glitch--5 2s infinite alternate, scale 4s -2s infinite steps(1);
  animation: glitch--5 2s infinite alternate, scale 4s -2s infinite steps(1);
}

.glitch--5 [data-char]:after,
.glitch--5 [data-char]:before {
  content: attr(data-char);
  transform: skew(calc(var(--skew) * 1deg));
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  color: #fff;
  opacity: 0.75;
}

.glitch--5 [data-char]:after {
  text-shadow: calc(var(--spread) * -1px) calc(var(--spread) * -1px) #f00;
}

.glitch--5 [data-char]:before {
  text-shadow: calc(var(--spread) * 1px) calc(var(--spread) * 1px) #bada55;
}

.glitch--5 [data-char='I'] {
  --scale: 1.2;
}

.glitch--5 [data-char='C'] {
  --scale: 1.5;
}

.glitch--5 [data-char='H'] {
  --scale: 0.5;
}

.glitch--6 [data-char] {
  -webkit-animation: flicker calc(var(--speed, 4) * 1s) calc(var(--delay, 0) * 1s) infinite steps(1);
  animation: flicker calc(var(--speed, 4) * 1s) calc(var(--delay, 0) * 1s) infinite steps(1);
  opacity: var(--opacity, 1);
  --speed: calc(var(--char-index) + 1);
  --delay: var(--char-index);
}

.glitch--7 [data-char] {
  --scale: 1.15;
  -webkit-animation: scale calc(var(--speed, 4) * 1s) calc(var(--delay, 0) * 1s) infinite steps(1), shrink calc(var(--speed, 4) * 1s) calc(var(--delay, 0) * 1s) infinite steps(1);
  animation: scale calc(var(--speed, 4) * 1s) calc(var(--delay, 0) * 1s) infinite steps(1), shrink calc(var(--speed, 4) * 1s) calc(var(--delay, 0) * 1s) infinite steps(1);
  opacity: var(--opacity, 1);
  --speed: calc(var(--char-index) + 2);
  --delay: var(--char-index);
}

.glitch--8 [data-char] {
  --split: 50;
  color: transparent;
  position: relative;
}

.glitch--8 [data-char]:after,
.glitch--8 [data-char]:before {
  content: attr(data-char);
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  color: #fff;
  -webkit-clip-path: var(--clip);
  clip-path: var(--clip);
}

.glitch--8 [data-char]:after {
  --clip: inset(0 0 calc(var(--split) * 1%) 0);
  --shift-y: -20;
  --shift-x: 50;
  -webkit-animation: shift 3s infinite steps(1);
  animation: shift 3s infinite steps(1);
}

.glitch--8 [data-char]:before {
  --shift-x: -50;
  -webkit-animation: shift 4s infinite steps(1);
  animation: shift 4s infinite steps(1);
  --clip: inset(calc((95 - var(--split)) * 1%) 0 0 0);
}

.glitch--8 [data-char="C"]:after,
.glitch--8 [data-char="H"]:after {
  --shift-y: 25;
  --shift-x: 0;
}

.glitch--9 [data-char] {
  --split: 65;
  color: transparent;
  position: relative;
}

.glitch--9 [data-char]:after,
.glitch--9 [data-char]:before {
  content: attr(data-char);
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  color: #fff;
  -webkit-clip-path: var(--clip);
  clip-path: var(--clip);
  -webkit-animation: shift calc(var(--speed, 4) * 1s) infinite steps(1);
  animation: shift calc(var(--speed, 4) * 1s) infinite steps(1);
}

.glitch--9 [data-char='G']:after,
.glitch--9 [data-char='T']:after,
.glitch--9 [data-char='C']:after,
.glitch--9 [data-char='H']:after {
  --clip: inset(0 calc(var(--split) * 1%) 0 0);
  --shift-y: 0;
  --shift-x: -10;
  --speed: 2;
}

.glitch--9 [data-char='G']:before,
.glitch--9 [data-char='T']:before,
.glitch--9 [data-char='C']:before,
.glitch--9 [data-char='H']:before {
  --shift-x: 0;
  --shift-y: -15;
  --speed: 5;
  --clip: inset(0 0 0 calc((99 - var(--split)) * 1%));
}

.glitch--9 [data-char='L'],
.glitch--9 [data-char='I'] {
  --split: 50;
}

.glitch--9 [data-char='L']:after,
.glitch--9 [data-char='I']:after {
  --clip: inset(0 0 calc(var(--split) * 1%) 0);
  --shift-y: 0;
  --shift-x: 25;
  --speed: 3;
}

.glitch--9 [data-char='L']:before,
.glitch--9 [data-char='I']:before {
  --shift-x: 0;
  --shift-y: 20;
  --speed: 5;
  --clip: inset(calc((99 - var(--split)) * 1%) 0 0 0);
}

.glitch--9 [data-char='G']:after {
  --shift-y: -20;
}

.glitch--9 [data-char='G']:before {
  --shift-y: 20;
}

.glitch--10 [data-char] {
  --txt: attr(data-char);
  color: transparent;
  position: relative;
}

.glitch--10 [data-char]:after {
  content: var(--txt);
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  color: #fff;
  -webkit-animation: flash-letter calc(var(--speed, 3) * 1s) calc(var(--delay, 0) * 1s) infinite, scale calc(var(--speed, 3) * 1s) calc(var(--delay, 0) * 1s) infinite steps(1);
  animation: flash-letter calc(var(--speed, 3) * 1s) calc(var(--delay, 0) * 1s) infinite, scale calc(var(--speed, 3) * 1s) calc(var(--delay, 0) * 1s) infinite steps(1);
}

.glitch--10 [data-char='G'] {
  --speed: 2;
  --delay: 0;
  --letter-1: "X";
  --letter-2: "∞";
  --letter-3: "(";
  --letter-4: "…";
}

.glitch--10 [data-char='I'] {
  --speed: 10;
  --delay: 4;
  --letter-3: "ç";
  --letter-4: "∂";
}

.glitch--10 [data-char='C'],
.glitch--10 [data-char='H'] {
  --scale: 0.75;
  --speed: 6;
  --delay: 2;
  --letter-2: "à";
  --letter-4: "¶";
}

.glitch--11 [data-char] {
  color: transparent;
  position: relative;
  --speed: calc((var(--char-index) + 1) * 2);
  --delay: var(--char-index);
}

.glitch--11 [data-char]:after,
.glitch--11 [data-char]:before {
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  color: #fff;
}

.glitch--11 [data-char]:after {
  content: attr(data-char);
  animation: hide calc(var(--speed, 2) * 1s) calc(var(--delay, 0) * 1s) infinite ease alternate-reverse both;
}

.glitch--11 [data-char]:before {
  color: #cccfff;
  content: var(--txt);
  animation: reveal calc(var(--speed, 2) * 1s) calc(var(--delay, 0) * 1s) infinite ease alternate-reverse both;
}

.glitch--11 [data-char='G'] {
  --txt: "S";
}

.glitch--11 [data-char='L'] {
  --txt: "E";
}

.glitch--11 [data-char='I'] {
  --txt: "C";
}

.glitch--11 [data-char='T'] {
  --txt: "R";
}

.glitch--11 [data-char='C'] {
  --txt: "E";
}

.glitch--11 [data-char='H'] {
  --txt: "T";
}

.glitch--12 [data-char] {
  --split: 70;
  color: transparent;
  position: relative;
}

.glitch--12 [data-char]:after,
.glitch--12 [data-char]:before {
  content: attr(data-char);
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  color: #fff;
  -webkit-clip-path: var(--clip);
  clip-path: var(--clip);
}

.glitch--12 [data-char]:after {
  --clip: inset(0 0 calc(var(--split) * 1%) 0);
  --shift-x: -125;
  -webkit-animation: shift 4s infinite steps(1);
  animation: shift 4s infinite steps(1);
}

.glitch--12 [data-char]:before {
  -webkit-animation: shift 8s infinite steps(1);
  animation: shift 8s infinite steps(1);
  --shift-x: 50;
  --shift-y: 50;
  --clip: inset(calc((95 - var(--split)) * 1%) 0 0 0);
}

.glitch--12 [data-char='G'] {
  -webkit-animation: squash 3s infinite steps(2);
  animation: squash 3s infinite steps(2);
}

.glitch--12 [data-char='C'] {
  -webkit-animation: squash 4s infinite steps(2);
  animation: squash 4s infinite steps(2);
}

.glitch--12 [data-char='H'] {
  --scale: 1.5;
  -webkit-animation: squash 4s infinite steps(2);
  animation: squash 4s infinite steps(2);
}

/**
 * Utility animations
*/
/**
 * Themeing
*/
body {
  background: #111;
  font-family: 'Exo', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  --font-size: 20;
}

@media (min-width: 768px) {
  body {
    --font-size: 48;
  }
}

.container {
  padding: 5em auto;
  min-height: 85vh;
  overflow: hidden;
}

.char {
  color: #fff;
  display: inline-block;
}

@-webkit-keyframes glitch--0 {

  0%,
  50%,
  58% {
    transform: translate(0, 0) scale(1);
  }

  52% {
    transform: translate(-25%, 10%) scale(0.85);
  }

  56% {
    transform: translate(5%, -20%) scale(1.25);
  }
}

@keyframes glitch--0 {

  0%,
  50%,
  58% {
    transform: translate(0, 0) scale(1);
  }

  52% {
    transform: translate(-25%, 10%) scale(0.85);
  }

  56% {
    transform: translate(5%, -20%) scale(1.25);
  }
}

@-webkit-keyframes jump-0 {

  0%,
  50%,
  60% {
    transform: translate(0, 0) scale(1);
  }

  52% {
    transform: translate(calc(var(--x-1) * 1%), calc(var(--y-1) * 1%)) scale(var(--scale-1));
  }

  54% {
    transform: translate(calc(var(--x-2) * 1%), calc(var(--y-2) * 1%)) scale(var(--scale-2));
  }
}

@keyframes jump-0 {

  0%,
  50%,
  60% {
    transform: translate(0, 0) scale(1);
  }

  52% {
    transform: translate(calc(var(--x-1) * 1%), calc(var(--y-1) * 1%)) scale(var(--scale-1));
  }

  54% {
    transform: translate(calc(var(--x-2) * 1%), calc(var(--y-2) * 1%)) scale(var(--scale-2));
  }
}

@-webkit-keyframes glitch--1 {

  0%,
  53%,
  57%,
  100% {
    transform: translate(0, 0);
  }

  55% {
    transform: translate(calc(var(--shift) * 1%), 0);
  }
}

@keyframes glitch--1 {

  0%,
  53%,
  57%,
  100% {
    transform: translate(0, 0);
  }

  55% {
    transform: translate(calc(var(--shift) * 1%), 0);
  }
}

@-webkit-keyframes drop--1 {

  0%,
  50%,
  60%,
  100% {
    transform: translate(0, 0);
  }

  54% {
    transform: translate(0, 25%);
  }

  58% {
    transform: translate(0, -50%);
  }
}

@keyframes drop--1 {

  0%,
  50%,
  60%,
  100% {
    transform: translate(0, 0);
  }

  54% {
    transform: translate(0, 25%);
  }

  58% {
    transform: translate(0, -50%);
  }
}

@-webkit-keyframes glitch--3 {
  0% {
    --split: 20;
    --shift: 15;
    --shadow: -2;
  }

  5% {
    --split: 30;
    --shift: 15;
    --shadow: -2;
  }

  10% {
    --split: 80;
    --shift: 10;
    --shadow: -2;
  }

  15% {
    --split: 55;
    --shift: 10;
    --shadow: -2;
  }

  20%,
  50% {
    --split: 0;
    --shift: 0;
    --shadow: 0;
  }

  100% {
    --split: 0;
    --shift: 0;
    --shadow: 0;
  }
}

@keyframes glitch--3 {
  0% {
    --split: 20;
    --shift: 15;
    --shadow: -2;
  }

  5% {
    --split: 30;
    --shift: 15;
    --shadow: -2;
  }

  10% {
    --split: 80;
    --shift: 10;
    --shadow: -2;
  }

  15% {
    --split: 55;
    --shift: 10;
    --shadow: -2;
  }

  20%,
  50% {
    --split: 0;
    --shift: 0;
    --shadow: 0;
  }

  100% {
    --split: 0;
    --shift: 0;
    --shadow: 0;
  }
}

@-webkit-keyframes glitch--5 {
  0% {
    --spread: 3;
    --skew: 0;
  }

  5% {
    --spread: -1;
  }

  10% {
    --spread: -4;
    --skew: 5;
  }

  12% {
    --spread: 3;
    --skew: 3;
  }

  15% {
    --spread: 1;
  }

  18% {
    --spread: 4;
    --skew: -4;
  }

  25%,
  100% {
    --skew: 0;
    --spread: 0;
  }
}

@keyframes glitch--5 {
  0% {
    --spread: 3;
    --skew: 0;
  }

  5% {
    --spread: -1;
  }

  10% {
    --spread: -4;
    --skew: 5;
  }

  12% {
    --spread: 3;
    --skew: 3;
  }

  15% {
    --spread: 1;
  }

  18% {
    --spread: 4;
    --skew: -4;
  }

  25%,
  100% {
    --skew: 0;
    --spread: 0;
  }
}

@-webkit-keyframes flash-letter {

  0%,
  25%,
  100% {
    content: attr(data-char);
  }

  5% {
    content: var(--letter-1, attr(data-char));
  }

  10% {
    content: var(--letter-2, attr(data-char));
  }

  15% {
    content: var(--letter-3, attr(data-char));
  }

  20% {
    content: var(--letter-4, attr(data-char));
  }
}

@keyframes flash-letter {

  0%,
  25%,
  100% {
    content: attr(data-char);
  }

  5% {
    content: var(--letter-1, attr(data-char));
  }

  10% {
    content: var(--letter-2, attr(data-char));
  }

  15% {
    content: var(--letter-3, attr(data-char));
  }

  20% {
    content: var(--letter-4, attr(data-char));
  }
}

@-webkit-keyframes reveal {
  0% {
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
  }

  10% {
    clip-path: inset(70% 0 0 0);
    -webkit-clip-path: inset(70% 0 0 0);
  }

  20% {
    clip-path: inset(85% 0 0 0);
    -webkit-clip-path: inset(85% 0 0 0);
  }

  30% {
    clip-path: inset(5% 0 0 0);
    -webkit-clip-path: inset(5% 0 0 0);
  }

  40% {
    clip-path: inset(45% 0 0 0);
    -webkit-clip-path: inset(45% 0 0 0);
  }

  50%,
  100% {
    clip-path: inset(100% 0 0 0);
    -webkit-clip-path: inset(100% 0 0 0);
  }
}

@keyframes reveal {
  0% {
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
  }

  10% {
    clip-path: inset(70% 0 0 0);
    -webkit-clip-path: inset(70% 0 0 0);
  }

  20% {
    clip-path: inset(85% 0 0 0);
    -webkit-clip-path: inset(85% 0 0 0);
  }

  30% {
    clip-path: inset(5% 0 0 0);
    -webkit-clip-path: inset(5% 0 0 0);
  }

  40% {
    clip-path: inset(45% 0 0 0);
    -webkit-clip-path: inset(45% 0 0 0);
  }

  50%,
  100% {
    clip-path: inset(100% 0 0 0);
    -webkit-clip-path: inset(100% 0 0 0);
  }
}

@-webkit-keyframes hide {
  0% {
    clip-path: inset(0 0 100% 0);
    -webkit-clip-path: inset(0 0 100% 0);
  }

  10% {
    clip-path: inset(0 0 30% 0);
    -webkit-clip-path: inset(0 0 30% 0);
  }

  20% {
    clip-path: inset(0 0 15% 0);
    -webkit-clip-path: inset(0 0 15% 0);
  }

  30% {
    clip-path: inset(0 0 95% 0);
    -webkit-clip-path: inset(0 0 95% 0);
  }

  40% {
    clip-path: inset(0 0 55% 0);
    -webkit-clip-path: inset(0 0 55% 0);
  }

  50%,
  100% {
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
  }
}

@keyframes hide {
  0% {
    clip-path: inset(0 0 100% 0);
    -webkit-clip-path: inset(0 0 100% 0);
  }

  10% {
    clip-path: inset(0 0 30% 0);
    -webkit-clip-path: inset(0 0 30% 0);
  }

  20% {
    clip-path: inset(0 0 15% 0);
    -webkit-clip-path: inset(0 0 15% 0);
  }

  30% {
    clip-path: inset(0 0 95% 0);
    -webkit-clip-path: inset(0 0 95% 0);
  }

  40% {
    clip-path: inset(0 0 55% 0);
    -webkit-clip-path: inset(0 0 55% 0);
  }

  50%,
  100% {
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
  }
}

@-webkit-keyframes squash {

  0%,
  48%,
  52%,
  100% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(var(--scale, 0));
  }
}

@keyframes squash {

  0%,
  48%,
  52%,
  100% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(var(--scale, 0));
  }
}

@-webkit-keyframes flicker {

  0%,
  20% {
    --opacity: 0.25;
  }

  10%,
  30%,
  40%,
  70%,
  80%,
  90%,
  100% {
    --opacity: 1;
  }
}

@keyframes flicker {

  0%,
  20% {
    --opacity: 0.25;
  }

  10%,
  30%,
  40%,
  70%,
  80%,
  90%,
  100% {
    --opacity: 1;
  }
}

@-webkit-keyframes skew {

  0%,
  40%,
  48%,
  100% {
    transform: skew(0deg);
  }

  44% {
    transform: skew(calc(var(--skew) * 1deg));
  }
}

@keyframes skew {

  0%,
  40%,
  48%,
  100% {
    transform: skew(0deg);
  }

  44% {
    transform: skew(calc(var(--skew) * 1deg));
  }
}

@-webkit-keyframes scale {

  0%,
  47%,
  55%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(var(--scale));
  }
}

@keyframes scale {

  0%,
  47%,
  55%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(var(--scale));
  }
}

@-webkit-keyframes shrink {

  0%,
  45%,
  53%,
  100% {
    text-transform: uppercase;
  }

  50% {
    text-transform: lowercase;
  }
}

@keyframes shrink {

  0%,
  45%,
  53%,
  100% {
    text-transform: uppercase;
  }

  50% {
    text-transform: lowercase;
  }
}

@-webkit-keyframes shift {

  0%,
  68%,
  72%,
  100% {
    transform: translate(0, 0);
  }

  70% {
    transform: translate(calc(var(--shift-x, 25) * 1%), calc(var(--shift-y, 0) * 1%));
  }
}

@keyframes shift {

  0%,
  68%,
  72%,
  100% {
    transform: translate(0, 0);
  }

  70% {
    transform: translate(calc(var(--shift-x, 25) * 1%), calc(var(--shift-y, 0) * 1%));
  }
}

/* body gradient */


/* cards */
:root {
  --color1: rgb(0, 231, 255);
  --color2: rgb(255, 0, 231);
  --solscanfront: url("solscan.jpg");
  --twitterfront: url("twitter.jpg");
  --telegramfront: url("telegram.jpg");
  --geckofront: url("gecko.jpg");
  --degemfront: url("urn:scrapbook:download:error:https://dopeoneth.xyz/images/degem.jpg");
}

.card:hover .txt {
  display: flex;
  /* Display the text when .card is hovered */
  align-items: center;
  justify-content: center;
}

.card .txt {
  display: none;
  /* Initially hide the text */
  font-size: 1.25rem;
  font-weight: bold;
  align-items: center;
}

.card {
  width: 71.5vw;
  height: 100vw;
  position: relative;
  overflow: hidden;
  margin: 20px;
  overflow: hidden;
  z-index: 10;
  touch-action: none;
  border-radius: 5%/3.5%;
  box-shadow: 8px 9px 0px -1px var(--color1), -7px -7px 10px -5px transparent, 7px 7px 10px -5px transparent, 0 0 5px 0px rgba(255, 255, 255, 0), 0 55px 35px -20px rgba(0, 0, 0, 0.5);
  transition: transform 0.5s ease, box-shadow 0.2s ease;
  will-change: transform, filter;
  background-color: #040712;
  background-image: var(--front);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  transform-origin: center;
  border: 5px solid #9900e6;
  transition: transform 0.5s ease, box-shadow 0.2s ease, background-color 0.3s ease, background-image 0.3s ease;
  /* Add background-color and background-image transitions */

}

@media screen and (min-width: 600px) {
  .card {
    width: clamp(12.9vw, 61vh, 18vw);
    height: clamp(18vw, 85vh, 25.2vw);
  }
}

.card:hover {
  background-color: rgba(153, 0, 230, .5);
  /* Purple background color */
  background-image: none;
  /* Remove background image on hover */
  box-shadow: 8px 9px 0px -1px #9900e6, -7px -7px 10px -5px transparent, 7px 7px 10px -5px transparent, 0 0 5px 0px rgba(255, 255, 255, 0), 0 55px 35px -20px rgba(0, 0, 0, 0.5);
  transform: scale(1.05);
  /* Increase size on hover */
  box-shadow: -20px -20px 30px -25px rgba(153, 0, 230, 1);
}

.card.solscan {
  --color4: #00f694;
  --color5: #b98cce;
  --front: var(--solscanfront);
}

.card.twitter {
  --color4: #00f694;
  --color5: #b98cce;
  --front: var(--twitterfront);
}

.card.telegram {
  --color4: #00f694;
  --color5: #b98cce;
  --front: var(--telegramfront);
}

.card.gecko {
  --color4: #00f694;
  --color5: #b98cce;
  --front: var(--geckofront);
}

.card.dextools {
  --color4: #00f694;
  --color5: #b98cce;
  --front: var(--dextoolsfront);
}

.card.degem {
  --color4: #00f694;
  --color5: #b98cce;
  --front: var(--degemfront);
}

.card:before,
.card:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-repeat: no-repeat;
  opacity: 0.5;
  mix-blend-mode: color-dodge;
  transition: all 0.33s ease;
}

.card:before {
  background-position: 50% 50%;
  background-size: 300% 300%;
  background-image: linear-gradient(115deg, transparent 0%, var(--color1) 25%, transparent 47%, transparent 53%, var(--color2) 75%, transparent 100%);
  opacity: 0.5;
  filter: brightness(0.5) contrast(1);
  z-index: 1;
}

.card:after {
  opacity: 1;
  background-image: url("sparkles.gif"), url("holo.png"), linear-gradient(125deg, #ff008450 15%, #fca40040 30%, #ffff0030 40%, #00ff8a20 60%, #00cfff40 70%, #cc4cfa50 85%);
  background-position: 50% 50%;
  background-size: 160%;
  background-blend-mode: overlay;
  z-index: 2;
  filter: brightness(0) contrast(1);
  transition: all 0.33s ease;
  mix-blend-mode: color-dodge;
  opacity: 0.75;
}

.card.active:after,
.card:hover:after {
  filter: brightness(1) contrast(1);
  opacity: 1;
}

.card.active,
.card:hover {
  -webkit-animation: none;
  animation: none;
  transition: box-shadow 0.1s ease-out;
}

.card.active:before,
.card:hover:before {
  -webkit-animation: none;
  animation: none;
  background-image: linear-gradient(110deg, transparent 25%, var(--color1) 48%, var(--color2) 52%, transparent 75%);
  background-position: 50% 50%;
  background-size: 250% 250%;
  opacity: 0.88;
  filter: brightness(0.66) contrast(1.33);
  transition: none;
}

.card.active:before,
.card:hover:before,
.card.active:after,
.card:hover:after {
  -webkit-animation: none;
  animation: none;
  transition: none;
}

.card.animated {
  transition: none;
  -webkit-animation: holoCard 12s ease 0s 1;
  animation: holoCard 12s ease 0s 1;
}

.card.animated:before {
  transition: none;
  -webkit-animation: holoGradient 12s ease 0s 1;
  animation: holoGradient 12s ease 0s 1;
}

.card.animated:after {
  transition: none;
  -webkit-animation: holoSparkle 12s ease 0s 1;
  animation: holoSparkle 12s ease 0s 1;
}

@-webkit-keyframes holoSparkle {

  0%,
  100% {
    opacity: 0.75;
    background-position: 50% 50%;
    filter: brightness(1.2) contrast(1.25);
  }

  5%,
  8% {
    opacity: 1;
    background-position: 40% 40%;
    filter: brightness(0.8) contrast(1.2);
  }

  13%,
  16% {
    opacity: 0.5;
    background-position: 50% 50%;
    filter: brightness(1.2) contrast(0.8);
  }

  35%,
  38% {
    opacity: 1;
    background-position: 60% 60%;
    filter: brightness(1) contrast(1);
  }

  55% {
    opacity: 0.33;
    background-position: 45% 45%;
    filter: brightness(1.2) contrast(1.25);
  }
}

@keyframes holoSparkle {

  0%,
  100% {
    opacity: 0.75;
    background-position: 50% 50%;
    filter: brightness(1.2) contrast(1.25);
  }

  5%,
  8% {
    opacity: 1;
    background-position: 40% 40%;
    filter: brightness(0.8) contrast(1.2);
  }

  13%,
  16% {
    opacity: 0.5;
    background-position: 50% 50%;
    filter: brightness(1.2) contrast(0.8);
  }

  35%,
  38% {
    opacity: 1;
    background-position: 60% 60%;
    filter: brightness(1) contrast(1);
  }

  55% {
    opacity: 0.33;
    background-position: 45% 45%;
    filter: brightness(1.2) contrast(1.25);
  }
}

@-webkit-keyframes holoGradient {

  0%,
  100% {
    opacity: 0.5;
    background-position: 50% 50%;
    filter: brightness(0.5) contrast(1);
  }

  5%,
  9% {
    background-position: 100% 100%;
    opacity: 1;
    filter: brightness(0.75) contrast(1.25);
  }

  13%,
  17% {
    background-position: 0% 0%;
    opacity: 0.88;
  }

  35%,
  39% {
    background-position: 100% 100%;
    opacity: 1;
    filter: brightness(0.5) contrast(1);
  }

  55% {
    background-position: 0% 0%;
    opacity: 1;
    filter: brightness(0.75) contrast(1.25);
  }
}

@keyframes holoGradient {

  0%,
  100% {
    opacity: 0.5;
    background-position: 50% 50%;
    filter: brightness(0.5) contrast(1);
  }

  5%,
  9% {
    background-position: 100% 100%;
    opacity: 1;
    filter: brightness(0.75) contrast(1.25);
  }

  13%,
  17% {
    background-position: 0% 0%;
    opacity: 0.88;
  }

  35%,
  39% {
    background-position: 100% 100%;
    opacity: 1;
    filter: brightness(0.5) contrast(1);
  }

  55% {
    background-position: 0% 0%;
    opacity: 1;
    filter: brightness(0.75) contrast(1.25);
  }
}

@-webkit-keyframes holoCard {

  0%,
  100% {
    transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
  }

  5%,
  8% {
    transform: rotateZ(0deg) rotateX(6deg) rotateY(-20deg);
  }

  13%,
  16% {
    transform: rotateZ(0deg) rotateX(-9deg) rotateY(32deg);
  }

  35%,
  38% {
    transform: rotateZ(3deg) rotateX(12deg) rotateY(20deg);
  }

  55% {
    transform: rotateZ(-3deg) rotateX(-12deg) rotateY(-27deg);
  }
}

@keyframes holoCard {

  0%,
  100% {
    transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
  }

  5%,
  8% {
    transform: rotateZ(0deg) rotateX(6deg) rotateY(-20deg);
  }

  13%,
  16% {
    transform: rotateZ(0deg) rotateX(-9deg) rotateY(32deg);
  }

  35%,
  38% {
    transform: rotateZ(3deg) rotateX(12deg) rotateY(20deg);
  }

  55% {
    transform: rotateZ(-3deg) rotateX(-12deg) rotateY(-27deg);
  }
}

.card.cardz:hover {
  box-shadow: 0 0 30px -5px white, 0 0 10px -2px white, 0 55px 35px -20px rgba(0, 0, 0, 0.5);
}

.card.cardz:hover:before,
.card.cardz.active:before {
  background-image: linear-gradient(115deg, transparent 20%, var(--color1) 36%, var(--color2) 43%, var(--color3) 50%, var(--color4) 57%, var(--color5) 64%, transparent 80%);
}

/* COPY TO CLIPBOARD */
.base {
  display: flex;
  justify-content: center;
  align-items: center;
}

.mail-info {
  font-family: Nunito, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 8px;
  background-color: rgba(24, 24, 24, 0.52);
  color: #00f694;
  border: 1px solid rgba(0, 246, 148, .52);
  letter-spacing: 0.3px;
  font-weight: 400;
  transition: transform 0.5s ease, box-shadow 0.2s ease, background-color 0.3s ease, background-image 0.3s ease;
}

.mail-info:hover {
  background-color: rgba(24, 24, 24, 1);
  border: 1px solid #00f694;
  transition: transform 0.5s ease, box-shadow 0.2s ease, background-color 0.3s ease, background-image 0.3s ease;
}

.mail-text {
  font-size: 1rem;
  padding: 16px 36px;
}

[tooltip] {
  position: relative;
}

[tooltip]::after {
  content: attr(tooltip);
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%) translateY(-100%);
  background-color: rgba(24, 24, 24, 1);
  text-align: center;
  color: #fff;
  padding: 4px 8px;
  font-size: 14px;
  min-width: 80px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: all 250ms ease;
}

[tooltip-position='bottom']::after {
  margin-bottom: 22px;
  transform: translateX(-50%) translateY(-100%);
}

[tooltip]:hover::after,
[tooltip]:hover::before {
  opacity: 1;
}

/* FLICKERING */
.flicker {
  animation: flicker 10s 0s infinite;
}

@keyframes flicker {
  0% {
    opacity: 0;
  }

  2% {
    opacity: 0.3;
  }

  3% {
    opacity: 0.1;
  }

  5% {
    opacity: 0.4;
  }

  7% {
    opacity: 0.1;
  }

  8% {
    opacity: 0.9;
  }

  10% {
    opacity: 0.1;
  }

  15% {
    opacity: 0.6;
  }

  19% {
    opacity: 0.1;
  }

  8% {
    opacity: 0.4;
  }

  10% {
    opacity: 0.1;
  }

  19% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  22% {
    opacity: 0.5;
  }

  23% {
    opacity: 0.1;
  }

  28% {
    opacity: 0.3;
  }

  30% {
    opacity: 1;
  }

  33% {
    opacity: 0.1;
  }

  37% {
    opacity: 0.7;
  }

  38% {
    opacity: 0.1;
  }

  41% {
    opacity: 0.4;
  }

  55% {
    opacity: 0.1;
  }

  56% {
    opacity: 1;
  }

  57% {
    opacity: 0.9;
  }

  59% {
    opacity: 1;
  }

  61% {
    opacity: 0.1;
  }

  67% {
    opacity: 0.5;
  }

  69% {
    opacity: 0.3;
  }

  71% {
    opacity: 0.6;
  }

  100% {
    opacity: 0;
  }
}

kbd {
  background-color: #9900e6;
}

/* Scroll down animation */
.scrolldown-btn {
  height: 95% !important
}

.scrolldown-container .scrolldown-btn {
  width: 50px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  color: #00f694;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
}

.scrolldown-container .scrolldown-btn svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.scrolldown-container .scrolldown-btn svg path.first-path {
  animation: scrollanim 1s ease-in-out infinite;
  animation-delay: 0.8s;
}

.scrolldown-container .scrolldown-btn svg path.second-path {
  animation: scrollanim2 1s ease-in-out infinite;
}

@-webkit-keyframes scrollanim {
  0% {
    -webkit-transform: translate(0, -40px);
    opacity: 0;
  }

  60% {
    -webkit-transform: translate(0, 0);
    opacity: 0.8;
  }
}

@-moz-keyframes scrollanim {
  0% {
    -moz-transform: translate(0, -40px);
    opacity: 0;
  }

  60% {
    -moz-transform: translate(0, 0);
    opacity: 0.8;
  }
}

@keyframes scrollanim {
  0% {
    -webkit-transform: translate(0, -40px);
    -moz-transform: translate(0, -40px);
    -ms-transform: translate(0, -40px);
    -o-transform: translate(0, -40px);
    transform: translate(0, -40px);
    opacity: 0;
  }

  60% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 0.8;
  }
}

@-webkit-keyframes scrollanim2 {
  0% {
    -webkit-transform: translate(0, -40px);
    opacity: 0;
  }

  60% {
    -webkit-transform: translate(0, 0px);
    opacity: 0.6;
  }
}

@-moz-keyframes scrollanim2 {
  0% {
    -moz-transform: translate(0, -40px);
    opacity: 0;
  }

  60% {
    -moz-transform: translate(0, 0px);
    opacity: 0.6;
  }
}

@keyframes scrollanim2 {
  0% {
    -webkit-transform: translate(0, -40px);
    -moz-transform: translate(0, -40px);
    -ms-transform: translate(0, -40px);
    -o-transform: translate(0, -40px);
    transform: translate(0, -40px);
    opacity: 0;
  }

  60% {
    -webkit-transform: translate(0, 0px);
    -moz-transform: translate(0, 0px);
    -ms-transform: translate(0, 0px);
    -o-transform: translate(0, 0px);
    transform: translate(0, 0px);
    opacity: 0.6;
  }
}