@import url("https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Comic+Neue:wght@300;400;700&display=swap");
@import url("https://fonts.cdnfonts.com/css/pricedown");
@import url("https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Poppins:wght@300;400;500;600;700&display=swap");
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.font-luckiest {
  font-family: Luckiest Guy, cursive;
}
.clip-custom {
  clip-path: polygon(0 0, 100% 30%, 100% 100%, 100% 100%, 0 100%);
}
.clip-left {
  padding-top: 50% !important;
  clip-path: polygon(0 0, 100% 40%, 100% 0, 100% 100%, 0 100%);
}
.game-container {
  position: relative;
  width: 100%;
  height: 100vh;
}
.game-container iframe {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.clip-card,
.clip-wrapper:before {
  clip-path: polygon(0 0, 100% 50%, 100% 100%, 0 100%, 0 85%);
}
@keyframes soft-bounce {
  0% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-10px);
  }
  80% {
    transform: translateY(4px);
  }
  to {
    transform: translateY(0);
  }
}
.group:hover .bounce-on-hover {
  animation: soft-bounce 0.6s ease-out;
}
.clip-card {
  z-index: 10;
}
.clip-card,
.clip-wrapper {
  position: relative;
}
.clip-wrapper:before {
  content: "";
  position: absolute;
  inset: 0;
  background: #588bb1;
  border-radius: 20px !important;
  transform: translate(-10px, 10px);
  z-index: 1;
}
.clip-cardright,
.clip-wrapperright:before {
  clip-path: polygon(0 0, 0 50%, 100% 0, 100% 100%, 0 100%);
}
.clip-cardright {
  z-index: 10;
}
.clip-cardright,
.clip-wrapperright {
  position: relative;
}
.clip-wrapperright:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px !important;
  background: #588bb1;
  transform: translate(10px, 10px);
  z-index: 1;
}
.clip-right {
  padding-top: 50% !important;
  clip-path: polygon(0 0, 0 40%, 100% 0, 100% 100%, 0 100%);
}
.font-pricedown {
  font-family: Pricedown, sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 1px;
}
.gradient-text {
  background: linear-gradient(
    87.72deg,
    #ffeaec 20.52%,
    #dae0ff 34.3%
  ) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
html {
  scroll-behavior: smooth;
}
body,
html {
  overflow-x: hidden !important;
}
body {
  color: white;
  background: rgba(223, 115, 48, 1);
  scroll-behavior: smooth !important;
}
:root {
  font-family: var(--font-poppins), sans-serif;
}
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-300%);
  }
}
.animate-scroll {
  display: inline-flex;
  animation: scroll 55s linear infinite;
}
.animate-scroll:hover {
  animation-play-state: paused;
}
@keyframes coin-bounce {
  0%,
  to {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  50% {
    transform: translateY(-20px);
    animation-timing-function: ease-in;
  }
}
.coinmove {
  animation: coin-bounce 1.5s infinite;
}
@keyframes coin-bounce2 {
  0%,
  to {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  50% {
    transform: translateY(40px);
    animation-timing-function: ease-in;
  }
}
.coinmove2 {
  animation: coin-bounce2 2s infinite;
}
.coinmobile {
  animation: coin-bouncemobile 2s infinite;
}
@keyframes coin-bouncemobile {
  0%,
  to {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  50% {
    transform: translateY(20px);
    animation-timing-function: ease-in;
  }
}
@keyframes coin-bounce3 {
  0%,
  to {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  50% {
    transform: translateY(-40px);
    animation-timing-function: ease-in;
  }
}
.coinmove3 {
  animation: coin-bounce3 1.3s infinite;
}
.coinmovemobile3 {
  animation: coin-bouncemobile3 1.3s infinite;
}
@keyframes coin-bouncemobile3 {
  0%,
  to {
    transform: translateY(10px);
    animation-timing-function: ease-out;
  }
  50% {
    transform: translateY(-10px);
    animation-timing-function: ease-in;
  }
}
.aboutcoinmove {
  animation: coin-about 2s ease-in infinite;
}
@keyframes coin-about {
  0% {
    transform: RotateY(0deg);
  }
  to {
    transform: RotateY(1turn);
  }
}
.walletbtn:hover:after {
  content: "Add SPYDOGE to Wallet";
  position: absolute;
  bottom: 20;
  z-index: 50;
  width: fit-content;
  height: fit-content;
  color: black;
  font-size: medium;
  background: transparent;
}
@keyframes blink {
  0% {
    border: 0 solid green-600;
    opacity: 1;
  }
  50% {
    opacity: 0.2;
    border: 2px solid green-600;
  }
  to {
    opacity: 1;
    border: 4px solid green-600;
  }
}
.dot {
  animation: blink 1s infinite;
}
@keyframes progress-striped {
  0% {
    background-position: 0 0;
  }
  to {
    background-position: 7rem 0;
  }
}
.custom-scroll::-webkit-scrollbar-button {
  display: none !important;
  height: 0;
  width: 0;
}
.animate-progress-striped {
  background-size: 7rem 7rem;
  animation: progress-striped 4s linear infinite;
}
@media (min-width: 1400px) {
  .buysection {
    margin-top: -33% !important;
    z-index: 9999 !important;
  }
  .phase1 {
    margin-top: 0 !important;
    margin-right: 40% !important;
  }
  .phase2 {
    margin-top: 55% !important;
  }
  .phase3 {
    margin-top: 0 !important;
    margin-left: 6% !important;
  }
  .phase4 {
    margin-top: -6% !important;
    margin-right: 5% !important;
  }
  .faq {
    margin-top: 0.5% !important;
  }
}
@media (min-width: 2500px) {
  .buysection {
    margin-top: -14% !important;
    z-index: 9999 !important;
  }
  .aboutbottom {
    height: 900px !important;
  }
}
@media (min-width: 4000px) {
  .aboutbottom {
    height: 1200px !important;
    margin-bottom: 10% !important;
  }
}
@media (max-width: 768px) {
  .animate-scroll {
    display: inline-flex;
    animation: scroll 12s linear infinite;
  }
}
w3m-all-wallets-view wui-flex[data-testid*="social"],
w3m-connect-view > wui-flex > wui-flex:first-child,
w3m-connecting-social-view,
w3m-email-login-widget,
w3m-modal [data-testid*="email"],
w3m-modal [data-testid*="social"],
w3m-modal [data-view="ConnectingSocial"],
w3m-modal [data-view="EmailVerifyDevice"],
w3m-modal [data-view="EmailVerifyOtp"],
w3m-modal [data-view="SocialLogin"],
w3m-modal button[aria-label*="Apple"],
w3m-modal button[aria-label*="Discord"],
w3m-modal button[aria-label*="Facebook"],
w3m-modal button[aria-label*="Google"],
w3m-modal button[aria-label*="Twitter"],
w3m-modal button[data-testid*="social"],
w3m-modal wui-email-input,
w3m-modal wui-input-text[type="email"],
w3m-modal wui-separator[text*="OR"],
w3m-modal wui-separator[text*="or"],
w3m-social-login-list {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
w3m-modal wui-separator {
  display: none !important;
}