@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



*{
    margin: 0;
    padding: 0;
    font-family: Poppins;
}
html{
    font-size: 62.5%;

}
body{
    line-height: 1.7;
    box-sizing: border-box;
    color: aliceblue;
}
header{
   height: 100vh;
     width: 100%;
    background: url(./universe-assets/Hero.png);
  
    background-size: 100% 100%;
    background-repeat:no-repeat;
    position: relative;
    overflow: hidden;
}
.nav{
    height: 15%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content:center ;
    position: relative;
    z-index: 3;
   
    
}
.logo-box{
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 5rem;
   
}
.list{
    display: flex;
    flex-direction: row;
    justify-content: center;
    list-style: none;
    align-items: center;
    margin: auto;
}
.list-items{
   flex: 1;
}
.nav-link{
    text-decoration: none;
    color: aliceblue;
    font-size: 1.7rem;
    display: block;
    padding: 1rem 3rem;
}
.nav-link:hover {
    color: rgb(228, 40, 206);
}
.headings{
    position: absolute;
    top: 23%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 50%;
}
.heading_1{
    font-size: 6rem;
    text-align: center;
    font-weight: 1000;
    line-height: 1.25;
    word-spacing: 2rem;
    font-family: orbitron; 
}
.heading_sub_1{
    margin-top: .7rem;
    padding: 1.5rem 0;
  
    font-size: 1.2rem;
    line-height: 1.7;
    text-align: center;
}
.btn{
    color: aliceblue;
    text-decoration: none;
    margin-top: .7rem;
    position: relative;
    z-index: 0;
    height: 3%;
    width: 21%;
    text-align: center;
    font-size: 1.8rem;
    font-family: orbitron;
    font-weight: 1000;
    background:  linear-gradient(315deg, #CD1013 1.19%, #FF0004 1.5%, #2500FF 94.46%);
    padding: 2rem;
    border-radius: 1rem;
}


.hero-mercury{
    position: absolute;
    left: -7%;
    top: 8%;
    height: 20rem;
    z-index: 3;
    animation: updown 3s linear infinite;
}
.hero-saturn{
    position: absolute;
    left: -12%;
    bottom: 21%;
    height: 35rem;
    z-index: 2;
    animation: updown 3s linear infinite;
}
.hero-uranus{
    position: absolute;
    bottom: -4%;
    left: -2%;
    height: 15rem;
    z-index: 2;
    animation: updown 3s linear infinite;
}
.hero-neptune{
    position: absolute;
    bottom: -12%;
    left:45%;
   
    z-index: 2;
    animation: updown 3s linear infinite;
}
.hero-jupiter{
    position: absolute;
    right: -6%;
    bottom: -17%;
    height: 38rem;
    z-index: 2;
    animation: updown 3s linear infinite;
}
.hero-mars{
    position: absolute;
    right: -7%;
    
    height: 25rem;
    z-index: 2;
    animation: updown 3s linear infinite;
    
}
.hero-venus{
    position: absolute;
    top: 45%;
    left: 30%;
    z-index: 2;
    animation: rotation 20s infinite linear;
}
.hero-earth{
    position: absolute;
    top: 15%;
    left: 51%;
    z-index: 2;
    height: 10rem;
    animation: rotation 20s infinite linear;

}

@keyframes updown {
    0% {
        transform: translateY(-.7rem);
    }
    50% {
        transform: translateY(.7rem);
    }
    100% {
        transform: translateY(-.7rem);
    }
}
@keyframes rotation {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

.hero-down{
    position: absolute;
    bottom: 0;
    left: -10%;
    height: 40rem;
    z-index: 1;
}
.hero-up{
    position: absolute;
    top: 0;
    right: -15%;
    height: 50rem;
    z-index: 1;
    opacity: .8;
}

.sun{
    position: relative;
    height: 100vh;
    width: 100%;
    background: url(./universe-assets/Sun.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
}
.sun-shadow{
    position: absolute;
   width: 80%;
   height: 70%;
    top: 0;
    left: 50%;
    filter: blur(15rem);
    transform: translate(-50%,-50%);  
}
.sun-shadow div{
    background-color: #FF6700;
    width: 100%;
    height: 100%;
    clip-path: ellipse();
}
.hero-sun{
    position: absolute;
    top:0 ;
    
    width: 100%;
    height: 40rem;
}
.sun-info{
    position: absolute;
    bottom: 8%;
    left: 5%;
    width: 60%;
}
.main-heading{
    font-size: 6rem;
    font-family: orbitron;
    font-weight: 1000;
}
.sub-heading{
    font-size: 1.5rem;
}
.sun-details{
    padding: 2rem 0;
    display: flex;
    gap: 3rem;
}
.tab{
    width: 28rem;
    height: 13rem;
    
    border-radius: 1rem;
    background: radial-gradient(110.92% 172.47% at 91.09% 101.78%, #430E49 0.53%, #370D44 32.06%, #170B36 89.03%, #100A33 100%);
    border: 4px solid #400542;
    display: flex;
    align-items: center;
    
    
}
.diameter-logo{
    padding-left: 1rem;
     height: 7rem;
     text-align: center;
     
}
.temperature-logo{
    padding-left: 2rem;
    height: 7rem;
    text-align: center;
}
.tab-details{
    display: flex;
    flex-direction: column;
    margin: auto;
    align-items: start;
    justify-content: space-between;
}
.tab-heading{
    font-size: 1.4rem;
    margin-bottom: .5rem;
    font-family: orbitron;
    font-weight: 500;
     
}
.tab-value{
    font-size: 2.8rem;
    line-height: 1.2;
    font-family: orbitron;
    font-weight: 600;
}

.mercury{
    position:relative;
    height: 100vh;
    width: 100%;
    background: url(universe-assets/Mercury.png);
    background-size: 100% 100%;
}


.mercury-image{
    position: absolute;
    
    left: -12%;
    bottom: 50%;
    transform: translateY(50%) scale(.9);
    z-index: 1;
   
}
.mercury-shadow-1{
    position:absolute;
    height: 60rem;
    width: 60rem;
    background-color: #D9D9D9;
    filter: opacity(.3);
    left: -10%;
    bottom: 50%;
    transform: translateY(50%);
    border-radius: 50%;
}
.mercury-shadow-2{
    position: absolute;
    height: 62rem;
    width: 62rem;
    background-color: #D9D9D9;
    filter: opacity(.2);
    left: -10.5%;
    bottom: 50%;
    transform: translateY(50%);
    border-radius: 50%;
}
.mercury-info{
    position: absolute;
    width: 50%;
    left: 45%;
    top: 10%;
    z-index: 3;
}
.mercury-details{
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    padding: 2rem 0;
}
.venus{
    position: relative;
    height: 100vh;
    width: 100%;
    background: url(universe-assets/Venus.png);
    background-size: 100% 100%;
    overflow: hidden;
}
.venus-image{
    position: absolute;
    right: -25%;
    bottom: -65%;
    animation: updown 3s linear infinite;


}
.venus-shadow-1{
    position:absolute;
    height: 111rem;
    width: 111rem;
    background-color: #3EA596;
    filter: opacity(.3);
    right: -24%;
    bottom: -63%;
    border-radius: 50%;
    animation: updown 3s linear infinite;
}
.venus-shadow-2{
    position:absolute;
    height: 113rem;
    width: 113rem;
    background-color: #3EA596;
    filter: opacity(.15);
    right: -24%;
    bottom: -63%;
    border-radius: 50%;
    animation: updown 3s linear infinite;
}
.venus-info{
    position: absolute;
    left: 5%;
    top:8%;
    width: 50%;
}
.venus-details{
    display: flex;
    flex-direction: column;
    gap: 4rem;
    padding: 6rem 0;
}
.earth{
    height: 100vh;
    width: 100%;
    background: url(universe-assets/Earth.png);
    background-size: 100% 100%;
    overflow: hidden;
    position: relative;
}
.earth-image{
    position: absolute;
    bottom:-117%;
    height: 180%;
    width: 90%;
    left: 4%;
    z-index: 4;
    animation: updown 3s linear infinite;
}
.earth-shadow-1{
    position: absolute;
    background-color: #7AE8E9;
    opacity: .3;
    height: 170%;
    width: 91.5%;
    border-radius: 50%;
    bottom: -123.3%;
    left: 2.8%;
    animation: updown 3s linear infinite;
}
.earth-shadow-2{
    position: absolute;
    background-color: #7AE8E9;
    opacity: .15;
    height: 170%;
    width: 93%;
    border-radius: 50%;
    bottom: -119.5%;
    left: 2.3%;
    animation: updown 3s linear infinite;
}
.earth-info{
    position: absolute;
    top: 0;
    left: 0;
    display: flex; 
    align-items: center;
    gap: 18%;
    padding-top:1%;
    padding-left: 5%;
    padding-right: 5%;
}
.earth-headings{
    width: 60%;
}
.moon-info{
    position: absolute;
    width: 50%;
    top: 29%;
    left: 18%;
}
.main-heading-2{
    font-size: 4rem;
    font-family: orbitron;
    font-weight: 1000;
    text-align: end;
    line-height: 1.8;
}
.sub-heading-2{
    font-size: 1.5rem;
    text-align: end;
}
.moon-arrow{
    position: absolute;
    top: 32%;
    right: 21%;
    height: 11%;
    width: 9%;
}
.rocket{
    position: absolute;
    bottom: 20%;
    height: 25%;
    left: 2%;
}
.mars{
    height: 100vh;
    width: 100%;
    background: url(universe-assets/Mars.png);
    position: relative;
    background-size: 100% 100%;
    overflow: hidden;
  
}
.mars-image{
    position: absolute;
    height: 110%;
    width: 58%;
    bottom: -45%;
    left: -15%;
    z-index: 3;
    animation: updown 3s linear infinite;
}
.mars-shadow-1{
    position: absolute;
    height: 111%;
    width: 53%;
    background-color: #FF9A22;
    opacity: .3;
    left: -17%;
    bottom: -48.5%;
    border-radius: 50%;
    animation: updown 3s linear infinite;
}
.mars-shadow-2{
    position: absolute;
    height: 113%;
    width: 54%;
    background-color: #FF9A22;
    opacity: .15;
    left: -17%;
    bottom: -48.5%;
    border-radius: 50%;
    animation: updown 3s linear infinite;
}
.mars-info{
    position: absolute;
    left: 5%;
    top: 4%;
    width: 50%;
}
.mars-tabs{
    position: absolute;
    right: 10%;
    top: 16%;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}
.mars-moons-info{
    position: absolute;
    width: 23%;
    top: 50%;
    left: 46%;
}
.main-heading-3{
    font-size: 3.5rem;
    font-family: orbitron;
    font-weight: 1000;
    line-height: 1.8;
}
.sub-heading-3{
    font-size: 1.5rem;
   
}
.mars-moon-arrow{
    position: absolute;
    top: 44%;
    left: 39%;
}

.jupiter{
    height: 100vh;
    width: 100%;
    background: url(universe-assets/Jupiter.png);
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
}
.jupiter-image{
    height: 140%;
    width: 80%;
    position: absolute;
    top: -38%;
    right: -28%;
    z-index: 3;
    animation: updown 3s linear infinite;
}
.jupiter-shadow-1{
    height: 91%;
    width: 54.5%;
    position: absolute;
    background-color: #CCAB6B;
    opacity: .3;
    top: -12%;
    right: -17%;
    border-radius: 50%;
    animation: updown 3s linear infinite;
}
.jupiter-shadow-2{
    height: 94%;
    width: 56.5%;
    position: absolute;
    background-color: #CCAB6B;
    opacity: .15;
    top: -12.5%;
    right: -17.9%;
    border-radius: 50%;
    animation: updown 3s linear infinite;
}
.jupiter-info{
    position: absolute;
    left: 5%;
    top: 5%;
    width: 45%;
}
.jupiter-tab-details{
    display: flex;
    flex-direction: column;
    gap: 4rem;
    padding-top: 8rem;
}
.saturn{
    height: 100vh;
    width: 100%;
    background: url(universe-assets/Saturn.png);
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
}
.saturn-image{
    position: absolute;
    height: 127%;
    width: 80%;
    top: -12%;
    left: -19%;
    animation: updown 3s linear infinite;
}
.titan{
    font-size: 2.7rem;
    font-family: orbitron;
    font-weight: 1000;
    position: absolute;
    left: 10.5%;
    top: 22%;
}
.saturn-info{
    position: absolute;
    right: 7%;
    top: 5%;
    width: 50%;
}
.main-heading-4{
    font-size: 6rem;
    font-family: orbitron;
    font-weight: 1000;
    text-align: end;
}
.sub-heading-4{
    font-size: 1.5rem;
    text-align: end;
}
.saturn-tab-details{
    align-items: end;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    padding-top: 6rem;

}
.uranus{
    height: 100vh;
    width: 100%;
    background: url(universe-assets/Uranus.png);
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
}
.uranus-image{
    position: absolute;
    height: 155%;
    width: 98%;
    bottom: -90%;
    left: 5%;
    z-index: 3;
    animation: updown 3s linear infinite;
}
.uranus-shadow-1{
    position: absolute;
    height: 146%;
    width: 84%;
    bottom: -88%;
    left: 15.5%;
    background-color: #7AE8E9;
    opacity: .3;
    border-radius: 50%;
    animation: updown 3s linear infinite;

}
.uranus-shadow-2{
    position: absolute;
    height: 147%;
    width: 86%;
    bottom: -87%;
    left: 14.5%;
    background-color: #7AE8E9;
    opacity: .15;
    border-radius: 50%;
    animation: updown 3s linear infinite;
}
.uranus-info{
    position: absolute;
    left: 5%;
    top: 5%;
    width: 40%;
}
.uranus-tab-details{
    position: absolute;
    right: 5%;
    display: flex;
    gap: 4rem;
    top: 10%;
}
.neptune-footer{
    position: relative;
    overflow: hidden;
}
.neptune{
    height: 100vh;
    width: 100%;
    background: url(universe-assets/Neptune.png);
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
}
.neptune-image{
    position: absolute;
    height: 86%;
    width: 94%;
    left: -18%;
    bottom: -15%;
    z-index: 3;
    animation: updown 3s linear infinite;
    
}
.neptune-moon1{
    position: absolute;
    height: 11%;
    width: 8.5%;
    right: 30%;
    bottom: 30%;
}
.neptune-moon2{
    position: absolute;
    height: 22%;
    width: 15%;
    right: 10%;
    bottom: 40%;
}
.neptune-shadow1{
    position: absolute;
    height: 81%;
    width: 90%;
    background-color: #8D58B7;
    opacity: .3;
    left: -17%;
    bottom: -12.5%;
    clip-path: ellipse();
    z-index: 3;
    animation: updown 3s linear infinite;

}
.neptune-shadow2{
    position: absolute;
    height: 83.2%;
    width: 92.5%;
    background-color: #8D58B7;
    opacity: .15;
    left: -18.1%;
    bottom: -13.3%;
    clip-path: ellipse();
    z-index: 3;
    animation: updown 3s linear infinite;
}
.neptune-info{
    position: absolute;
    width: 70%;
    text-align: center;
    top: 3%;
    left: 50%;
    transform: translateX(-50%);
}
.neptune-tab-details{
    display: flex;
    gap: 5rem;
    position: absolute;
    top: 31%;
    left: 50%;
    transform: translateX(-50%);
}
.footer{
    height: 70vh;
    width: 100%;
    background: url(universe-assets/Footer.png);
    background-size: 100% 100%;
    position: relative;
    overflow:hidden;
}
.footer-tab{
    width: 90%;
    height: 80%;
    border-radius: 2rem;
    background-color: #1E1E1E;
    border: .5rem solid #400542 ;
    position: absolute;
    left: 5%;
    top: 10%;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem 0;
    box-sizing: border-box;
    justify-content: space-between;
    
}
.headings{
     width: 100%;
     height: auto;   
     
}
.main-heading-5{
    font-size: 5rem;
    font-family: orbitron;
    font-weight: 1000;
    text-align: center;
}
.sub-heading-5{
    font-size: 1.5rem;
    text-align: center;
    font-weight: 400;
}
.email{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 18%;
}
.button{
    background-color: white;
    border-radius: 5rem;
    padding: .5rem .5rem;
    width: 35%;
    height: 100%;
    display: flex;
    align-items: center;
    
}
.button-text{
    border: none;
    margin-right: auto;
    height: 3rem;
    border-radius: 5rem;
    font-size: 1.7rem;
    padding-left: 1rem;
    font-family: sans-serif;
    color: #000;
    
}
.button-text:active,.button-text:hover{
  border: none;
}
.button-action{
    font-size: 1.5rem;
    background: linear-gradient(to right bottom,  #CD1013 0%, #FF0004 1% , #2500FF 94% );
    color: #fff;
    border-radius: 5rem;
    border: none;
    padding: .5rem;
    margin-right: 1rem;
    width: 30%;
    text-align: center;
    height: 100%;
    font-family: orbitron;
    font-weight: 800;

}
.subscribe-arrow{
    font-size: 2rem;
    color: #000;
    background-color: #fff;
    border-radius: 50%;
    text-align: center;
    padding: .8rem;
}