* {
    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;
    }
}