@font-face {
    font-family: 'ITCAvantGardeStd-Bold';
    src: url(../font/ITCAvantGardeStd-Bold.otf);
}
@font-face {
    font-family: 'ITCAvantGardeStd-Demi';
    src: url(../font/ITCAvantGardeStd-Demi.otf);
}
@font-face {
    font-family: 'ITCAvantGardeStd-Bk';
    src: url(../font/ITCAvantGardeStd-Bk.otf);
}
@font-face {
    font-family: 'ITCAvantGardeStd-Md';
    src: url(../font/ITCAvantGardeStd-Md.otf);
}
@font-face {
    font-family: 'ITCAvantGardeStd-XLt';
    src: url(../font/ITCAvantGardeStd-XLt.otf);
}
@font-face {
    font-family: 'Zepto';
    src: url(../font/zepto/Zepto-Regular.ttf);
}
html {
    margin: 0;
    overflow-x: hidden;
    background-color:black;
}
div, p, span, ul, li, button {
	font-family: 'Zepto';
}
h1, h2, h3, h4, h5, h6{
	font-family: 'Zepto';
	font-weight: bold;
    margin-top: 20px;
}
body {
    margin:0;
}
body .ds-title-container-front {
    position: absolute;
    max-width: 100% !important;
    width: 100% !important;
    top: 5vh;
    left: 0;
}
body .ds-title-container-back {
    position: absolute;
    max-width: 100% !important;
    width: 100% !important;
    top: 5vh;
    left: 0;
}
.loading {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: black;
    z-index:99999999999;
}
.loading p {
    font-size: 40px;
    margin: 200px auto;
    text-align: center;
    font-family: 'Zepto';
    animation-name: loading;
    animation-duration: 0.5s;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes loading {
  0% {text-shadow: 0px 0px 50px #164f4f;color: cyan;}
  25% {text-shadow: 0px 0px 50px #4f1616;color: red;}
  50% {text-shadow: 0px 0px 50px #4f4e16;color: yellow;}
  100% {text-shadow: 0px 0px 50px #254f16;color: green;}
}
.content {
    position:relative;
    width: 100%;
}
.content-wrapper {
    font-family: monospace;
    position: absolute;
    top: 25px;
    left: 0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    width: 120px;
    height: 100px;
    font-size: 12px;
    line-height: 15px;
    text-align: center;
    background-color: #222;
    color: #888;
    border-radius: 5px;
    border: 1px solid;
    box-shadow: 0px 0px 5px #000;
}
.button-menu {
    position: relative;
    width:100%;
    padding-top:10px;
}
.play-button {
    position: relative;
    margin:30px;
    width:80px;
    background: linear-gradient(#ff0000,#0000ff);
    border: 1px solid #00ffff;
    border-radius:10px;
    margin: 0 auto;
    cursor: pointer;
}
.button-text {
    color:#fff;
    font: 'Zepto';
}
.image-data-canvas {
    position:relative;
    margin:20px;
    width:784px;
    height:584px;
}



.digitorum-title {
    font-size: 100px;
}
.ds-title-container-front h2 {
    position:relative;
    text-align: center;
    margin: 0 auto;
    text-transform:uppercase;
    color:cyan;
    text-shadow: 0px 0px 50px #164f4f;
    animation-name: front;
    animation-duration: 2s;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.ds-title-container-back h2 {
    position:relative;
    text-align: center;
    margin: 0 auto;
    text-transform:uppercase;
    color:blue;
    animation-name: back;
    animation-duration: 2s;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes bullet-left {
  from {transform: rotate(270deg) scaleY(-1) translateX(-7vw) translateY(-5.8vw)}
  to {transform: rotate(270deg) scaleY(-1) translateX(-7vw) translateY(200vw)}
}
@keyframes front {
  0% {text-shadow: 0px 0px 50px #164f4f;}
  25% {text-shadow: 0px 0px 50px #4f1616;}
  50% {text-shadow: 0px 0px 50px #4f4e16;}
  100% {text-shadow: 0px 0px 50px #254f16;}
}
@keyframes back {
  0% {color: cyan;}
  25% {color: red;}
  50% {color: yellow;}
  100% {color: green;}
}
.connect-svg {
    width: 50px;
    padding: 10px;
    margin: 7px;
    fill: #fe0124;
    display: inline-block;
    transition: all 0.5s ease-in-out 0.2s;
    opacity:0.6;
    filter: drop-shadow(0px 0px 3px #000000);
}
.wallet-connect-container {
    position:absolute;
    top:20vh;
    left:0;
    max-width: 100% !important;
    width: 100% !important;
}
.main-nft-container {
    position:absolute;
    top:25vh;
    left:0;
    max-width: 100% !important;
    width: 100% !important;
}
.connect-wallet-button {
    display: flex;
    position: absolute;
    right:50%;
    padding: 5px;
    height: 75px;
    background-color: #000;
    background-image: linear-gradient(to right, #111, #0a0a0a, #070707, #070707, #000);
    width: 185px;
    text-align:center;
    cursor: pointer;
    border-bottom-left-radius: 50px;
    border-top-left-radius: 50px;
    transition: all 0.5s ease-in-out 0s;
    z-index:999999999;
    box-shadow: 2px 4px 20px #000;
    border-bottom: 4px solid #220000;
    border-right: 4px solid #110000;
    transform:translateX(-2px);
}
.menu-button-flash:focus {
    box-shadow: 0px 0px 30px #ff0000;
    transition: all 0.5s ease-out 0s;
}
.menu-button-flash:hover {
    z-index:99999999;
    animation-name: flash1;
    animation-duration: 0.5s;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: 0.8s;
    transition: all 0.5s ease-in-out 0.2s;
}
.menu-button-flash:active{
    z-index:99999999;
    animation-name: flashpickmenu;
    animation-duration: 0.2s;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: 0s;
    border-bottom: 2px solid #111;
    border-left: 1px solid #181818;
    transition: all 0.5s ease-in-out 0.2s;
}
.demo-button {
    display: flex;
    position: absolute;
    right:calc(50% - 185px);
    height: 75px;
    padding: 5px;
    background-color: #000;
    background-image: linear-gradient(to right, #000, #070707, #070707, #0a0a0a, #111);
    width: 185px;
    text-align:center;
    cursor: pointer;
    border-bottom-right-radius: 50px;
    border-top-right-radius: 50px;
    transition: all 0.5s ease-in-out 0s;
    z-index:999999999;
    box-shadow: 2px 4px 20px #000;
    border-bottom: 4px solid #220000;
    border-left: 4px solid #110000;
    transform:translateX(2px);
}
.dark-button {
    box-shadow: 2px 4px 20px #000;
    border-bottom: 4px solid #220000;
    border-left: 4px solid #110000;
    background-image: linear-gradient(to right, #000, #070707, #070707, #0a0a0a, #111);
    background-color: #000;
}
.menu-button-flash:hover > .connect-svg {
    animation-name: flashpickmenu;
    animation-duration: 0.5s;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: 0.8s;
    opacity:1;
}
.connect-svg-demo {
    transform:rotate(0deg) scale(0.9,0.9);
    animation-name: blurAnimate1;
    animation-duration: 0.3s;
    animation-direction: normal;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-delay: 0.2s;
    margin-top: 4px;
}
.menu-button-flash:hover > .connect-svg-demo {
    transform:rotate(360deg) scale(1.1,1.1);
    animation-name: blurAnimate2;
    animation-duration: 0.3s;
    animation-direction: normal;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-delay: 0.2s;
}
.connect-svg-change{
    transform:rotate(0deg) scale(0.9,0.9);
    animation-name: blurAnimate1;
    animation-duration: 0.3s;
    animation-direction: normal;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-delay: 0.2s;
    margin-top: 4px;
}
.menu-button-flash:hover > .connect-svg-change {
    transform:rotate(-360deg) scale(1.1,1.1);
    animation-name: blurAnimate2;
    animation-duration: 0.3s;
    animation-direction: normal;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-delay: 0.2s;
}
.connect-svg-play {
    transform:rotate(0deg) scale(1.1,1.1);
    animation-name: blurAnimate1;
    animation-duration: 0.3s;
    animation-direction: normal;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-delay: 0.2s;
    margin-top: 9px;
}
.menu-button-flash:hover > .connect-svg-play {
    transform:rotate(360deg) scale(1.2,1.2);
    animation-name: blurAnimate2;
    animation-duration: 0.3s;
    animation-direction: normal;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-delay: 0.2s;
}
.heading-demo-translate {
    transform:translateX(4px) scale(1,1);
}
.menu-button-flash:hover > .heading-demo-translate {
    transform:translateX(11px) scale(1.03,1.03);
}
.menu-button-flash:hover > .connect-wallet-heading {
    animation-name: flashpickmenutext;
    animation-duration: 0.5s;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: 0.8s;
    opacity:1;
}
.connect-svg-wallet{
    transform:rotate(0deg) scale(0.9,0.9);
    animation-name: blurAnimate1;
    animation-duration: 0.3s;
    animation-direction: normal;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-delay: 0.2s;
}
.menu-button-flash:hover > .connect-svg-wallet {
    transform:rotate(-360deg) scale(1.1,1.1);
    animation-name: blurAnimate2;
    animation-duration: 0.3s;
    animation-direction: normal;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-delay: 0.2s;
}
.menu-button-flash:hover > .heading-wallet-translate {
    transform:translateX(-8px) scale(1.03,1.03);
}
@keyframes blurAnimate1 {
  0%   {filter: blur(0px);-webkit-filter: blur(0px);}
  50%  {filter: blur(2px);-webkit-filter: blur(2px);}
  100% {filter: blur(0px);-webkit-filter: blur(0px);}
}
@keyframes blurAnimate2 {
  0%   {filter: blur(0px);-webkit-filter: blur(0px);}
  50%  {filter: blur(2px);-webkit-filter: blur(2px);}
  100% {filter: blur(0px);-webkit-filter: blur(0px);}
}
@keyframes flashpickmenu {
  0%   {filter: drop-shadow(0px 0px 6px #fe012488);}
  50%  {filter: drop-shadow(0px 0px 6px black);}
  100% {filter: drop-shadow(0px 0px 6px #fe012488);}
}
@keyframes flashpickmenutext {
  0%   {text-shadow: 0px 0px 6px #fe012488;}
  50%  {text-shadow: 0px 0px 6px black;}
  100% {text-shadow: 0px 0px 6px #fe012488;}
}
.connect-wallet-heading {
    display:inline-block;
    text-transform:uppercase;
    margin:12px;
    transition: all 0.5s ease-in-out 0s;
    opacity:0.4;
}
.connect-address {
    font-size:20px;
    margin:150px auto;
    text-transform:uppercase;
    text-align:center;
}
.http-response {
    margin:20px auto;
    text-transform:uppercase;
    text-align:center;
    color: cyan;
    max-width:1600px
}
.connect-wrapper {
    position: relative;
    display: grid;
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
}
.nft-wrapper {
    position: relative;
    display: grid;
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
}
.nfts-holder {
    position:relative;
    margin:0 auto;
    max-width: 1200px;
}
.nft-holder-heading {
    font-size: 56px;
    text-align: center;
    background: -webkit-linear-gradient(#ff1d39, #780011);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation-name: flashpick;
    animation-duration: 6s;
    animation-direction: normal;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes flashpick {
  0%   {filter: drop-shadow(0px 0px 20px #ff000088);}
  50%  {filter: drop-shadow(0px 0px 20px black);}
  100% {filter: drop-shadow(0px 0px 20px #ff000088);}
}
span.emote {
    -webkit-text-fill-color: initial;
}
.nft-box {
    display: inline-block;
    padding: 10px;
    margin: 0 auto;
    text-align: center;
}
.nft-box-big {
    display: block;
    padding: 10px;
    margin: 80px auto 150px;
    text-align: center;
    animation-name: flash;
    animation-duration: 4s;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes flash {
  0% {filter: drop-shadow(0px 0px 50px cyan);}
  25% {filter: drop-shadow(0px 0px 50px red);}
  50% {filter: drop-shadow(0px 0px 50px yellow);}
  100% {filter: drop-shadow(0px 0px 50px purple);}
}
.nft-title {
    text-shadow: 0px 1px 3px #000;
    cursor: context-menu;
    color: #fff;
	font-family: 'Zepto';
    letter-spacing: 3px;
    opacity: 0.2;
    transition: all 0.2s ease-in 0.1s;
}
.nft-image:hover ~ .nft-title {
    opacity: 1;
    transition: all 0.2s ease-in 0.1s;
}
.nft-image {
    box-shadow: 0px 1px 3px #000;
    border-radius: 2px;
    border-top: 4px solid #333;
    border-right: 4px solid #131313;
    border-bottom: 4px solid #111;
    border-left: 4px solid #222;
    width: 120px;
}
.nft-image-big {
    box-shadow: 0px 1px 3px #000;
    border-radius: 500px;
    margin: 0 auto 20px;
    border: 4px solid #ffffff;
    width: 240px;
    animation-name: float;
    animation-duration: 4s;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes float {
  0%   {transform: translateY(13px);}
  50%  {transform: translateY(17px);}
  100%  {transform: translateY(13px);}
}
.nft-image-flash {
    cursor:pointer;
}
.nft-image-flash:hover {
    animation-name: flashnft;
    animation-duration: 0.8s;
    animation-direction: normal;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes flashnft {
  0% {filter: drop-shadow(0px 0px 0px cyan);}
  16.6% {filter: drop-shadow(0px 0px 8px cyan);}
  33.33% {filter: drop-shadow(0px 0px 0px red);}
  50% {filter: drop-shadow(0px 0px 8px red);}
  66.6% {filter: drop-shadow(0px 0px 0px purple);}
  83.3% {filter: drop-shadow(0px 0px 11px purple);}
  100% {filter: drop-shadow(0px 0px 0px cyan);}
}
button.menu-button {
    margin: 0 10px;
    width: 150px;
    text-align: center;
    padding: 10px 20px 12px;
    display:inline-block;
    font-size: 24px;
    text-shadow: 0px 0px 10px #000;
    color: #fff;
    background-color: #fe0124;
    font-family: 'Zepto';
    font-weight: bold;
    border: 4px solid #fff;
    box-shadow: 0px 0px 5px #000 inset;
    cursor: pointer;
}
button.playground-button {
    margin: 0 10px;
    width: 150px;
    text-align: center;
    padding: 10px 20px 12px;
    display: inline-block;
    font-size: 24px;
    text-shadow: 0px 0px 10px #880088;
    color: #fff;
    background-image: linear-gradient(#bb22bb, #992299, #992299, #992299, #772277);
    font-family: 'Zepto';
    font-weight: bold;
    border: 4px solid #fff;
    box-shadow: 0px 0px 5px #880088 inset;
    cursor: pointer;
    border-radius:20px;
}
button.playground-button-svg {
    margin: 0 10px;
    width: 50px;
    text-align: center;
    padding: 7px 5px 5px;
    display: inline-block;
    text-shadow: 0px 0px 10px #555;
    color: #fff;
    background-image: linear-gradient(#555, #222, #222, #222, #000);
    font-family: 'Zepto';
    font-weight: bold;
    box-shadow: 0px 0px 5px #000;
    cursor: pointer;
}
button.playground-button-svg:active {
    box-shadow: 0px 0px 1px #000;
}
button.playground-button-svg:hover {
    background-image: linear-gradient(#666, #333, #333, #333, #111);
}
button.menu-button:hover {
    background-color: #e81633;
}
.button-left {
    border-radius: 50px 10px 10px 50px;
}
.button-right {
    border-radius: 10px 50px 50px 10px;
}
.wpml-ls-statics-footer {
    position: fixed;
    top: 20px;
    left: 20px;
    display: none;
}
button.load-more {
    margin-top: 20px;
}
.trait-title {
    margin-bottom:0 !important;
    text-shadow: 0px 2px 2px #000;
	font-family: 'Zepto';
}
.trait-description {
    margin-top:0;
    text-shadow: 0px 1px 1px #000;
	font-family: 'Zepto';
}
.zuckerbot-easter-egg {
    width:50%;
    animation-name: patrol;
    animation-duration: 22s;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes patrol {
  0% {transform: translateX(-65vw) scaleX(-1);}
  50% {transform: translateX(65vw) scaleX(-1);}
  52% {transform: translateX(65vw) scaleX(1);}
  98% {transform: translateX(-65vw) scaleX(1);}
  100% {transform: translateX(-65vw) scaleX(-1);}
}
body .hud-container {
    bottom: 0;
    background-image: linear-gradient(#442244, #331133, #331133, #331133, #110011);
    z-index:999999;
    width: 100%;
    margin-bottom: 0;
}
body .hud-container-top {
    top: 0;
    background-image:linear-gradient(#444444, #333333, #333333, #333333, #111111);
    z-index:999999;
    width: 100%;
    margin-bottom: 0;
}
.timer-top {
    text-align: center;
    font-size:20px;
    margin-top:2px !important;
    margin-bottom:2px !important;
}
.count-top {
    text-align: center;
    font-size:14px;
    margin-top:0px !important;
    margin-bottom:0px !important;
    animation-name: clickTopAnimation;
    animation-duration: 0.5s;
    animation-direction: normal;
    animation-timing-function: linear;
    animation-iteration-count: 1;
}
.click-count {
    font-size:28px !important;
    color: #ff66ff;
}
.click-count-animation-1 {
    animation-name: clickCountAnimation1;
    animation-duration: 0.5s;
    animation-direction: normal;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
}
.click-count-animation-2 {
    animation-name: clickCountAnimation2;
    animation-duration: 0.5s;
    animation-direction: normal;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
}
@keyframes clickCountAnimation1 {
  0% {text-shadow: 0px 0px 0px purple;}
  16.6% {text-shadow: 0px 0px 6px purple;}
  33.33% {text-shadow: 0px 0px 10px cyan;}
  50% {text-shadow: 0px 0px 12px #00ffffaa;}
  66.6% {text-shadow: 0px 0px 14px #ff999988;}
  83.3% {text-shadow: 0px 0px 16px #ff999955;}
  100% {text-shadow: 0px 0px 18px #ff999900;}
}
@keyframes clickCountAnimation2 {
  0% {text-shadow: 0px 0px 0px red;}
  16.6% {text-shadow: 0px 0px 6px red;}
  33.33% {text-shadow: 0px 0px 10px cyan;}
  50% {text-shadow: 0px 0px 12px #00ffffaa;}
  66.6% {text-shadow: 0px 0px 14px #ff99ff88;}
  83.3% {text-shadow: 0px 0px 16px #ff99ff55;}
  100% {text-shadow: 0px 0px 18px #ff99ff00;}
}
@keyframes clickTopAnimation {
  0% {transform: scale(1,1); text-shadow: 0px 0px 0px black;}
  16.6% {transform: scale(1.1,1.1); text-shadow: 0px 0px 10px black;}
  33.33% {transform: scale(1.2,1.2); text-shadow: 0px 0px 20px black;}
  50% {transform: scale(1.3,1.3); text-shadow: 0px 0px 30px black;}
  66.6% {transform: scale(1.2,1.2); text-shadow: 0px 0px 20px black;}
  83.3% {transform: scale(1.1,1.1); text-shadow: 0px 0px 10px black;}
  100% {transform: scale(1,1); text-shadow: 0px 0px 0px black;}
}
@keyframes clickTopAnimationGrenade {
  0%  {transform: rotate(0deg) scale(1,1); text-shadow: 0px 0px 50px red;}
  16.6% {transform: rotate(10deg) scale(1.1,1.1); text-shadow: 0px 0px 50px black;}
  33.33% {transform: rotate(-20deg) scale(1.2,1.2); text-shadow: 0px 0px 50px red;}
  50% {transform: rotate(30deg) scale(1.3,1.3); text-shadow: 0px 0px 50px black;}
  66.6% {transform: rotate(-20deg) scale(1.2,1.2); text-shadow: 0px 0px 50px red;}
  83.3% {transform: rotate(10deg) scale(1.1,1.1); text-shadow: 0px 0px 50px black;}
  100% {transform: rotate(0deg) scale(1,1); text-shadow: 0px 0px 50px red;}
}
.centered-fixed {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
}
.hud-wrapper-top {
    position: relative;
    margin: 0 auto;
    display: flex;
    height: 100px;
}
.hud-wrapper {
    position: relative;
    margin: 0 auto;
    display: flex;
    height: 200px;
}
.hud-div {
    position: relative;
    margin: 0 auto;
    vertical-align:top;
}
.inline-block {
    display:inline-block;
}
.hud-centre {
    width:600px;
}
.hud-section {
    width:100px;
}
body .hud-section-middle {
    height:100px;
}
body .hud-section-middle-top {
    width:200px;
    height:100px;
}
.chosen-nft-overlay {
    position: absolute;
    left: 0;
    width:200px;
    border-radius: 2px;
}
.chosen-nft {
    position: relative;
    width:120px;
    margin: 40px;
    border-radius: 2px;
    box-shadow: 0px 0px 50px #ff00ff;
}
.playground-container {
    position:absolute;
    top: 0;
    padding: 100px 0;
    height:calc(100vh - 200px);
    z-index:9;
    width: 100%;
    margin-bottom: 0;
}
.luck-background {
    animation-name: luckyBack;
    animation-duration: 30s;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes luckyBack {
  0%   {box-shadow: 0px 0px 60vw #ff00ff55 inset;}
  16.6%  {box-shadow: 0px 0px 80vw #ff00ff55 inset;}
  33.33%  {box-shadow: 0px 0px 70vw #00ffff55 inset;}
  50% {box-shadow: 0px 0px 50vw #ff00ff55 inset;}
  66.6%  {box-shadow: 0px 0px 60vw #ff00ff55 inset;}
  83.3%  {box-shadow: 0px 0px 90vw #ff000055 inset;}
  100% {box-shadow: 0px 0px 60vw #ff00ff55 inset;}
}
@keyframes focusBack {
  0%   {box-shadow: 0px 0px 60vw #00ffff55 inset;}
  16.6%  {box-shadow: 0px 0px 80vw #00ffff55 inset;}
  33.33%  {box-shadow: 0px 0px 70vw #ff00ff55 inset;}
  50% {box-shadow: 0px 0px 50vw #00ffff55 inset;}
  66.6%  {box-shadow: 0px 0px 60vw #00ffff55 inset;}
  83.3%  {box-shadow: 0px 0px 90vw #ff000055 inset;}
  100% {box-shadow: 0px 0px 60vw #00ffff55 inset;}
}
@keyframes makerBack {
  0%   {box-shadow: 0px 0px 60vw #ff000055 inset;}
  16.6%  {box-shadow: 0px 0px 80vw #ff000055 inset;}
  33.33%  {box-shadow: 0px 0px 70vw #ff00ff55 inset;}
  50% {box-shadow: 0px 0px 50vw #ff000055 inset;}
  66.6%  {box-shadow: 0px 0px 60vw #ff000055 inset;}
  83.3%  {box-shadow: 0px 0px 90vw #00ffff  55 inset;}
  100% {box-shadow: 0px 0px 60vw #ff000055 inset;}
}
@keyframes focusPop {
  0%   {box-shadow: 0px 0px 50vw #00ffff55 inset;}
  16.6%  {box-shadow: 0px 0px 0vw #00000055 inset;}
  33.33%  {box-shadow: 0px 0px 50vw #00ffff55 inset;}
  50% {box-shadow: 0px 0px 0vw #000055 inset;}
  66.6%  {box-shadow: 0px 0px 50vw #00ffff55 inset;}
  83.3%  {box-shadow: 0px 0px 0vw #00000055 inset;}
  100% {box-shadow: 0px 0px 50vw #00ffff55 inset;}
}
@keyframes invulnerable {
  0%   {box-shadow: 0px 0px 50vw #ff000055 inset;}
  16.6%  {box-shadow: 0px 0px 0vw #00000055 inset;}
  33.33%  {box-shadow: 0px 0px 50vw #ff000055 inset;}
  50% {box-shadow: 0px 0px 0vw #000055 inset;}
  66.6%  {box-shadow: 0px 0px 50vw #ff000055 inset;}
  83.3%  {box-shadow: 0px 0px 0vw #00000055 inset;}
  100% {box-shadow: 0px 0px 50vw #ff000055 inset;}
}
@keyframes clickBlock {
  0%   {box-shadow: 0px 0px 50vw #ffa50055 inset;}
  16.6%  {box-shadow: 0px 0px 0vw #00000055 inset;}
  33.33%  {box-shadow: 0px 0px 50vw #ffa50055 inset;}
  50% {box-shadow: 0px 0px 0vw #000055 inset;}
  66.6%  {box-shadow: 0px 0px 50vw #ffa50055 inset;}
  83.3%  {box-shadow: 0px 0px 0vw #00000055 inset;}
  100% {box-shadow: 0px 0px 50vw #ffa50055 inset;}
}
.playground-wrapper {
    position: relative;
    margin: 0 auto;
    display: flex;
    height: calc(100vh - 300px);
}
.playground-background {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    background-image:url(../img/content/Website_Banner_Final_800x450.gif);
    background-position: center;
    background-size:cover;
    background-repeat:no-repeat;
    z-index:-1;
    opacity:0.9;
    transition: all 0.8s ease-in 0s;
}
.playground-background-blur {
    filter: blur(8px);
    -webkit-filter: blur(8px);
    transition: all 0.8s ease-in 0s;
    opacity:0.5;
}
.playground-background-more {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    filter: blur(4px);
    -webkit-filter: blur(10px);
    background-image:url(../img/content/Website_Banner_Final_800x450.gif);
    background-position: center;
    background-size:cover;
    background-repeat:no-repeat;
    opacity:0.4;
}
.main-clickable-box {
    position: absolute;
    height: 60px;
    width:60px;
    border-radius:500px;
    top:0;
    left:50%;
    transform:translateX(-50%);
}
.maker-robot {
    position: absolute;
    bottom:200px;
    transform:translateX(-50%);
    left:80%;
    width:75px;
    height:80px;
    filter: drop-shadow(0px 0px 20px #000);
    z-index:99999999;
    animation-name: makerRobotGrenade1;
    animation-duration: 0.5s;
    animation-direction: normal;
    animation-timing-function: linear;
    animation-iteration-count: 1;
}
@keyframes makerRobot1 {
  0%   {opacity:1;}
  79%   {opacity:1;}
  80%   {transform: translate(-50%, 0) rotate(0deg) scale(1,1);animation-timing-function: ease-in;filter: drop-shadow(0px 0px 20px #000);}
  82%   {transform: translate(-51%, -8px) rotate(5deg) scale(1.2,1.2);animation-timing-function: ease-in;filter: drop-shadow(0px 0px 25px #ff0000);}
  86%   {transform: translate(-49%, -8px) rotate(-5deg) scale(1.2,1.2);animation-timing-function: ease-in;filter: drop-shadow(0px 0px 25px #770000);}
  90%   {transform: translate(-51%, -8px) rotate(5deg) scale(1.2,1.2);animation-timing-function: ease-in;filter: drop-shadow(0px 0px 25px #ff0000);}
  94%   {transform: translate(-49%, -8px) rotate(-5deg) scale(1.2,1.2);animation-timing-function: ease-in;filter: drop-shadow(0px 0px 25px #770000);}
  96%   {transform: translate(-50%, 0) rotate(0deg) scale(1,1);animation-timing-function: ease-in;filter: drop-shadow(0px 0px 20px #000);}
  100%   {transform: translate(-50%, 0) rotate(0deg) scale(1,1);animation-timing-function: ease-in;filter: drop-shadow(0px 0px 20px #000);}
}
@keyframes makerRobot2 {
  0%   {transform: translate(-50%, 0) scaleX(-1);animation-timing-function: linear;}
  16.6%  {transform: translate(-275%, -5vh) scaleX(-1);animation-timing-function: linear;}
  33.33%  {transform: translate(-500%, 0) scaleX(-1);animation-timing-function: ease-in;}
  50% {transform: translate(-500%, 0) scaleX(-1);animation-timing-function: ease-in;}
  50.1% {transform: translate(-500%, 0) scaleX(1);animation-timing-function: linear;}
  66.6%  {transform: translate(-250%, -5vh) scaleX(1);animation-timing-function: linear;}
  83.3%  {transform: translate(0%, 0) scaleX(1);animation-timing-function: ease-in;}
  83.4%  {transform: translate(0%, 0) scaleX(-1);animation-timing-function: ease-in;}
  100% {transform: translate(-50%, 0) scaleX(-1);animation-timing-function: ease-in;}
}
@keyframes makerRobot3 {
  0%   {transform: translate(-50%, 0) scaleX(-1);animation-timing-function: ease-in;}
  12.5%  {transform: translate(-75%, 0) scaleX(-1);animation-timing-function: ease-out;}
  25%  {transform: translate(-75%, -5vh) scaleX(-1);animation-timing-function: ease-in;}
  37.5% {transform: translate(-75%, 0) scaleX(-1);animation-timing-function: ease-in;}
  37.6% {transform: translate(-75%, 0) scaleX(1);animation-timing-function: ease-in;}
  62.5% {transform: translate(-25%, 0) scaleX(1);animation-timing-function: ease-out;}
  75%  {transform: translate(-25%, -5vh) scaleX(1);animation-timing-function: ease-in;}
  87.5%  {transform: translate(-25%, 0) scaleX(1);animation-timing-function: ease-in;}
  87.6%  {transform: translate(-25%, 0) scaleX(-1);animation-timing-function: ease-in;}
  100% {transform: translate(-50%, 0) scaleX(-1);animation-timing-function: ease-in;}
}
.maker-robot-grenade {
    position: absolute;
    bottom:200px;
    transform:translateX(-50%);
    left:19%;
    width:25px;
    height:40px;
    filter: drop-shadow(0px 0px 20px #000);
    z-index:999999999;
    animation-name: makerRobotGrenade1;
    animation-duration: 0.5s;
    animation-direction: normal;
    animation-timing-function: linear;
    animation-iteration-count: 1;
}
@keyframes makerRobotGrenade1 {
  0%   {opacity:0;}
  79%   {opacity:1;}
  80%   {transform: translate(-50%, 0) rotate(0deg) scale(1,1);animation-timing-function: ease-in;filter: drop-shadow(0px 0px 20px #000);}
  82%   {transform: translate(-51%, -8px) rotate(5deg) scale(1.2,1.2);animation-timing-function: ease-in;filter: drop-shadow(0px 0px 25px #ff0000);}
  86%   {transform: translate(-49%, -8px) rotate(-5deg) scale(1.2,1.2);animation-timing-function: ease-in;filter: drop-shadow(0px 0px 25px #770000);}
  90%   {transform: translate(-51%, -8px) rotate(5deg) scale(1.2,1.2);animation-timing-function: ease-in;filter: drop-shadow(0px 0px 25px #ff0000);}
  94%   {transform: translate(-49%, -8px) rotate(-5deg) scale(1.2,1.2);animation-timing-function: ease-in;filter: drop-shadow(0px 0px 25px #770000);}
  96%   {transform: translate(-50%, 0) rotate(0deg) scale(1,1);animation-timing-function: ease-in;filter: drop-shadow(0px 0px 20px #000);}
  100%   {transform: translate(-50%, 0) rotate(0deg) scale(1,1);animation-timing-function: ease-in;filter: drop-shadow(0px 0px 20px #000);}
}
@keyframes makerRobotGrenade2 {
  0%   {transform: translate(-50%, 0) rotate(0deg) scale(1,1);animation-timing-function: ease-in;filter: drop-shadow(0px 0px 20px #000);}
  50%   {transform: translate(-50%, 0) rotate(0deg) scale(1,1);animation-timing-function: ease-in;filter: drop-shadow(0px 0px 20px #000);}
  50.1%   {transform: translate(-50%, 4px) rotate(5deg) scale(0.8,0.8);animation-timing-function: linear;filter: drop-shadow(0px 0px 20px #000);}
  66.6%   {transform: translate(750%, -5.1vh) rotate(5deg) scale(0.8,0.8);animation-timing-function: linear;filter: drop-shadow(0px 0px 20px #000);}
  83.3%   {transform: translate(1420%, 0) rotate(5deg) scale(0.8,0.8);animation-timing-function: ease-in;filter: drop-shadow(0px 0px 20px #000);}
  83.4%   {transform: translate(1420%, 0) rotate(5deg) scale(0.8,0.8);animation-timing-function: ease-in;filter: drop-shadow(0px 0px 20px #000);}
  100%   {transform: translate(1300%, 0) rotate(5deg) scale(0.8,0.8);animation-timing-function: ease-in;filter: drop-shadow(0px 0px 20px #000);}
}
.main-clickable-image {
    position: relative;
    margin:100px auto 0;
    padding:10px;
    transform:translateX(-50%);
    width:80px;
    height:80px;
    border-radius:200px;
    background-color:#160116cc;
    box-shadow:0px 0px 20px #000;
    cursor:crosshair;
}
.main-clickable {
    position: relative;
    width:60px;
    height:60px;
    border-radius:200px;
    background-color:#692769;
    box-shadow:0px 0px 8px #000 inset;
    cursor:crosshair;
}
.clicked-animation-1 {
    animation-name: clickedAnimation1;
    animation-duration: 0.7s;
    animation-direction: normal;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
}
@keyframes clickedAnimation1 {
  0%   {box-shadow: 0px 0px 0px purple;}
  16.6%  {box-shadow: 0px 0px 30px purple;}
  33.33%  {box-shadow: 0px 0px 45px cyan;}
  50% {box-shadow: 0px 0px 50px #00ffffaa;}
  66.6%  {box-shadow: 0px 0px 55px #ff000088;}
  83.3%  {box-shadow: 0px 0px 60px #ff000055;}
  100% {box-shadow: 0px 0px 65px #ff000000;}
}
.clicked-animation-2 {
    animation-name: clickedAnimation2;
    animation-duration: 0.7s;
    animation-direction: normal;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
}
@keyframes clickedAnimation2 {
  0%   {box-shadow: 0px 0px 0px red;}
  16.6%  {box-shadow: 0px 0px 30px red;}
  33.33%  {box-shadow: 0px 0px 45px cyan;}
  50% {box-shadow: 0px 0px 50px #00ffffaa;}
  66.6%  {box-shadow: 0px 0px 55px #ff00ff88;}
  83.3%  {box-shadow: 0px 0px 60px #ff00ff55;}
  100% {box-shadow: 0px 0px 65px #ff00ff00;}
}
.main-clickable-button {
    display:inline-block;
    width:75%;
    height:75%;
    margin:12.5%;
    border-radius:200px;
    background-color:#ffffff;
    background-image:url("../img/content/click-disc-120-purple-quad-spiral1.png");
    background-position:center;
    background-size:contain;
    box-shadow:0px 0px 10px #000 inset;
    transition: 0s;
    opacity:0.8;
}
@keyframes mainClickableRotation {
  0%   {transform: rotate(0deg);}
  100% {transform: rotate(-360deg);}
}
.boost-container {
    position:absolute;
    width:100px;
    height:100px;
    background-color:#00ffff;
    box-shadow:0px 0px 30px #00ffff;
    left:50%;
    border-radius: 50px;
    transition-timing-function:ease-in;
    box-shadow:0px 0px 20px #000 inset;
    transition:3s;
    cursor:grab;
    font-size:60px;
    text-align: center;
}
.invulnerable-container {
    position:absolute;
    width:100px;
    height:100px;
    background-color:#ff0000;
    box-shadow:0px 0px 30px #ff0000;
    left:50%;
    border-radius: 50px;
    transition-timing-function:ease-in;
    box-shadow:0px 0px 20px #000 inset;
    transition:3s;
    cursor:grab;
    font-size:60px;
    text-align: center;
}
.disable-container {
    position:absolute;
    width:100px;
    height:100px;
    background-color:#ffa500;
    box-shadow:0px 0px 30px #ffa500;
    left:50%;
    border-radius: 50px;
    transition-timing-function:ease-in;
    box-shadow:0px 0px 20px #000 inset;
    transition:3s;
    cursor:grab;
    font-size:60px;
    text-align: center;
}
.event-message {
    position: absolute;
    left: 50%;
    margin-top: 6px !important;
    transform: translateX(-50%);
    text-transform: uppercase;
    text-shadow: 0px 0px 20px #ff00ff;
}
.clicked-button {
    transition: ease-out 0.2s;
}
.clicked {
    transition: ease-out 0.2s;
}
.play-again-button {
    position: absolute;
    bottom: 16px;
    left: calc(50% + 180px);
    transform: translateX(-50%);
}
.play-again-button-svg {
    position: absolute;
    top: -80px;
    left: calc(50% + 92px);
    transform: translateX(-50%);
}
.fullscreen-toggle {
    position: absolute;
    top: 20px;
    left: calc(50% - 120px);
    transform: translateX(-50%);
    z-index:9999;
}
.attribute-container {
    position: relative;
    width: 50%;
    margin: 50px 5%;
    display: inline-block;
}
.attribute-point-container {
    width: 242px;
    height: 64px;
    padding: 10px;
    position: relative;
    border: 1px solid #fff;
    animation-name: attrContainer;
    animation-duration: 4s;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.attribute-point {
    display: inline-block;
    width: 18px;
    height: 36px;
    margin: 2px;
    background-color: #2bfff2;
    box-shadow: 0px 0px 8px #000000 inset;
}
@keyframes attrContainer {
  0%   {box-shadow: 0px 0px 0px cyan;}
  16.6%  {box-shadow: 0px 0px 8px cyan;}
  33.33%  {box-shadow: 0px 0px 0px red;}
  50% {box-shadow: 0px 0px 8px red;}
  66.6%  {box-shadow: 0px 0px 0px purple;}
  83.3%  {box-shadow: 0px 0px 11px purple;}
  100% {box-shadow: 0px 0px 0px cyan;}
}
.disable-select {
    user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
}
.button-svg {
    width: 20px;
    height: 20px;
    padding: 1px;
    margin-top: 5px;
}
.ability-box {
    position:absolute;
    width:100px;
    height:100px;
    padding:5px;
}
.ability-inner-box {
    position:relative;
    width:88px;
    height:88px;
    margin:1px;
    border-top: 2px solid #666;
    border-left: 2px solid #333;
    border-bottom: 2px solid #111;
    border-left: 2px solid #333;
    box-shadow: 0px 0px 5px #000;
    background-size: contain;
    cursor:crosshair;
    z-index:8;
}
.ability-inner-box:hover {
    box-shadow: 0px 0px 5px #fff;
}
.ability-overlay-0 {
    left:-40px;
    bottom:0px;
}
.ability-overlay-1 {
    left:60px;
    bottom:0px;
}
.ability-overlay-2 {
    left:160px;
    top:-90px;
}
.ability-overlay-3 {
    left: 260px;
    top: -90px;
}
.ability-overlay-common {
    background-color: #000;
    width: 90px;
    height: 90px;
    opacity:0;
    z-index:1;
}
.ability-active-overlay {
    z-index:9 !important;
    animation-name: overlayFade;
    animation-duration: 4s;
    animation-direction: normal;
    animation-timing-function: linear;
    animation-iteration-count: 1;
}
@keyframes overlayFade {
  0%   {opacity: 0.5;}
  100%  {opacity: 0;}
}
.ability-active {
    transform: scale(0.8);
    cursor:auto;
}
.ability-inner-0 {
    background-image: url(../img/abilities/ability-grenade.png);
}
.ability-inner-1 {
    background-image: url(../img/abilities/ability-nothing2.png);
}
.ability-inner-2 {
    background-image: url(../img/abilities/ability-nothing2.png);
}
.ability-inner-3 {
    background-image: url(../img/abilities/ability-nothing1.png);
}
.ability-0 {
    left:-45px;
    bottom:-5px;
}
.ability-1 {
    left:55px;
    bottom:-5px;
}
.ability-2 {
    left:155px;
    top:-95px;
}
.ability-3 {
    left:255px;
    top:-95px;
}
.hotkey {
    font-family: monospace;
    position: absolute;
    top: -5px;
    left: -5px;
    width: 16px;
    height: 18px;
    font-size: 12px;
    line-height: 15px;
    text-align: center;
    background-color: #222;
    color: #888;
    border-radius: 5px;
    border: 1px solid;
    box-shadow: 0px 0px 5px #000;
}
.wallet-connect-container {
    top:25vh;
}
@media only screen and (max-width: 900px) {
    
}
@media only screen and (max-width: 600px) {
    
}