solar.css

body{
    background-color: black;
   min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  scroll-behavior: smooth ;
  box-sizing: border-box;
  list-style: none;
  margin: 0%;
  padding: 0%;
 overflow-x: hidden;
 
}
@font-face{
    font-family : "Alphacentauri";
    src :url("D:/moon/planets-website-images/Alphacentauri.ttf")
}
header{
    position: absolute;
    top: 0%;
    left: -2%;
    width: 90%;
    padding : 9px 85px;
    display: flex;
    justify-content: space-between;
    align-items: center;


}
header .logo{
    color: #fff;
    font-weight: 700;
    font-size: 2em;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;;
}
header ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header ul li{
  list-style: none;
  margin: 5px;
}
header ul li img{
    width : 80%;
}
section{
    height: 100vh;
    

}
.bg img{
    width: 110vw;
    height: 110vh;
    filter: brightness(0.9);
   }
.rock1{
    position: absolute !important;
    left : 10vw !important;
    top : 20vh !important;   
  }
.rock1 img{
    width : 40%;
    filter : brightness(0.5);
}

.earth img{
    position: absolute;
    top: 25vh;
    left: 35vw;
    width: 400px;
    height: 400px;
    z-index: 1;
    filter: brightness(0.5);
    align-items: center;
}
.text h1{
    font-family: "Alphacentauri" !important;
    font-size: 5vw;
    color: #fff;
    letter-spacing: 20px;
    position: absolute;
    top: 35vh;
    left: 34vw;
    
}
.mid{
    position: absolute;
    left: -150px !important;
    bottom: -100px !important;
    top: unset !important;
   }
.mid img{
       width: 110%;
       z-index: 2;
       left: -20px;
       top: 15vh !important;
       filter: brightness(0.7);
   }
.fore{
    position: absolute;
    bottom : -400px;
    top: 5%;
    right : 0%;
}
.fore img{
    width: 350px;
    height : 100vh;
    z-index: 0;
    filter: brightness(0.8);
}

/*swiper*/
#sectiontwo {
    width: 100%;
    height: 100vh;
    position: relative;
  }
  
  .rockbg1 {
    position: absolute;
    transform: scale(0.2);
    filter: brightness(0.2);
    top: 20vh;
    left: 0;
    z-index: 1;
  }
  
  .planet-links {
    width: 95%;
    height: 5vh;
    color: #fff;
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: space-evenly;
    list-style: none;
  }
  
  .planet-links .swiper-pagination-bullet {
    opacity: 0.2;
    outline: none;
  }
  .planet-links .swiper-pagination-bullet-active {
    color: #fff;
    opacity: 1;
  }
  
  .swiper-pagination-clickable .swiper-pagination-bullet {
    background: transparent;
  }
  
  .swiper-container {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 50px 0;
  }
  
  .swiper-wrapper {
    transition-delay: 0.5s;
  }
  
  .swiper-slide {
    height: 400px !important;
    width: 90% !important;
    background: transparent;
  }
  
  .swiper-slide:nth-child(1) .slide-img {
    background-image: url("mercury.png");
  }
  .swiper-slide:nth-child(2) .slide-img {
    background-image: url("venus.png");
  }
  .swiper-slide:nth-child(3) .slide-img {
    background-image: url("earth1.png");
  }
  .swiper-slide:nth-child(4) .slide-img {
    background-image: url("mars.png");
  }
  .swiper-slide:nth-child(5) .slide-img {
    background-image: url("jupiter.png");
  }
  .swiper-slide:nth-child(6) .slide-img {
    background-image: url("saturn.png");
  }
  .swiper-slide:nth-child(7) .slide-img {
    background-image: url("uranus.png");
  }
  .swiper-slide:nth-child(8) .slide-img {
    background-image: url("neptune.png");
  }
  
  .slide-img {
    background-position: "center";
    background-repeat: no-repeat !important;
    background-size: contain;
    width: 30%;
    height: 100%;
  }
  
  .slide-number {
    position: absolute;
    top: -30px;
    left: 30%;
    width: 200px;
    height: 120px;
    overflow: hidden;
    z-index: 10;
  }
  
  .slide-number p {
    font-size: 40px;
    font-family: "AlphaCentauri" !important;
    color: #fff;
    position: relative;
  }
  
  .slide-number p span {
    position: absolute;
  }
  
  .slide-detail {
    position: absolute;
    top: 130px;
    left: 30%;
    z-index: 10;
    width: 50%;
    height: 400px;
    overflow: hidden;
  }
  
  .slide-detail p {
    font-size: 14px;
    color: #fff;
    position: relative;
    opacity: 0.8;
    line-height: 30px;
  }
  
  .slide-detail p span {
    position: absolute;
  }
  
  .slide-detail-facts {
    position: absolute;
    top: 240px;
    left: 30%;
    z-index: 10;
    width: 50%;
    height: 400px;
    overflow: hidden;
    color: #fff;
  }
  .slide-detail-facts div {
    display: flex;
    position: relative;
  }
  .slide-detail-facts div h5 {
    margin-right: 20px;
  }
  
  .slide-text {
    position: absolute;
    top: 140px;
    left: 22%;
    z-index: 9;
    width: 200px;
    height: 400px;
    overflow: hidden;
    opacity: 0.1 !important;
  }
  
  .slide-text h4 {
    color: #fff;
    font-size: 100px;
    position: relative;
  }
  .slide-text h4 span {
    position: absolute;
  }