* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
@font-face {
  font-family: "milky";
  src: url("../fonts/MilkyNice-Clean.ttf");
}

:root {
  --font_milky: "milky", sans-serif;
  /* HYPER HAMSTER Orange/Teal Theme */
  --primary-orange: #FF6B35;
  --primary-teal: #00C9A7;
  --dark-bg: #1a1a2e;
  --light-bg: #f0f7f4;
}

html {
  scroll-behavior: smooth;
}

body{
  font-family: var(--font_milky);
  color: #000;
}

/* copy */
.icon.copy_address.active{
  background-color: rgb(0, 151, 0);
}

/* lines */
.snow-cap::before {
  top: 0;
  margin-top: -3rem;
  left: 0;
  background-image: url("../img/slot21.svg");
  background-repeat: repeat-x;
}

.snow-cap::before, .snow-cap-2::before, .snow-cap-3::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 140px;
  z-index: 1;
}

/* navbar fix */
.menu-list a{
  padding: 0 2.3rem;
  height: 45px;
  text-align: center;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .3s ease-in-out;
  color: #000;
}

.menu-list a:hover{
  background-color: #00C9A7;
  color: #fff;
}

.menu-list a.active{
  border: 2px solid #FF6B35;
}

/* hero */
.shadow_title{
  text-shadow: -1px 0 black, 0 9px black, 1px 0 black, 0 -1px black;
}

.hero .title{
  text-shadow: -1px 0 black, 0 15px black, 1px 0 black, 0 -1px black;
}

.left_right_animation{
  animation: animated 10s linear infinite;
}

@keyframes animated {
  0%,50%,100%{
    transform: translateX(0%);
  }
  20%{
    transform: translateX(15%);
  }
  70%{
    transform: translateX(-15%);
  }
}

.wobble{
  animation: wobble 1s linear infinite;
}


@keyframes wobble {
  0% {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
  }
  15% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -5deg);
    -ms-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -5deg)
  }
  30% {
    -webkit-transform: translate3d(2%, 0, 0) rotate3d(0, 0, 1, 3deg);
    -ms-transform: translate3d(2%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(2%, 0, 0) rotate3d(0, 0, 1, 3deg)
  }
  45% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -3deg);
    -ms-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -3deg)
  }
  60% {
    -webkit-transform: translate3d(3%, 0, 0) rotate3d(0, 0, 1, 2deg);
    -ms-transform: translate3d(3%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(3%, 0, 0) rotate3d(0, 0, 1, 2deg)
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    -ms-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
  }
  100% {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble
}



/* ecosystem */
.union_hover:hover img:nth-child(2){
  rotate: -10deg;
}

/* tokens */
.token._1 ,
.token._3 {
  rotate: 10deg;
}

.token._1:hover,
.token._2:hover,
.token._3:hover,
.token._4:hover{
  rotate: 0deg;
}

.token._2 ,
.token._4 {
  rotate: -10deg;
}

.token._1 .icon div{
  background: radial-gradient(circle, rgba(255, 147, 86, 1) 0%, rgba(255, 107, 53, 1) 100%);
}
.token._2 .icon div{
  background: radial-gradient(circle, rgba(0, 230, 190, 1) 0%, rgba(0, 201, 167, 1) 100%);
}
.token._3 .icon div{
  background: radial-gradient(circle, rgba(255, 200, 150, 1) 0%, rgba(255, 160, 100, 1) 100%);
}
.token._4 .icon div{
  background: radial-gradient(circle, rgba(150, 255, 230, 1) 0%, rgba(100, 230, 200, 1) 100%);
}

.token:hover{
  rotate: 0 !important;
  cursor: pointer;
}

.token{
  animation: token 3s linear infinite;
}

@keyframes token {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
      transform: translateY(-15px);
  }
}

.how{
  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}


/* footer */
footer{
  background: linear-gradient(180deg, #FF6B35 22%, rgba(255, 255, 255, 1) 100%);
}

footer a,
footer p{
  font-family: "Montserrat", sans-serif;
}

.text_about_footer,
footer .link h3,
footer .link a{
  text-shadow: .3px .5px 0 white;
  font-weight: 600;
  transition: .2s;
}

footer .link a:hover{
  color: white;
}

footer .social a:hover{
  scale: 1.1;
}

.faq_text{
  height: 0;
}

.faq.active{
  height: auto;
  padding-bottom: 1rem;
}

.faq.active .faq_text{
  height: auto;
}

.faq.active .icon{
  rotate: 180deg;
}

/* animation */
.title h2 span{
  animation: text_title 3s linear infinite;
}

.title h2 span:nth-child(1),
.title h2 span:nth-child(3),
.title h2 span:nth-child(5),
.title h2 span:nth-child(7),
.title h2 span:nth-child(9),
.title h2 span:nth-child(11){
  rotate: -10deg;
}

.title h2 span:nth-child(2),
.title h2 span:nth-child(4),
.title h2 span:nth-child(6),
.title h2 span:nth-child(8),
.title h2 span:nth-child(10),
.title h2 span:nth-child(12){
  rotate: 10deg;
}

.title h2 span:nth-child(1){
  animation-delay: .2s;
}
.title h2 span:nth-child(2){
  animation-delay: .4s;
}
.title h2 span:nth-child(3){
  animation-delay: .1s;
}
.title h2 span:nth-child(4){
  animation-delay: .6s;
}
.title h2 span:nth-child(5){
  animation-delay: .5s;
}
.title h2 span:nth-child(6){
  animation-delay: .3s;
}
.title h2 span:nth-child(7){
  animation-delay: .5s;
}
.title h2 span:nth-child(8){
  animation-delay: .7s;
}
.title h2 span:nth-child(9){
  animation-delay: .4s;
}
.title h2 span:nth-child(10){
  animation-delay: .2s;
}
.title h2 span:nth-child(11){
  animation-delay: .6s;
}
.title h2 span:nth-child(12){
  animation-delay: .3s;
}

@keyframes text_title {
  0%,100%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(-5%);
  }
}


/* union */
.union{
  animation: union 2s linear infinite;
  rotate: -10deg;
}

.union:hover{
  rotate: 0deg;
}


@keyframes union {
  0%, 100% {
    transform: translateY(0);
}
50% {
    transform: translateY(-15px);
}
}

.zoom_animation{
  animation: zoom_animation 15s linear infinite;
}

@keyframes zoom_animation {
  0%,100%{
    transform: scale(1);
  }
  50%{
    transform: scale(1.1);
  }
}


/* media queries */
@media screen and (max-width:500px) {
  .snow-cap::before, .snow-cap-2::before, .snow-cap-3::after {
    top: -15px;
    margin-top: 0rem;
    background-size: contain;
  }

  /* hero */
  .shadow_title{
    text-shadow: -1px 0 black, 0 5px black, 1px 0 black, 0 -1px black;
  }

  .hero .title{
    text-shadow: -1px 0 black, 0 5px black, 1px 0 black, 0 -1px black;
  }

  /* token */
  .token._1 ,
  .token._3 ,
  .token._2 ,
  .token._4 {
     rotate: 0deg;
  }

}

/* Telegram icon styling */
.telegram-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image fallback styles */
img {
  background-color: #f0f0f0;
  object-fit: cover;
}

img[src$=".png"],
img[src$=".jpg"],
img[src$=".jpeg"] {
  background-color: transparent;
}