body {
    background-image: url('Black_Star_BG_1.png');
    background-position: top;
    background-repeat: repeat;
    background-attachment: fixed;
    background-size: 700px;
    background-color: #000;
}
.main-bg {
    text-align: center;
}

.Enter {
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 800px;
}

.Blackhole { 
    position: absolute;
    top: 340px;
    left: 265px;
    width: 280px; 
    animation-name: spin;
    animation-duration: 10000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360);
    }
}
  
.Sect1 {
    position: relative;
    width: 800px;
    margin: 0 auto;
}

.Enter_Logo {
    position: absolute;
    top: 100px;
    left: 50px;
    width: 170px;
    transition: 1s;

}
.Enter_Logo:hover {
    transform: rotate(360deg);
}



.bug_box1 {
    position: absolute;
    top: 0px;
    left: 0px;
}

.Bug_B {
    position: absolute;
    top: 160px;
    left: 275px;
    width: 70px;
    animation-name: hover;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}




.Bug_Face {
    position: absolute;
    top: 165px;
    left: 454px;
    width: 70px;
    animation-name: hover;
    animation-duration: 7.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}


.Dog_Face {
    position: absolute;
    top: 728px;
    left: 276px;
    width: 70px;
    animation-name: hover;
    animation-duration: 6.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}


.Invert_Face {
    position: absolute;
    top: 720px;
    left: 457px;
    width: 65px;
    animation-name: hover;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}


.Planet_1 {
    position: absolute;
    top: 695px;
    left: 20px;
    width: 115px;
    z-index: -1;
    animation-name: hover;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}


.Planet_2 {
    position: absolute;
    top: 150px;
    left: 665px;
    width: 115px;
    z-index: -1;
    animation-name: hover;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}


.Star_B {
    position: absolute;
    top: 415px;
    left: 60px;
    width: 80px;
    animation-name: hover;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}

.Star_B2 {
    position: absolute;
    top: 470px;
    left: 660px;
    width: 70px;
    animation-name: hover;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}


.StarP_1 {
    position: absolute;
    top: 540px;
    left: 675px;
    width: 55px;
    animation-name: hover;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}


.StarP_2 {
    position: absolute;
    top: 370px;
    left: 15px;
    width: 65px;
    animation-name: hover;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}


.Question {
    position: absolute;
    top: 155px;
    left: 30px;
    width: 90px;
    z-index: -1;
    animation-name: wobble;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}



.Question_2 {
    position: absolute;
    top: 700px;
    left: 680px;
    width: 90px;
    z-index: -1;
    animation-name: wobble;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
 }

 .box {
   
    width: 280px; 
    animation-name: rotate;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  
/* animations (@_@) */

  @keyframes rotate {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  .spiral {
    position: absolute;
    top: 340px;
    left: 270px;
  }

@keyframes hover {
    from {
        transform: translateY(10px); 
    }
    to {
        transform: translateY(-10);
    }
}

@keyframes wobble {
   0% {transform: rotate(0);
    }
   50% {transform: rotate(-10deg);
    }
    100% {transform: rotate(10deg)
    }
    
    from {
        transform: translateY(10px); 
    }
    to {
        transform: translateY(-10);
    }
}