body {
    margin: 0px;
    padding: 0px;
    background-image: url("assets/img/Bg_.webp");
    background-size: auto;
    background-repeat: no-repeat;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    position: fixed;
    min-height: 100vh;
}

ul {
    list-style: none;
}

.guild-hub {
    width: 70vw;
    left: 15vw;
    position: absolute;
    top: 38vh;
}

.btn-connect {
    width: 20vw;
    left: 40vw;
    position: absolute;
    top: 70vh;
    cursor: pointer;
    transition: 0.5s;
}

.btn-connect:hover {
    transition: 0.5s;
    width: 20vw;
    left: 40vw;
    position: absolute;
    top: 70vh;
    cursor: pointer;
    transform: scale(1.2)
}


.black-hole {
    width: 50vw;
    margin-left: 70vw;
    margin-top: -100px;
}

.main-planet {
    position: absolute;
    margin-left: -100px;
    margin-top: 60vh;
    z-index: 9;
}

.hero-1 {
    margin-top: -60px;
}

.hero-3 {
    margin-top: -35px;
    margin-left: -5px;
}

.hero-4 {
    margin-top: 18px;
    margin-left: 5px;
}

.hero-5 {
    transform: scale(0.6);
    margin-top: -60px;
    margin-left: -30px;
}

.hero-6 {
    transform: scale(0.3);
    margin-top: -250px;
    margin-left: -170px;
}

.planet-2 {
    position: absolute;
    top: 48vh;
    left: 2vw;
}

.planet-3 {
    position: absolute;
    top: 30vh;
    left: 7vw;
}

.planet-4 {
    position: absolute;
    top: 12vh;
    left: 20vw;
}

.planet-5 {
    position: absolute;
    top: 28vh;
    left: 40vw;
}

.planet-6 {
    position: absolute;
    top: 12vh;
    left: 62vw;
}

.planet-7 {
    position: absolute;
    top: 25vh;
    left: 75vw;
}

.planet-8 {
    position: absolute;
    top: 45vh;
    left: 88vw;
}

.planet-9 {
    position: absolute;
    top: 62vh;
    left: 85vw;
}

.planet-10 {
    position: absolute;
    top: 80vh;
    left: 85vw;
}

.planet-11 {
    position: absolute;
    top: 85vh;
    left: 65vw;
}

.planet-12 {
    position: absolute;
    top: 85vh;
    left: 25vw;
}

.planet-13 {
    position: absolute;
    margin-top: 65vh;
    margin-left: 37vh;
}

.rock-1 {
    position: absolute;
    margin-left: -200px;
    margin-top: 65vh;

}

.rock-2 {
    position: absolute;
    margin-left: -250px;
    margin-top: 65vh;

}

.rotate {
    -webkit-animation: loading 70s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -moz-animation: loading 70s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation: loading 70s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.rotate-1 {
    -webkit-animation: loading 50s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -moz-animation: loading 50s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation: loading 50s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.rotate-2 {
    -webkit-animation: loading 30s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -moz-animation: loading 30s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation: loading 30s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.roket-1 {
    position: relative;
    width: 200px;
}

.roket-3 {
    position: relative;
    width: 200px;
    left: -30vw;
    top: 130vh;
}

.roket-4 {
    position: relative;
    width: 200px;
    left: 30vw;
    top: 130vh
}

.move {
    -webkit-animation: roket 45s infinite linear;
    -moz-animation: roket 45s infinite linear;
    animation: roket 45s linear infinite;
}

.move-3 {
    -webkit-animation: roket-3 55s infinite linear;
    -moz-animation: roket-3 55s infinite linear;
    animation: roket-3 55s linear infinite;
    animation-delay: 3s;
}

.move-4 {
    -webkit-animation: roket-4 85s infinite linear;
    -moz-animation: roket-4 85s infinite linear;
    animation: roket-4 85s linear infinite;
    animation-delay: 9s;
}

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

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

@keyframes roket {
    0% {
        left: 110vw;
        top: 30vh;
        -webkit-transform: rotateY(180deg);
        transform: rotateY(0deg);
    }

    30% {
        left: -30vw;
        top: 20vh;
        transform: rotateY(0deg);
    }

    35% {
        -webkit-transform: rotateY(180deg);
    }

    58% {
        -webkit-transform: rotateY(180deg);
    }

    62% {
        left: 110vw;
        top: 30vh;
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }

    100% {
        left: 110vw;
        top: 30vh;
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

@keyframes roket-3 {
    0% {

        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
        left: -30vw;
        top: 70vh;
    }

    20% {
        left: 110vw;
        top: 70vh;

        transform: rotateY(180deg);
    }

    60% {
        left: 110vw;
        top: 70vh;
        transform: rotateY(0deg);
    }

    82% {
        left: -30vw;
        top: 30vh;
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }

    100% {
        left: -30vw;
        top: 30vh;
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

@keyframes roket-4 {
    0% {
        transform: rotate(90deg);
        left: 30vw;
        top: 130vh;
    }

    20% {
        transform: rotate(90deg);
        left: 30vw;
        top: -40vh;
    }

    60% {
        left: 30vw;
        top: -40vh;
        transform: rotate(270deg);
    }

    82% {
        left: 30vw;
        top: 130vh;
        transform: rotate(270deg);
    }

    100% {
        left: 30vw;
        top: 130vh;
        transform: rotate(270deg);
    }
}

@keyframes STAR {
    0% {
        background: powderblue;
        height: 1px;
        width: 1px;
        box-shadow: 0px 0px 10px white;
    }

    10% {
        background: #b0e5de;
    }

    20% {
        background: #b0e5cc;
    }

    30% {
        background: #cce5b0;
    }

    40% {
        background: #dae5b0;
    }

    50% {
        background: #e5ddb0;
        width: 4px;
        height: 4px;
        box-shadow: 0px 0px 10px #d3bd3d;
    }

    100% {
        width: 1px;
        height: 1px;
        background: powderblue;
        box-shadow: 0px 0px 10px white;
    }
}


.star {
    height: 1px;
    width: 1px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px white;
    position: absolute;
    z-index: 8;
}

.star.pulse {
    animation: STAR 2s infinite;
}