* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Titan One", sans-serif;
}

.lucky_font {
  font-family: "Luckiest Guy", cursive;
}

.outfit_font {
    font-family: "Outfit", sans-serif;
}

section:not(.hero) .title {
    text-shadow: 0px 12px 0px #000000bf;
    -webkit-text-stroke: 4px black;
  }

/* navbar */
nav .logo h2 {
  text-shadow: 0 3px 0 black;
  -webkit-text-stroke: 1px black;
}

nav li:hover a {
  color: rgb(20, 20, 20);
}

nav li a{
  font-family: "Luckiest Guy", cursive;
}

nav .buy {
  box-shadow: 0px 4.55px 0px 0px #000000;
  font-family: "Luckiest Guy", cursive;
}

nav .social .media {
  box-shadow: 2.09px 2.09px 0px 0px #000000;
}

nav .social .media:hover {
  transform: scale(1.1);
}


/* menu button */
.menu {
  transform: translateX(-100%);
}

.menu-button {
  display: none;
  overflow: hidden;

  height: 35px;
  width: 45px;

  position: relative;

  align-items: center;
}

.menu-button span {
  width: 100%;
  height: 3px;
  background-color: white;
  position: absolute;
  transition: all 0.3s ease-in-out;
}

.menu-button span:nth-child(1) {
  top: 0;
}

.menu-button span:nth-child(2) {
  position: relative;
}

.menu-button span:nth-child(3) {
  bottom: 0;
}

.menu-button.active span:nth-child(1) {
  transform: rotate(45deg);
  top: 1rem;
}

.menu-button.active span:nth-child(2) {
  width: 0%;
}

.menu-button.active span:nth-child(3) {
  transform: rotate(-45deg);
  bottom: 1rem;
}

/* hero section */
.hero .title {
  -webkit-text-stroke: 4px black;
  text-shadow: 0 15px 0 black;
}

.rotate_img {
  animation: img_rotate 10s linear infinite;
}

@keyframes img_rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* animation */
.float_animation{
  animation: float 2s ease-in-out infinite;
}
@keyframes float {
0% {
  transform: translatey(0px);
}
50% { 
  transform: translatey(-20px);
}
100% {
  transform: translatey(0px);
}
}

/* about srction */
.about .btn {
  box-shadow: 0px 5px 0px 0px #000000bf;
}

.about .text h3 {
  -webkit-text-stroke: 4px black;
  text-shadow: 0 12px 0 black;
}

/* tokenomics srction */
.tokenomics .title {
  text-shadow: 0px 12px 0px #000000bf;
  -webkit-text-stroke: 4px black;
}

.copy_address:hover p {
  border-bottom: 2px solid black;
}

.tokenomics .contract {
  box-shadow: 0px 10px 0px 0px #00000073;
}

.tokenomics .btn {
  box-shadow: 0px 5px 0px 0px #000000bf;
}


/* roadmap */

.phase h1 {
    text-shadow: 2px 3px 0px #000000bf;
    -webkit-text-stroke: 1.5px black;
  } 


/* footer */
.patners h2{
    text-shadow: 3px 4px 0px #000000bf;
    -webkit-text-stroke: 1.5px black;
}

.by .social a{
    box-shadow: 1.45px 1.45px 0px 0px #000000;

}


/* media queries */
@media screen and (max-width: 1500px) {
  /* about srction */
  .about .btn {
    box-shadow: 0px 3px 0px 0px #000000bf;
  }

  .about .text h3 {
    -webkit-text-stroke: 2px black;
    text-shadow: 0 7px 0 black;
  }
}

@media screen and (max-width: 1024px) {
  .menu-button {
    display: flex;
    position: absolute;
    right: 0;
  }

  .menu {
    transform: translateX(-100%);
  }

  .menu.active {
    transform: translateX(0%);
  }

  /* hero */
  .hero .title {
    -webkit-text-stroke: 3px black;
    text-shadow: 0 12px 0 black;
  }
}

@media screen and (max-width: 500px) {
    
  section:not(.hero) .title {
    text-shadow: 0px 5px 0px #000000bf;
    -webkit-text-stroke: 1.5px black;
  } 

  /* navbar */
  .menu-button {
    width: 27px;
    height: 23px;
  }

  .menu-button.active span:nth-child(1) {
    top: 0.6rem;
  }

  .menu-button.active span:nth-child(3) {
    bottom: 0.7rem;
  }

  nav .buy {
    box-shadow: 0px 2.55px 0px 0px #000000;
  }

  nav .social .media {
    box-shadow: 1.09px 1.09px 0px 0px #000000;
  }

  /* hero */
  .hero .title {
    -webkit-text-stroke: 2px black;
    text-shadow: 0 8px 0 black;
  }

  /* about srction */
  .about .btn {
    box-shadow: 0px 3px 0px 0px #000000bf;
  }

  .about .text h3 {
    -webkit-text-stroke: 1px black;
    text-shadow: 0 5px 0 black;
  }

  /* tokenomics srction */

  .copy_address:hover p {
    border-bottom: 2px solid black;
  }

  .tokenomics .contract {
    box-shadow: 0px 10px 0px 0px #00000073;
  }

  .tokenomics .btn {
    box-shadow: 0px 5px 0px 0px #000000bf;
  }
}