/* Open Sans / Overpass font family is loaded via <link rel="stylesheet"> in enigma.html head (was @import, moved to parallelize with page CSS). */
@font-face {
  font-family: 'alarm clock';
  src: url('https://cdn.galacticgeckos.com/legacy-website/fonts/alarmclock.eot');
  src: url('https://cdn.galacticgeckos.com/legacy-website/fonts/alarmclock.eot?#iefix')
      format('embedded-opentype'),
    url('https://cdn.galacticgeckos.com/legacy-website/fonts/alarmclock.woff2')
      format('woff2'),
    url('https://cdn.galacticgeckos.com/legacy-website/fonts/alarmclock.woff')
      format('woff'),
    url('https://cdn.galacticgeckos.com/legacy-website/fonts/alarmclock.ttf')
      format('truetype'),
    url('https://cdn.galacticgeckos.com/legacy-website/fonts/alarmclock.svg#alarmclock')
      format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
body {
  background-image: url('https://cdn.galacticgeckos.com/legacy-website/images/background_tile_0.png');
  opacity: 1;
}

* {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

body::-webkit-scrollbar,
.scrollable::-webkit-scrollbar,
#gecko_select_row::-webkit-scrollbar {
  width: 1em;
  height: 1.1em;
}

body::-webkit-scrollbar-thumb,
.scrollable::-webkit-scrollbar-thumb,
#gecko_select_row::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.2);
  outline: 2px solid rgba(255, 255, 255, 0.33);
}

#gecko_select_row::-webkit-scrollbar-thumb {
  transition: 1s;
  /*    visibility: hidden; */
  visibility: visible;
}

#gecko_select_row:hover::-webkit-scrollbar-track {
  transition: box-shadow 1s, visibility 1s;
  -webkit-box-shadow: inset 0 0 6px rgba(100, 100, 100, 0.25);
}

#gecko_select_row:hover::-webkit-scrollbar-thumb {
  transition: background-color 1s, visibility 1s;
  visibility: visible;
}

.shake_em {
  animation: shake 0.8s linear 3;
}

div.custom-container div#bg_wrapper {
  position: absolute;
  opacity: 0.9;
  top: -50px;
  left: 0px;
  z-index: -1;
  width: 1440px;
  height: 666px;
  transform: translatey(0px);
  animation: float_y 18s ease-in-out infinite;
}

div.custom-container div#enigma_ui_wrapper {
  position: absolute;
  top: -50px;
  left: 85px;
  z-index: 10;
  width: 1265px;
  height: 640px;
  transform: translatey(0px);
  animation: float_y 18s ease-in-out infinite;
}

div#zdiv0 {
  z-index: 0;
}
div#zdiv1 {
  z-index: 1;
}
div#zdiv2 {
  z-index: 2;
}

div#claim_wrapper {
  position: relative;
  z-index: 5;
  width: 30%;
  height: 95%;
  margin: 0 auto;
}

div.custom-container button#claim_button:hover span#claim_text {
  display: block;
  opacity: 1;
  color: rgba(255, 255, 255, 1);
  transition: 500ms;
  animation: shake_small 0.4s linear 3;
}

div.custom-container button#claim_button span#claim_text {
  position: relative;
  text-align: center;
  vertical-align: middle;
  font-family: 'alarm clock';
  font-weight: normal;
  font-style: normal;
  font-size: 25px;
  color: rgba(255, 255, 255, 1);
  letter-spacing: 0px;
  cursor: pointer;
}

div.custom-container button#claim_button {
  opacity: 0.6;
  z-index: 5;
  position: absolute;
  margin-left: -8px;
  width: 100%;
  padding: 1px;
  height: 47px;
  bottom: 60px;
  text-align: center;
  cursor: pointer;
  background: rgba(109, 214, 209, 0);
  border: none;
  border-radius: 0px;
  box-shadow: 0px 10px 25px rgba(87, 171, 167, 1),
    0px -10px 25px rgba(166, 255, 250, 1),
    inset 0px -5px 10px rgba(87, 171, 167, 1),
    inset 0px 5px 10px rgba(166, 255, 250, 1);
  transition: 500ms;
  animation: hueRotation 2s linear infinite;
}

div.custom-container button#claim_button span#claim_text.gecko_load {
  display: block;
  opacity: 1;
  color: rgba(255, 255, 255, 1);
  transition: 500ms;
  animation: shake_small 0.4s linear 3;
}

div.custom-container button#claim_button.gecko_load {
  /*
    color: rgba(156, 255, 156, 0.4);
    background: rgba(60, 60, 60, 0.3); 
    border: 1px solid;
    */
  opacity: 1;
  animation: hueRotation 1s linear 3;
}

div.custom-container button#claim_button:hover {
  /*
    color: rgba(156, 255, 156, 0.4);
    background: rgba(60, 60, 60, 0.3); 
    border: 1px solid;
    */
  opacity: 1;
  animation: hueRotation 1s linear infinite;
}

@keyframes shake_small {
  0% {
    transform: translate(0.5px, 0.5px) rotate(0deg);
  }
  10% {
    transform: translate(0.5px, -1px) rotate(-1deg);
  }
  20% {
    transform: translate(-1.5px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(1.5px, 1px) rotate(0deg);
  }
  40% {
    transform: translate(0.5px, 0.5px) rotate(1deg);
  }
  50% {
    transform: translate(0.5px, 1px) rotate(-1deg);
  }
  60% {
    transform: translate(-1.5px, 0.5px) rotate(0deg);
  }
  70% {
    transform: translate(1.5px, 0.5px) rotate(-1deg);
  }
  80% {
    transform: translate(0.5px, -0.5px) rotate(1deg);
  }
  90% {
    transform: translate(0.5px, 1px) rotate(0deg);
  }
  100% {
    transform: translate(0.5px, -1px) rotate(-1deg);
  }
}

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  3% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  6% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  9% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  12% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  15% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  18% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  21% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  24% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  27% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  30% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
  35% {
    transform: translate(0.5px, 0.5px) rotate(0deg);
  }
  40% {
    transform: translate(0.5px, -1px) rotate(-1deg);
  }
  46% {
    transform: translate(-1.5px, 0px) rotate(1deg);
  }
  52% {
    transform: translate(1.5px, 1px) rotate(0deg);
  }
  58% {
    transform: translate(0.5px, 0.5px) rotate(1deg);
  }
  65% {
    transform: translate(0.5px, 1px) rotate(-1deg);
  }
  72% {
    transform: translate(-1.5px, 0.5px) rotate(0deg);
  }
  79% {
    transform: translate(1.5px, 0.5px) rotate(-1deg);
  }
  86% {
    transform: translate(0.5px, -0.5px) rotate(1deg);
  }
  93% {
    transform: translate(0.5px, 1px) rotate(0deg);
  }
  100% {
    transform: translate(0.5px, -1px) rotate(-1deg);
  }
}

@keyframes hueRotation {
  to {
    filter: hue-rotate(360deg);
  }
}

div.custom-container div#enigma_bg1 {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://cdn.galacticgeckos.com/legacy-website/images/enigma_ui.png');
  background-position: 0px 0px;
  background-repeat: no-repeat;
  background-size: 100%;
  border-radius: 3%;
}

div.custom-container div#enigma_bg2 {
  margin-top: 20px;
  margin-left: 20px;

  position: absolute;
  z-index: -1;
  width: 97.3%;
  height: 94%;
  background-size: 100%;
  box-shadow: 0px 5px 15px 17px rgba(80, 130, 80, 0.61);
}

div#card_row {
  z-index: 6;
  position: absolute;
  /*   left:  65px; */
  left: 50px;
  top: 40px;
  width: 90%;
  height: 30%;
  margin: 0 auto;
}

div.gecko_submit_card {
  height: 235px;
  border-radius: 20px;
}

img.img_card:hover {
  position: relative;
  /*    height:  90%;
    width:  90%;      */
  /*
    margin-top:  -4.5%;
    margin-left:  -2.5%;
    height: 100%;
    width:  100%;
    border-radius: 10px;
    */
}

img.img_card {
  opacity: 0;
  position: relative;
  height: 111%;
  width: 111%;
  margin-top: -12%;
  border-radius: 23%;
}

div#div_gecko1 {
}
div#div_gecko2 {
}
div#div_gecko3 {
}
div#div_gecko4 {
}

img#gecko_targari {
  margin-left: 7%; /* for small: 18%; */
  bottom: 1px;
  box-shadow: 0px 5px 20px 10px rgba(0, 0, 0, 1);
}
img#gecko_martu {
  margin-left: 3%; /* for small: 14%; */
  bottom: 4px;
  box-shadow: 0px 5px 20px 3px rgba(84, 181, 65, 1);
}
img#gecko_barada {
  margin-left: 0%; /* for small: 11%; */
  bottom: 2px;
  box-shadow: 0px 5px 20px 2px rgba(255, 0, 0, 1);
}
img#gecko_alura {
  margin-left: -1%; /* for small: 10%; */
  bottom: 2px;
  box-shadow: 0px 5px 20px 5px rgba(121, 85, 203, 1);
}

/*
div#gecko_select {
    z-index: 10;
    position: relative;
    min-height: 1000px;
    max-height: 1000px;
    margin-left: 40px;
    margin-top: -300px;
    background-image: url("https://cdn.galacticgeckos.com/legacy-website/images/flight_path_bar.png");
    background-repeat: no-repeat;
    background-size: contain;
    transform: translatex(0px);
    transform: translatey(0px);
    animation: float_xy 15s ease-in-out infinite;
}
*/

div#gecko_select {
  z-index: 10;
  position: relative;
  padding-bottom: 0px;
  height: 395px;
  margin-left: 29px;
  margin-top: 0px;
  transform: translatex(0px);
  transform: translatey(0px);
  animation: float_xy 15s ease-in-out infinite;
}

div#gecko_select_row {
  transform: rotateX(180deg);
  padding-top: 10px;
  padding-bottom: 0px;
  overflow-x: auto;
  white-space: nowrap;
  margin-left: 50px;
  /*    background-color: rgba(50, 100, 100, 0.8);     */
}

div#scroll_container:hover {
  /*    cursor:  grab;        */
  animation-play-state: paused;
}

div#scroll_container {
  transition: 1s;
  position: relative;
  transform: rotateX(180deg);
  /*    animation:  none;           */
}
@keyframes slideshow {
  0% {
    transform: rotateX(180deg) translateX(0%);
  }
  3% {
    transform: rotateX(180deg) translateX(0%);
  }
  50% {
    transform: rotateX(180deg) translateX(-25%);
  }
  100% {
    transform: rotateX(180deg) translateX(0%);
  }
}

/* MENU */
#top_box_lore {
  opacity: 0.9;
  position: relative;
  z-index: 0;
  top: 10px;
  min-height: 173px;
  max-height: 173px;
  min-width: 800px;
  max-width: 800px;
  margin: 0 auto;
  background-image: url('https://cdn.galacticgeckos.com/legacy-website/images/faq_dropdown.png');
  background-repeat: no-repeat;
  background-size: contain;
  transform: translatey(0px);
  animation: float_y 18s ease-in-out infinite;

  text-align: center;
}

span.enigma_title {
  position: relative;
  top: 23px;
  font-size: 65px;
  font-style: italic;
  color: white;
  text-transform: uppercase;
  font-family: 'VT323', monospace;
  font-weight: 700;
  letter-spacing: 10px;
}

#top_box_lore #branding {
  height: 145px;
  margin-top: 55px;
  background-image: url('https://cdn.galacticgeckos.com/legacy-website/images/logo.png');
  background-repeat: no-repeat;
  background-size: 445px;
}

div.custom-container div#viewspace {
  position: absolute;
  top: -20px;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-image: url('https://cdn.galacticgeckos.com/legacy-website/images/background_tile_0.png');
  background-position: 0px 0px;
  background-repeat: repeat;
  background-size: 50%;
  animation-name: star_move2;
  animation-duration: 1000s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

div.custom-container div#lore_wrapper {
  position: absolute;
  top: 200px;
  left: 120px;
  z-index: -1;
  width: 1265px;
  height: 1150px;
  transform: translatey(0px);
  animation: float_y 18s ease-in-out infinite;
}

div.custom-container canvas#viewspace {
  position: absolute;
  top: -20px;
  z-index: 1;
  width: 100%;
  height: 100%;
}

@keyframes star_move2 {
  from {
    background-position: 0% 5%;
  }
  to {
    background-position: 0% 60000%;
  }
}

div.dimmed.participated {
  background-color: rgba(40, 40, 40, 0.95);
}

div.dimmed {
  display: none;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 7;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  margin-top: -10px;
  margin-left: -10px;
}

.card:not(:first-child) {
  margin-left: -0px;
  transition: 0.25s ease-in;
}

.card {
  transition: 0.25s ease-in;
  transform: perspective(500px) rotateY(15deg);
}

.card:hover {
  transition: 0.25s ease-out;
  transform: rotateY(0);
}

.card:hover ~ .card {
  position: relative;
  left: 0px;
  transition: 0.25s ease-out;
}

img.card__image {
  max-height: 217px;
  margin: auto;
  display: inline-block;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  font-weight: 400;
}

.card {
  display: inline-block;
  width: 217px;
  padding: 10px;
  border-radius: 10px;
  margin: 20px;
  text-align: left;
  box-shadow: 0px 5px 20px -10px #111111;
  position: relative;
  transition: 0.4s;
}
.card__divider {
  height: 10px;
}
.card__line {
  position: relative;
  top: -5px;
  background-color: #000;
  border: 1px solid #000;
  width: 67%;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 1px 1px 8px #000000;
}
.card__caption {
  background-color: rgba(255, 255, 255, 0.65);
  padding: 1em;
  position: relative;
  height: 66px;
}
.card__image-container {
  height: 217px;
  text-align: center;
}
.card__type {
  height: 24px;
  font-size: 24px;
  text-align: center;
  font-style: italic;
  position: relative;
  bottom: 8px;
  right: 0px;
  color: white;
  text-transform: lowercase;
  font-family: 'VT323', monospace;
  font-weight: 700;
  letter-spacing: 3px;
  padding: 0px;
  line-height: 1;
}
.card__name {
  position: relative;
  font-family: 'Open Sans', Helvetica, sans-serif;
  top: -5px;
  text-align: center;
  font-size: 1.1em;
  color: black;
  text-transform: capitalize;
  font-weight: 700;
  letter-spacing: 0.035em;
  line-height: 30px;
}
.card__spacer {
  height: 20px;
}
.card--targari {
  box-shadow: 0px 0px 10px 5px #333333;
  background: linear-gradient(
    to left,
    #050505 0%,
    #222222 33%,
    #333333 67%,
    #444444 100%
  );
}
.card--targari:hover {
  box-shadow: 0px 0px 10px 11px #333333;
}
.card--targari.dimmed {
  box-shadow: none;
}
.card--targari .card__type {
  -webkit-animation: targari_glow 0.3333s ease-in-out infinite alternate;
  -moz-animation: targari_glow 0.3333s ease-in-out infinite alternate;
  animation: targari_glow 0.3333s ease-in-out infinite alternate;
}
.card--martu {
  box-shadow: 0px 0px 10px 1px rgba(84, 181, 65, 1);
  background: linear-gradient(
    to left,
    rgba(84, 181, 65, 1) 0%,
    rgba(114, 211, 95, 1) 34%,
    rgba(144, 241, 125, 1) 67%,
    rgba(174, 255, 155, 1) 100%
  );
}
.card--martu.dimmed {
  box-shadow: none;
}
.card--martu:hover {
  box-shadow: 0px 0px 10px 7px rgba(84, 181, 65, 1);
}
.card--martu .card__type {
  -webkit-animation: martu_glow 0.3333s ease-in-out infinite alternate;
  -moz-animation: martu_glow 0.3333s ease-in-out infinite alternate;
  animation: martu_glow 0.3333s ease-in-out infinite alternate;
}
.card--barada {
  box-shadow: 0px 0px 10px 5px #dd2222;
  background: linear-gradient(
    to left,
    #cc0000 0%,
    #dd2222 33%,
    #ee4444 67%,
    #ff6666 100%
  );
}
.card--barada.dimmed {
  box-shadow: none;
}
.card--barada:hover {
  box-shadow: 0px 0px 10px 10px #dd2222;
}
.card--barada .card__type {
  -webkit-animation: barada_glow 0.3333s ease-in-out infinite alternate;
  -moz-animation: barada_glow 0.3333s ease-in-out infinite alternate;
  animation: barada_glow 0.3333s ease-in-out infinite alternate;
}
.card--alura {
  box-shadow: 0px 0px 10px 2px rgba(121, 85, 203, 1);
  background: linear-gradient(
    to left,
    rgba(121, 85, 203, 1) 0%,
    rgba(151, 115, 233, 1) 33%,
    rgba(181, 145, 255, 1) 67%,
    rgba(211, 175, 255, 1) 100%
  );
}
.card--alura.dimmed {
  box-shadow: none;
}
.card--alura:hover {
  box-shadow: 0px 0px 10px 8px rgba(121, 85, 203, 1);
}
.card--alura .card__type {
  -webkit-animation: alura_glow 0.3333s ease-in-out infinite alternate;
  -moz-animation: alura_glow 0.3333s ease-in-out infinite alternate;
  animation: alura_glow 0.3333s ease-in-out infinite alternate;
}

@-webkit-keyframes targari_glow {
  from {
    text-shadow: 0 0 1px rgba(0, 0, 0, 1), 0 0 2px rgba(0, 0, 0, 1),
      0 0 3px rgba(0, 0, 0, 1), 0 0 4px rgba(0, 0, 0, 1),
      0 0 5px rgba(0, 0, 0, 1), 0 0 6px rgba(0, 0, 0, 1),
      0 0 7px rgba(0, 0, 0, 1);
  }
  to {
    text-shadow: 0 0 3px rgba(0, 0, 0, 1), 0 0 4px rgba(0, 0, 0, 1),
      0 0 5px rgba(0, 0, 0, 1), 0 0 6px rgba(0, 0, 0, 1),
      0 0 7px rgba(0, 0, 0, 1), 0 0 8px rgba(0, 0, 0, 1),
      0 0 9px rgba(0, 0, 0, 1);
  }
}

@-webkit-keyframes martu_glow {
  from {
    text-shadow: 0 0 1px rgba(84, 181, 65, 1), 0 0 2px rgba(84, 181, 65, 1),
      0 0 3px rgba(84, 181, 65, 1), 0 0 4px rgba(84, 181, 65, 1),
      0 0 5px rgba(84, 181, 65, 1), 0 0 6px rgba(84, 181, 65, 1),
      0 0 7px rgba(84, 181, 65, 1);
  }
  to {
    text-shadow: 0 0 3px rgba(84, 181, 65, 1), 0 0 4px rgba(84, 181, 65, 1),
      0 0 5px rgba(84, 181, 65, 1), 0 0 6px rgba(84, 181, 65, 1),
      0 0 7px rgba(84, 181, 65, 1), 0 0 8px rgba(84, 181, 65, 1),
      0 0 9px rgba(84, 181, 65, 1);
  }
}

@-webkit-keyframes barada_glow {
  from {
    text-shadow: 0 0 1px rgba(255, 0, 0, 1), 0 0 2px rgba(255, 0, 0, 1),
      0 0 3px rgba(255, 0, 0, 1), 0 0 4px rgba(255, 0, 0, 1),
      0 0 5px rgba(255, 0, 0, 1), 0 0 6px rgba(255, 0, 0, 1),
      0 0 7px rgba(255, 0, 0, 1);
  }
  to {
    text-shadow: 0 0 3px rgba(255, 0, 0, 1), 0 0 4px rgba(255, 0, 0, 1),
      0 0 5px rgba(255, 0, 0, 1), 0 0 6px rgba(255, 0, 0, 1),
      0 0 7px rgba(255, 0, 0, 1), 0 0 8px rgba(255, 0, 0, 1),
      0 0 9px rgba(255, 0, 0, 1);
  }
}

@-webkit-keyframes alura_glow {
  from {
    text-shadow: 0 0 1px rgba(121, 85, 203, 1), 0 0 2px rgba(121, 85, 203, 1),
      0 0 3px rgba(121, 85, 203, 1), 0 0 4px rgba(121, 85, 203, 1),
      0 0 5px rgba(121, 85, 203, 1), 0 0 6px rgba(121, 85, 203, 1),
      0 0 7px rgba(121, 85, 203, 1);
  }
  to {
    text-shadow: 0 0 3px rgba(121, 85, 203, 1), 0 0 4px rgba(121, 85, 203, 1),
      0 0 5px rgba(121, 85, 203, 1), 0 0 6px rgba(121, 85, 203, 1),
      0 0 7px rgba(121, 85, 203, 1), 0 0 8px rgba(121, 85, 203, 1),
      0 0 9px rgba(121, 85, 203, 1);
  }
}

div.bottom_tnc_row {
  z-index: 10;
  position: fixed;
  bottom: 7px;
  width: 100%;
  opacity: 0.6;
}

span#terms_and_conditions {
  display: table;
  float: right;
  right: 20px;
  position: relative;
  text-align: center;
  margin: 0 auto;
  opacity: 0.6;
}

div.bottom_tnc_row:hover {
  opacity: 1;
}

span#terms_and_conditions:hover {
  opacity: 1;
}

a#t-and-c {
  text-decoration: none;
  font-size: 17px;
  color: rgba(255, 255, 255, 1);
  text-shadow: 0px 0px 10px rgba(200, 200, 220, 1),
    0px 0px 20px rgba(200, 200, 220, 1), 0px 0px 30px rgba(200, 200, 220, 1);
  transition: 333ms;
}

a#t-and-c:hover {
  background-color: rgba(60, 60, 60, 0.1);
  text-decoration: underline;
  font-size: 20px;
  animation: none;
  transition: 222ms;
  text-shadow: 0px 0px 10px rgba(200, 200, 220, 1),
    0px 0px 20px rgba(200, 200, 220, 1), 0px 0px 30px rgba(200, 200, 220, 1);
}

div#wallet_buttons_wrapper {
  position: relative;
  top: 0;
  right: 0;
}

span#connect_button {
  float: right;
  top: -50px;
  right: -50px;
  position: relative;
  display: inline-flex;
  width: 160px;
  height: 55px;
  margin: 0 0px;
  perspective: 1000px;
}
span#connect_button a {
  font-size: 19px;
  letter-spacing: 1px;
  transform-style: preserve-3d;
  transform: translateZ(-25px);
  transition: transform 0.25s;
  box-shadow: inset 0 0 0 0.09px ghostwhite;
}
span#connect_button a:before,
span#connect_button a:after {
  position: absolute;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 5px solid rgba(0, 0, 0, 0.9);
  box-sizing: border-box;
  border-radius: 7px;
  content: var(--content, 'CONNECT');
  text-transform: uppercase;
  font-family: 'alarm clock';
  width: 160px;
}

span#connect_button a:before {
  color: #ffffff;
  background: rgba(0, 0, 0, 0.9);
  transform: rotateY(0deg) translateZ(25px);
  box-shadow: 0 0 7px 7px rgba(255, 255, 255, 0.67);
  -webkit-backface-visibility: hidden;
}
span#connect_button a:after {
  color: #ffffff;
  transform: rotateX(90deg) translateZ(25px);
  box-shadow: 0px 0px 7px 7px rgba(255, 255, 255, 0.67);
  -webkit-backface-visibility: hidden;
}
span#connect_button a:hover {
  opacity: 1;
  transform: translateZ(-25px) rotateX(-90deg);
  box-shadow: 0 0 7px 7px rgba(255, 255, 255, 0.67);
  -webkit-backface-visibility: hidden;
}

element.style {
  height: 50%;
  width: 50%;
  border-radius: 50%;
  box-shadow: 0px 0px 20px 20px rgb(116 125 232 / 50%);
  position: relative;
  left: 33%;
  top: 3%;
}

.div_glow:hover,
img.img_card:hover .div_glow,
div.gecko_submit_card:hover .div_glow {
  box-shadow: 0px 0px 500px 500px rgb(255, 255, 255);
}

.div_glow {
  position: relative;
  height: 50%;
  width: 50%;
  border-radius: 50%;
  box-shadow: 0px 0px 20px 20px rgb(116 125 232 / 50%);
  left: 33%;
  top: 3%;
  transition: 347ms;
}

div#circle_glow_targari.inactive {
  opacity: 0;
  transition: 1500ms;
}
div#circle_glow_martu.inactive {
  opacity: 0;
  transition: 1500ms;
}
div#circle_glow_barada.inactive {
  opacity: 0;
  transition: 1500ms;
}
div#circle_glow_alura.inactive {
  opacity: 0;
  transition: 1500ms;
}

div#circle_glow_targari.active {
  opacity: 1;
  box-shadow: 0px 0px 25px 25px rgba(0, 0, 0, 0.8);
  animation: anim_glow_targari 1.5s linear infinite alternate;
  transition: 500ms;
}
div#circle_glow_martu.active {
  opacity: 1;
  box-shadow: 0px 0px 25px 25px rgba(84, 181, 65, 0.65);
  animation: anim_glow_martu 1.5s linear infinite alternate;
  transition: 500ms;
}
div#circle_glow_barada.active {
  opacity: 1;
  box-shadow: 0px 0px 25px 25px rgba(255, 30, 30, 0.65);
  animation: anim_glow_barada 1.5s linear infinite alternate;
  transition: 500ms;
}
div#circle_glow_alura.active {
  opacity: 1;
  box-shadow: 0px 0px 25px 25px rgba(121, 85, 203, 0.65);
  animation: anim_glow_alura 1.5s linear infinite alternate;
  transition: 500ms;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/*
@keyframes anim_glow_targari{
  to {
    box-shadow: 0px 0px 30px 30px rgba(0, 0, 0, 0.85);
  }
}@keyframes anim_glow_martu{
  to {
    box-shadow: 0px 0px 30px 30px rgba(84, 181, 65, 0.75);
  }
}@keyframes anim_glow_barada{
  to {
    box-shadow: 0px 0px 30px 30px rgba(255, 30, 30, 0.75);
  }
}@keyframes anim_glow_alura{
  to {
    box-shadow: 0px 0px 30px 30px rgba(121, 85, 203, 0.75);
  }
}*/