@tailwind base;
@tailwind components;
@tailwind utilities;


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

@font-face {
    font-family: font1;
    src: url(/assets/font/NeueMontreal-Bold.otf);
}

html {
    scroll-behavior: smooth;
}

h1 {
    font-family: font1;
}

body {
    font-family: "Urbanist", sans-serif;
    font-weight: 400;
    background-color: #350E04;
    color: #fff;
    background-image: url('../images/body-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
}

p {
    font-size: 1.5vw;
    font-family: "Patrick Hand SC", cursive;
}

h2 {
    font-family: "Darumadrop One", sans-serif;
}


.header,
.toknomics,
.howtobg,
.howto {
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
}

.header {
    background-image: url('../images/header.png');
    height: 88vw;
    padding: 5vw;
    position: relative;
}


nav {
    display: flex;
    align-items: center;
    gap: 2vw;
    justify-content: center;
    background: #631E0C;
    width: 75%;
    margin: auto;
    font-family: "Patrick Hand SC", cursive;
    border-radius: 12px;
    color: #fff;
    font-size: 1.2vw;
    margin-bottom: 5vw;
}

nav .logo {
    width: 100%;
    max-width: 2vw;
    transform: scale(2.5);
}

nav .social {
    display: flex;
    align-items: center;
    gap: 2vw;
}

nav .social a img {
    width: 100%;
    max-width: 3vw;
    transform: scale(1.3);
}


.header .gif_1 {
    width: 100%;
    max-width: 20vw;
    position: absolute;
    top: 0;
    left: -5vw;
}

.header .gif_2 {
    width: 100%;
    max-width: 15vw;
    position: absolute;
    top: 10vw;
    right: 15vw;
}

.header .heading {
    width: 100%;
    max-width: 60vw;
    margin: auto;
}

.header h2 {
    font-size: 3vw;
    color: #fff;
    text-align: center;
    margin-top: 5vw;
}

.header .links {
    display: flex;
    align-items: center;
    gap: 2vw;
    justify-content: center;
}

.header .links a img {
    width: 100%;
    max-width: 20vw;
}


/* ==============.about  */

.about {
    margin-top: -10vw;
    position: relative;
    z-index: 10;
}

.about .glop {
    position: absolute;
    bottom: 0vw;
    left: 5vw;
    width: 100%;
    max-width: 10vw;
}

.about .box {
    background-image: linear-gradient(to right top, #74260e, #66280b, #5a280a, #4d280b, #42260d);
    padding: 2vw;
    border-radius: 2vw;
    width: 60%;
    margin: auto;
}

.about .box h2 {
    font-size: 2vw;
}

.about .box a img {
    width: 100%;
    max-width: 12vw;
    margin-top: 2vw;
}

/* toknomics. */
.toknomics {
    background-image: url('../images/tecnomic.png');
    z-index: -0;
    position: relative;
}

.toknomics .heading {
    margin: auto;
    width: 100%;
    max-width: 40vw;
    position: relative;
    z-index: 99;
}

.toknomics .gif-3 {
    position: absolute;
    right: 5vw;
    top: 5vw;
    transform: rotate(-90deg);
}

.token {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 5vw;
    gap: 5vw;
}

.token img {
    width: 100%;
    max-width: 20vw;
}

.token .center {
    margin-left: 30vw;
}

/* roadmap  */

.roadmap {
    position: relative;
    z-index: 9990;
    margin-top: 5vw;
}

.roadmap .heading {
    margin: auto;
    width: 100%;
    max-width: 40vw;

}

.roadmap .tokit {
    position: absolute;
    top: 0vw;
    left: 20vw;
    z-index: 99;
    top: -5vw;
}

.roadmap .roadmap_img {
    width: 100%;
    max-width: 80%;
    margin: auto;
}

.roadmap .roadmap-sun {
    position: absolute;
    width: 8vw;
    right: 30vw;
    top: 10vw;
}



/* howto  */

.howto {
    position: relative;
    z-index: 9990;
    margin-top: 5vw;
    background-image: url('../images/bg.png');
    padding-bottom: 5vw;
}

.layar-1 {
    position: absolute;
    left: 0;
    top: 10vw;
    width: 30vw;
}

.layar-2 {
    position: absolute;
    left: 0;
    top: 50vw;
    width: 30vw;
}



.howto .heading {
    margin: auto;
    width: 100%;
    max-width: 40vw;
}

.howto .howtobg {
    background-image: url('../images/howtobg.png');
    height: 150vw;
    padding: 5vw;
    position: relative;
}

.tokit-2 {
    position: absolute;
    top: 10vw;
    right: 2vw;
    width: 100%;
    max-width: 10vw;
}

.howtobg .box h2 {
    font-size: 3vw;
}

.howtobg .box img {
    width: 100%;
    max-width: 15vw;
    margin-left: auto;
}

.box_1 .step-2 {
    width: 100%;
    max-width: 15vw !important;
    margin-left: auto;
}

.howtobg .box_1 img {
    width: 100%;
    max-width: 20vw;
    margin-left: -3vw;
    margin-top: 5vw;
}


/* join  */
.join img {
    width: 100%;
    max-width: 80%;
    margin: auto;
    margin-top: 3vw;
}

.sky {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.sky .sky-1 {
    width: 100%;
    max-width: 15vw;
    animation: moveRightToLeft 5s linear infinite;
}

.sky .sky-2 {
    width: 100%;
    max-width: 30vw;
    animation: moveLeftToRight 5s linear infinite;
}


footer {
    display: flex;
    align-items: center;
    gap: 3vw;
    justify-content: center;
    width: 70%;
    margin: auto;
    font-family: "Patrick Hand SC", cursive;
    border-radius: 12px;
    color: #fff;
    font-size: 1.2vw;
    padding: 5vw 0vw;
    z-index: 99;
    position: relative;
}

footer .logo {
    width: 100%;
    max-width: 2vw;
    transform: scale(2.5);
}

footer .social {
    display: flex;
    align-items: center;
    gap: 2vw;
}

footer .social a img {
    width: 100%;
    max-width: 3vw;
    transform: scale(1.3);
}

.copyright {
    background-color: #631E0C;
    padding: 0.3vw;
    border-radius: 8px;
    width: 100%;
    max-width: 30%;
    text-align: center;
    margin: auto;
    position: relative;
    z-index: 99;
}


.footer-layar {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: rotate(180deg);
    z-index: -0;
    width: 50vw;
}

@media screen and (max-width: 480px) {
    nav {

        width: 90%;
        margin-bottom: 10vw;
        font-size: 2vw;
        gap: 3vw;
    }

    .about .box {
        padding: 4vw;
        border-radius: 2vw;
        width: 90%;
        margin: auto;
    }

    .about .box a img {
        width: 100%;
        max-width: 18vw;
        margin-top: 2vw;
    }

    .token img {
        width: 100%;
        max-width: 30vw;
    }

    .about .box h2 {
        font-size: 4vw;
    }

    .roadmap .tokit {
        position: absolute;
        top: 0vw;
        left: 20vw;
        z-index: 99;
        top: -5vw;
        width: 100%;
        max-width: 30vw;
    }

    .howto .howtobg {

        height: 170vw;
    }

    .howtobg .box_1 img {
        margin-left: -4vw;
        margin-top: 10vw;
    }

    footer {
        width: 90%;
        font-size: 2vw;
    }

    p {
        font-size: 2.3vw;
    }

    .copyright {
        background-color: #631E0C;
        padding: 0.3vw;
        border-radius: 8px;
        width: 100%;
        max-width: 50%;
        text-align: center;
        margin: auto;
    }
}


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

    25% {
        transform: rotate(90deg) translateX(20px) rotate(-90deg);
    }

    50% {
        transform: rotate(180deg) translateX(0) rotate(-180deg);
    }

    75% {
        transform: rotate(270deg) translateX(-20px) rotate(-270deg);
    }

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

.globe-animation {
    animation: globeRotation 3s infinite linear;
    display: inline-block;
}

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

    25% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(10deg);
    }

    75% {
        transform: rotate(-10deg);
    }

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

.rotate-animation {
    animation: rotateLeftRight 2s infinite ease-in-out;
}


@keyframes moveLeftToRight {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes moveRightToLeft {
    0% {
        transform: translateX(100%);
    }

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