/* font */
@font-face {
    font-family: "Lato";
    src: url('../font/Lato-Regular.ttf');
}

body{
    cursor: none;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Lato", sans-serif;
    cursor: none !important;
}

.primary-txt{
    color: #00FFFF;
    background-image: linear-gradient(to top , #51b9b9, cyan);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.container{
    max-width: 1400px;
    margin: auto;
}

.d-block{
    display: block !important;
}

#logo{
    color: white;
    text-decoration: none; 
}

.loader{
    position: fixed;
    height: 100vh;
    width: 100vw;
    background-color: black;
    z-index: 10000;
    color: white;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 20px;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.5s ease-in;
}

.load-txt{
    margin-top: 10%;
}

/* nav bar cross button */
nav .cross{
    width: 30px;
    height: 30px;
    border: 2px solid white;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 21px;
    padding-bottom: 5px;
}

/* ------nav bar menu------ */
nav ul.prim-menu{
    display: none;
    transition: all 1s ease;
    -o-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    list-style-type: none;
    width: 100vw;
    height: 100vh;
    background-color: black;
    color: white;
    animation: visibility 2s ease;
    -o-animation: visibility 2s ease;
    -moz-animation: visibility 2s ease;
    -webkit-animation: visibility 2s ease;
    padding-top: 20pxs;
}

#menu{
    cursor: pointer;
    transform: all 0.1s ease;
    -o-transform: all 0.1s ease;
    -ms-transform: all 0.1s ease;
    -webkit-transform: all 0.1s ease;
    -moz-transform: all 0.1s ease;
}

nav ul.prim-menu li a{
    text-decoration: none;
    color: transparent;
    -webkit-text-stroke: 2px white;
    font-size: 65px;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: -2px;
    font-style: italic;
    position: absolute;
    left: 10px;
    transition: all 4s ease;
    -o-transition: all 4s ease;
    -moz-transition: all 4s ease;
    -webkit-transition: all 4s ease;
}

nav ul.prim-menu li{
    position: relative;
    min-height: 100px;
}

nav {
    background: black;
    color: white;
    padding: 20px 40px 0;
    font-size: 18px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
}

nav > div> div:first-child{
    display: flex;
    justify-content: space-between;
    max-width: 1300px;
    margin: auto;
    border-bottom: 2px solid #00FFFF;
    padding-bottom: 20px;
    position: relative;
}

nav > div {
    max-width: 1300px;
    margin: auto;
    position: relative;
}

/* secondary menu */
#menu-sec{
    position: absolute;
    top: 0px;
    right: 75px;
}

ul li.sec-menu i{
    transition: all 0.1s ease-in
}


ul.sec-menu{
    display: flex;
    list-style-type: none;
    gap: 21px;
    position: absolute;
    top: -10px;
    padding: 0;
    right: 110px;
    width: 0%;
    text-align: right;
    max-width: fit-content;
    /* max-width: calc(100% - 140px); */
    background-color: white;
    box-shadow: 0px 0px 5px #525252;
    overflow: hidden;
    /* will-change: width; */
    transition: width 0.15s ease-in;
    border-radius: 10px
}

ul.sec-menu.active{
    width: 100%;
}

ul.sec-menu li{
    padding: 12px 0;
}

ul.sec-menu li:first-child{
    padding-left: 20px;
}

ul.sec-menu li:last-child{
    padding-right: 20px;
}

ul.sec-menu li a{
    text-decoration: none;
    color: black;
}

ul.sec-menu li a:hover{
    text-decoration: underline;
}

/* ----planet heaer info------------- */
.planet-header{
    background: black;
    color: white;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    font-family: "Lato", sans-serif;
    padding-top: 150px ;
    position: relative;
    background: linear-gradient(to bottom right, black , #3c3333);
    overflow: hidden;
    transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    background-image: linear-gradient(5deg, #000040, black, black);
    background-repeat: no-repeat;
    background-size: 100%
}

.planet-header .container{
    max-width: 768px;
    text-align: center;
    z-index: 2;
    margin-top: 0;
}

.planet-header h1{
    font-size: 20px;
    font-weight: 100;
    letter-spacing: 2px;
    margin-top: 20vh;
}

.planet-header h2{
    font-size: 101px;
    margin: 0;
    /* font-family: "Lato", sans-serif; */
    font-family: serif;
    font-weight: 100;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all  ease-in-out;
    -o-transition: all ease-in-out;
    -moz-transition: all ease-in-out;
    -webkit-transition: all ease-in-out;
    text-shadow: 3px 3px 6px #03a9f4;
}


.planet-header .underline{
    display: block;
    height: 4px;
    width: 100px;
    background: #00FFFF;
    margin: auto;
    margin-bottom: 30px;
}

.planet-header p{
    line-height: 1.5;
    letter-spacing: 1px;
    margin-top: 20px;
    font-size: 18px;
    height: 80px;
}

/* planet header and about planet section */
.planet-header button,
.about-planet button{
    border: none;
    border-radius: 30px;
    background: white;
    padding: 16px 47px;
    font-size: 16px;
    font-weight: 600;
    margin-top: 38px;
    box-shadow: 1px 1px 5px #adadad;
    outline: none;
    cursor: pointer;
    letter-spacing: 1px;
}

.planet-header button:hover,
.about-planet button:hover{
    background-image: linear-gradient(to top , #51b9b9, cyan);
    /* color: white; */
}

/* appearance of each planet */
div.earth{
    background-color: transparent;
    background-image: url('../images/earth.jpg');
    border-radius: 50%;
    position: absolute;
    background-position: center;
    animation: rotate 20s linear infinite;
    -o-animation:  rotate 20s linear infinite;
    -moz-animation:  rotate 20s linear infinite;
    -webkit-animation:  rotate 20s linear infinite;
    box-shadow: -4px -10px 9px #20292a, inset 12px 19px 36px #00bcd4, inset -400px -300px 300px #000000d9;
    transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
    background-size: cover;
}

div.mars{
    background-color: transparent;
    background-image: url('../images/mars.jpg');
    border-radius: 50%;
    position: absolute;
    background-position: center;
    animation: rotate 10s linear infinite;
    -o-animation:  rotate 10s linear infinite;
    -moz-animation:  rotate 10s linear infinite;
    -webkit-animation:  rotate 10s linear infinite;
    transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
    background-size: 150%;
    box-shadow: -12px -10px 9px #38241d61, inset 12px 19px 36px #461506, inset -39px -20px 54px black;

}

div.sun{
    background-color: transparent;
    background-image: url('../images/sun.jpg');
    border-radius: 50%;
    position: absolute;
    background-position: center;
    animation: rotate 5s linear infinite;
    -o-animation:  rotate 5s linear infinite;
    -moz-animation:  rotate 5s linear infinite;
    -webkit-animation:  rotate 5s linear infinite;
    box-shadow: -12px -10px 21px #ff6a0054, inset 12px 19px 36px #fdd835, inset -39px -20px 54px black;
    transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;

}

div.moon{
    background-color: transparent;
    background-image: url('../images/moon.jpg');
    border-radius: 50%;
    position: absolute;
    background-position: center;
    animation: rotate 5s linear infinite;
    -o-animation:  rotate 5s linear infinite;
    -moz-animation:  rotate 5s linear infinite;
    -webkit-animation:  rotate 5s linear infinite;
    box-shadow: -12px -10px 21px #4e4b4b, inset 12px 19px 36px #fafafa, inset -39px -20px 54px black;
    transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;

}

div.venus{
    background-color: transparent;
    background-image: url('../images/venus.jpg');
    border-radius: 50%;
    position: absolute;
    background-position: center;
    animation: rotate 5s linear infinite;
    -o-animation:  rotate 5s linear infinite;
    -moz-animation:  rotate 5s linear infinite;
    -webkit-animation:  rotate 5s linear infinite;
    box-shadow: -12px -10px 9px #a154105e, inset 12px 19px 36px #fff59d, inset -39px -20px 54px black;
    transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
}

div.mercury{
    background-color: transparent;
    background-image: url('../images/mercury.jpg');
    border-radius: 50%;
    position: absolute;
    background-position: center;
    animation: rotate 10s linear infinite;
    -o-animation:  rotate 10s linear infinite;
    -moz-animation:  rotate 10s linear infinite;
    -webkit-animation:  rotate 10s linear infinite;
    box-shadow: -12px -10px 9px #4c4c4c87, inset 12px 19px 36px #ffffff, inset -39px -20px 54px black;
    transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
}

/* pattern over mercury */
div.mercury::before{
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background-image: url('../images/hauma.jpg');
    border-radius: 50%;
    animation: rotate 30s linear infinite;
    -o-animation:  rotate 30s linear infinite;
    -moz-animation:  rotate 30s linear infinite;
    -webkit-animation:  rotate 30s linear infinite;
    opacity: 0.2;
}

/* for pattern over uranus */
div.uranus::after{
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background-image: url('../images/pattern.jpg');
    border-radius: 50%;
    animation: rotate 10s linear infinite;
    -o-animation:  rotate 10s linear infinite;
    -moz-animation:  rotate 10s linear infinite;
    -webkit-animation:  rotate 10s linear infinite;
    mix-blend-mode: overlay;    
    position: absolute;
    top: 0;
}

div.uranus{
    background-color: transparent;
    background-image: url('../images/uranus.jpg');
    border-radius: 50%;
    position: absolute;
    background-position: center;
    animation: rotate 5s linear infinite;
    -o-animation:  rotate 5s linear infinite;
    -moz-animation:  rotate 5s linear infinite;
    -webkit-animation:  rotate 5s linear infinite;
    box-shadow: -12px -10px 21px #364c4e, inset 12px 19px 36px #e1f5fe, inset -39px -20px 54px black;
    transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
}

div.saturn{
    background-color: transparent;
    background-image: url('../images/saturn.jpg');
    border-radius: 50%;
    position: absolute;
    background-position: center;
    animation: rotate 5s linear infinite;
    -o-animation:  rotate 5s linear infinite;
    -moz-animation:  rotate 5s linear infinite;
    -webkit-animation:  rotate 5s linear infinite;
    box-shadow: -12px -10px 9px #89765154, inset 12px 19px 36px #ffecb3, inset -39px -20px 54px black;
    transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
}

div.jupitar{
    background-color: transparent;
    background-image: url('../images/jupitar.jpg');
    border-radius: 50%;
    position: absolute;
    background-position: center;
    animation: rotate 5s linear infinite;
    -o-animation:  rotate 5s linear infinite;
    -moz-animation:  rotate 5s linear infinite;
    -webkit-animation:  rotate 5s linear infinite;
    box-shadow: -12px -10px 17px #664102bd, inset 12px 19px 36px #f3dfa3, inset -39px -20px 54px black;
    transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
}

div.neptune{
    background-color: transparent;
    background-image: url('../images/neptune.jpg');
    border-radius: 50%;
    position: absolute;
    background-position: center;
    animation: rotate 5s linear infinite;
    -o-animation:  rotate 5s linear infinite;
    -moz-animation:  rotate 5s linear infinite;
    -webkit-animation:  rotate 5s linear infinite;
    box-shadow: -12px -10px 21px #000a40, inset 12px 19px 36px #26c6da, inset -39px -20px 54px black;
    transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
}

div.neptune::after{
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background-image: url('../images/pattern.jpg');
    border-radius: 50%;
    animation: rotate 10s linear infinite;
    -o-animation:  rotate 10s linear infinite;
    -moz-animation:  rotate 10s linear infinite;
    -webkit-animation:  rotate 10s linear infinite;
    mix-blend-mode: overlay;
    position: absolute;
    top: 0;
}

/* middle planet */
#main-planet {
    bottom: -37vw;
    left: calc(50% - 28vw);
    width: 55vw;
    height: 55vw;
    animation-duration: 30s;
    animation-duration: 5s;
    -o-animation-duration: 5s;
    -moz-animation-duration: 5s;
    -webkit-animation-duration: 5s;
}

.earth#left-planet{
    animation-duration: 3s;
    -o-animation-duration: 3s;
    -moz-animation-duration: 3s;
    -webkit-animation-duration: 3s;
}

/* planet next towards the right */
#behind{
    width: 0;
    height: 0;
    bottom: 75%;
    left: 45%;
}

/* an effect */
#main-planet::after {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    top: 17%;
    position: absolute;
    left: 20%;
    z-index: 19;
    border-radius: 50%;
    box-shadow: inset 4px 4px 20px #ffffff00, 43px 43px 44px white, 47px 39px 47px white, 30px 26px 23px white;
}

/* right side planet */
#right-planet{
    width: 15vw;
    height: 12vw;
    left: 91vw;
    bottom: 44%;
    animation-duration: 25s;
    -o-animation-duration: 25s;
    -moz-animation-duration: 25s;
    -webkit-animation-duration: 25s;
}

/* left side planet */
#left-planet{
    width: 15vw;
    height: 12vw;
    left: -8vw;
    bottom: 44%;
    animation-duration: 25s;
    -o-animation-duration: 25s;
    -moz-animation-duration: 25s;
    -webkit-animation-duration: 25s;
}

/* planet after left  */
#left-behind{
    width: 0;
    height: 0px;
    left: 45%;
    bottom: 80%;
}

/* shadow for middle planets */
.planets{
    position: absolute;
    height: 55vw;
    width: 55vw;
    bottom: -37vw;
    left: calc(50% - 28vw);
    z-index: 1;
    box-shadow: inset -200px -100px 100px #0000008c;
    border-radius: 50%;
}


/* ----------- about each planet briefly ---------*/
#slide.current{
    height: 100vh ;
}

#slide{
    height: 0;
    padding: 0;
    overflow: hidden;
    z-index: 10;
    position: relative;
}

/* current planet screen */
.about-planet#slide.current{
    padding: 20px 40px
}

@keyframes earth {

    0%{
        bottom: 0px;
    }

    100%{
        bottom: 30%;
    }
    
}

.about-planet p{
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: 1px;
    font-family: sans-serif;
    text-align: justify
}

.about-planet h2{
    font-size: 120px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.about-planet{
    background: black;
    height: 100vh;
    width: 100vw;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    overflow: hidden;
    background-repeat: no-repeat;
}

.about-planet .container{
    max-width: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-planet .content,
.about-planet .planet{
    width: 50%;
}

.about-planet .planet{
    position: relative;
    min-height: 400px;
    z-index: 10;
}

.about-planet.current .content{
    animation: visibility 3s linear;
    -o-animation: visibility 3s linear;
    -moz-animation: visibility 3s linear;
    -webkit-animation: visibility 3s linear;
    z-index: 11;
}

/* for planets */
.about-planet :is(.earth, .jupitar, .mars, .neptune, .uranus, .saturn, .venus, .mercury, .sun, .moon){
    width: 400px;
    height: 400px;
    top: 0;
    right: 0;
    z-index: 2;
    transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
}

.about-sun{
    background-image: linear-gradient(to bottom right, black, #482500);
}
.about-moon{
    background-image: linear-gradient(to bottom right, black, #363535);
}
.about-saturn{
    background-image: linear-gradient(to bottom right, black, #5c4521);
}
.about-neptune{
    background-image: linear-gradient(to bottom right, black, #0b0f30);
}
.about-uranus{
    background-image: linear-gradient(to bottom right, black, #0a2f34);
}
.about-earth{
    background-image: linear-gradient(to bottom right, black, #00082e);
}
.about-jupitar{
    background-image: linear-gradient(to bottom right, black, #5a472b);
}
.about-venus{
    background-image: linear-gradient(to bottom right, black, #382200);
}
.about-mars{
    background-image: linear-gradient(to bottom right, black, #481100);
}
.about-mercury{
    background-image: linear-gradient(to bottom right, black, #3c3c3c);
}

.about-planet :is(.earth, .jupitar, .mars, .neptune, .uranus, .saturn, .venus, .mercury, .sun, .moon)::before{
    content: "";
    display: block;
    width: 120%;
    height: 120%;
    margin-left: -10%;
    border-radius: 50%;
    margin-top: -10%;
    border: 2px solid #623b00;
    outline: 2px solid #623b00;
    outline-offset: 40px;
    background: transparent;
    animation: orbits 2s ease infinite;
    -o-animation: orbits 2s ease infinite;
    -moz-animation: orbits 2s ease infinite;
    -webkit-animation: orbits 2s ease infinite;
}

/* for the orbits around the planets */
@keyframes orbits {
    0%{
        width: 100%;
        height: 100%;
        margin-left: 0;
        margin-top: 0;
        outline-offset: 20px;
    }

    50%{
        outline-offset: 50%;
    }


    100%{
        width: 120%;
        height: 120%;
        margin-left: -10%;
        margin-top: -10%;
        outline-offset: 80px;
    }
}

@keyframes earthOrbits {
    0%{
        outline-color:#00373e;
        border-color:#00373e;
    }

    50%{
        outline-color: rgba(0, 20, 22, 0.564);
    }

    70%{
        border-color:rgba(0, 20, 22, 0.564);
    }

    100%{
        border-color: transparent;
        outline-color:transparent ;
    }
}

.about-planet .earth::before{
    border: 2px solid #00373e;
    outline: 2px solid #00373e;
    animation: orbits 2s ease infinite, earthOrbits 2s ease infinite;
    -o-animation: orbits 2s ease infinite, earthOrbits 2s ease infinite;
    -moz-animation: orbits 2s ease infinite, earthOrbits 2s ease infinite;
    -webkit-animation: orbits 2s ease infinite, earthOrbits 2s ease infinite;

}

@keyframes venusOrbits {
    0%{
        outline-color:#403001;
        border-color:#403001;
    }

    50%{
        outline-color: #40300182;
    }

    70%{
        border-color:#40300182;
    }

    100%{
        border-color: transparent;
        outline-color:transparent ;
    }
}

.about-planet .venus::before{
    border: 2px solid #403001;
    outline: 2px solid #403001;
    animation: orbits 2s ease infinite, venusOrbits 2s ease infinite;
    -o-animation: orbits 2s ease infinite, venusOrbits 2s ease infinite;
    -moz-animation: orbits 2s ease infinite, venusOrbits 2s ease infinite;
    -webkit-animation: orbits 2s ease infinite, venusOrbits 2s ease infinite;
}

@keyframes marsOrbits {
    0%{
        outline-color:#3c2100;
        border-color:#3c2100;
    }

    50%{
        outline-color: #3c210082;
    }

    70%{
        border-color:#3c210082;
    }

    100%{
        border-color: transparent;
        outline-color:transparent ;
    }
}

.about-planet .mars::before{
    border: 2px solid #3c2100;
    outline: 2px solid #3c2100;
    animation: orbits 2s ease infinite, marsOrbits 2s ease infinite;
    -o-animation: orbits 2s ease infinite, marsOrbits 2s ease infinite;
    -moz-animation: orbits 2s ease infinite, marsOrbits 2s ease infinite;
    -webkit-animation: orbits 2s ease infinite, marsOrbits 2s ease infinite;
}

@keyframes jupitarOrbits {
    0%{
        outline-color:#483e21de;
        border-color:#483e21de;
    }

    50%{
        outline-color: #483e2181;
    }

    70%{
        border-color:#483e2181;
    }

    100%{
        border-color: transparent;
        outline-color:transparent ;
    }
}

.about-planet .jupitar::before{
    border: 2px solid #483e21de;
    outline: 2px solid #483e21de;
    animation: orbits 2s ease infinite, jupitarOrbits 2s ease infinite;
    -o-animation: orbits 2s ease infinite, jupitarOrbits 2s ease infinite;
    -moz-animation: orbits 2s ease infinite, jupitarOrbits 2s ease infinite;
    -webkit-animation: orbits 2s ease infinite, jupitarOrbits 2s ease infinite;
}

@keyframes saturnOrbits {
    0%{
        outline-color:#4a4430;
        border-color:#4a4430;
    }

    50%{
        outline-color: #4a443082;
    }

    70%{
        border-color:#4a443082;
    }

    100%{
        border-color: transparent;
        outline-color:transparent ;
    }
}

.about-planet .saturn::before{
    border: 2px solid #4a4430;
    outline: 2px solid #4a4430;
    animation: orbits 2s ease infinite, saturnOrbits 2s ease infinite;
    -o-animation: orbits 2s ease infinite, saturnOrbits 2s ease infinite;
    -moz-animation: orbits 2s ease infinite, saturnOrbits 2s ease infinite;
    -webkit-animation: orbits 2s ease infinite, saturnOrbits 2s ease infinite;
}

@keyframes uranusOrbits {
    0%{
        outline-color:#00373e;
        border-color:#00373e;
    }

    50%{
        outline-color: #00373e82;
    }

    70%{
        border-color:#00373e82;
    }

    100%{
        border-color: transparent;
        outline-color:transparent ;
    }
}

.about-planet .uranus::before{
    border: 2px solid #00373e;
    outline: 2px solid #00373e;
    animation: orbits 2s ease infinite, uranusOrbits 2s ease infinite;
    -o-animation: orbits 2s ease infinite, uranusOrbits 2s ease infinite;
    -moz-animation: orbits 2s ease infinite, uranusOrbits 2s ease infinite;
    -webkit-animation: orbits 2s ease infinite, uranusOrbits 2s ease infinite;
}

@keyframes neptuneOrbits {
    0%{
        outline-color:#00373e;
        border-color:#00373e;
    }

    50%{
        outline-color: #00373e84;
    }

    70%{
        border-color:#00373e84;
    }

    100%{
        border-color: transparent;
        outline-color:transparent ;
    }
}

.about-planet .neptune::before{
    border: 2px solid #00373e;
    outline: 2px solid #00373e;
    animation: orbits 2s ease infinite, neptuneOrbits 2s ease infinite;
    -o-animation: orbits 2s ease infinite, neptuneOrbits 2s ease infinite;
    -moz-animation: orbits 2s ease infinite, neptuneOrbits 2s ease infinite;
    -webkit-animation: orbits 2s ease infinite, neptuneOrbits 2s ease infinite;
}

@keyframes mercuryOrbits {
    0%{
        outline-color:#9e9e9e;
        border-color:#9e9e9e;
    }

    50%{
        outline-color: #9e9e9e77;
    }

    70%{
        border-color:#9e9e9e77;
    }

    100%{
        border-color: transparent;
        outline-color:transparent ;
    }
}

.about-planet .mercury::before{
    border: 2px solid #9e9e9e;
    outline: 2px solid #9e9e9e;
    animation: orbits 2s ease infinite, mercuryOrbits 2s ease infinite;
    -o-animation: orbits 2s ease infinite, mercuryOrbits 2s ease infinite;
    -moz-animation: orbits 2s ease infinite, mercuryOrbits 2s ease infinite;
    -webkit-animation: orbits 2s ease infinite, mercuryOrbits 2s ease infinite;
}

@keyframes sunOrbits {
    0%{
        outline-color:#684005;
        border-color:#684005;
    }

    50%{
        outline-color: #68400574;
    }

    70%{
        border-color:#68400574;
    }

    100%{
        border-color: transparent;
        outline-color:transparent ;
    }
}

.about-planet .sun::before{
    border: 2px solid #684005;
    outline: 2px solid #684005;
    animation: orbits 2s ease infinite, sunOrbits 2s ease infinite;
    -o-animation:  orbits 2s ease infinite, sunOrbits 2s ease infinite;
    -moz-animation:  orbits 2s ease infinite, sunOrbits 2s ease infinite;
    -webkit-animation:  orbits 2s ease infinite, sunOrbits 2s ease infinite;
}

@keyframes moonOrbits {
    0%{
        outline-color:#323232;
        border-color:#323232;
    }

    50%{
        outline-color: #323232;
    }

    70%{
        border-color:#323232;
    }

    100%{
        border-color: transparent;
        outline-color:transparent ;
    }
}

.about-planet .moon::before{
    border: 2px solid #323232;
    outline: 2px solid #323232;
    animation: orbits 2s ease infinite, moonOrbits 2s ease infinite;
    -o-animation:  orbits 2s ease infinite, moonOrbits 2s ease infinite;
    -moz-animation:  orbits 2s ease infinite, moonOrbits 2s ease infinite;
    -webkit-animation:  orbits 2s ease infinite, moonOrbits 2s ease infinite;
}

.about-planet.current  :is(.earth, .jupitar, .mars, .neptune, .uranus, .saturn, .venus, .mercury, .sun, .moon)
{
    animation: forPlanet 2s ease, rotate 12s linear infinite;
    -o-animation:  forPlanet 2s ease, rotate 12s linear infinite;
    -moz-animation:  forPlanet 2s ease, rotate 12s linear infinite;
    -webkit-animation:  forPlanet 2s ease, rotate 12s linear infinite;
}

.about-planet .planet::after{
    /* content: ""; */
    display: block;
    height: 100vh;
    width: 100vw;
    border: 2px solid #757575;
    position: absolute;
    border-radius: 50%;
    left: 34%;
    top: -24%;
    animation: visibility 1s linear;
    -o-animation:  visibility 1s linear;
    -moz-animation:  visibility 1s linear;
    -webkit-animation:  visibility 1s linear;

}

.about-planet .planet::before{
    display: block;
    width: 210px;
    height: 170px;
    border: 2px solid #757575;
    border-radius: 50%;
    border-right-color: transparent;
    border-bottom-color: transparent;
    transform: rotate(-108deg);
    -o-transform: rotate(-108deg);
    -ms-transform: rotate(-108deg);
    -webkit-transform: rotate(-108deg);
    -moz-transform: rotate(-108deg);
    position: absolute;
    z-index: 3;
    left: 36.5%;
    top: 54%;
    border-left-color: transparent;
    animation: visibility 1s linear;
    -o-animation:  visibility 1s linear;
    -moz-animation:  visibility 1s linear;
    -webkit-animation:  visibility 1s linear;
}

.about-planet{
    position: relative;
}

/* zoom out */
.full-planet{
    width: 800px ;
    height: 700px ;
    top: -30% ;
    z-index: 3;
    bottom: 0;
    left: -88%;
}

/* for content */
div.about-planet span.underline{
    width: 200px;
    height: 4px;
    background: #00FFFF;
    margin-bottom: 40px ;
    display: block;
}

div.about-planet .content>span:nth-child(1){
    font-size: 20px;
    letter-spacing: 1px;
    margin-bottom: 5px;
    display: inline-block;
}

/*---- for details about planet---- */
.detail-planet{
    width: 100vw;
    bottom: 0;
    background: black;
    position: fixed;
    top: 0;
    z-index: 10000;
    display: flex;
    justify-content: center;
    color: white;
    /* align-items: center; */
    overflow-y: auto;
    will-change: right;
    animation:  slideRight 1s linear;
    -o-animation:  slideRight 1s linear;
    -moz-animation:  slideRight 1s linear;
    -webkit-animation:  slideRight 1s linear;
    display: none;
}

/* cross symbol */
.cross{
    position: absolute;
    top: -5px;
    right: 10px;
    color: white;
    z-index: 1000;
    font-size: 26px;
    font-stretch: ultra-expanded;
    text-transform: lowercase;
    cursor: pointer;
}

.detail-planet .content{
    max-width: 1000px;
    margin: auto;
    padding: 20px 30px;
}

/* vertical text */
.detail-planet span{
    writing-mode: vertical-rl;
    left: 6%;
    font-size: 70px;
    padding-top: 30%;
    min-height: 100%;
    letter-spacing: 9px;
    white-space: nowrap;
}

.detail-planet p{
    font-size: 20px;
    line-height: 1;
    max-width: 1000px;
    line-height: 1.5;
    letter-spacing: 2px;
    text-indent: 20px;
    margin-bottom: 20px;
    text-align: justify;
}

.detail-planet h3{
    font-size: 95px;
    letter-spacing: 5px;
    text-align: center;
    margin-bottom: 40px;
}

@keyframes slideRight {
    0%{
        right: -100vw
    }
    100%{
        right: 0vw;
    }
}

@keyframes top {
    0%{
        top: 80%
    }
    100%{
        top: 20%;
    }
}

/* planets */
.detail-planet .planet{
    position: fixed;
    width: 100vw;
    height: 100vw;
    top: 20%;
    will-change: top, background-position;
    animation: top 5s ease, rotate 10s linear infinite;
    -o-animation: top 5s ease, rotate 10s linear infinite;
    -moz-animation: top 5s ease, rotate 10s linear infinite;
    -webkit-animation: top 5s ease, rotate 10s linear infinite;
    opacity: 0.3;
    z-index: -1;

}

@keyframes rotate {

    0%{
        background-position: 0%;
    }

    100%{
        background-position: 100% ;
    }

}

@keyframes moveUp {

    0%{
        top: 40%;
    }

    100%{
        top: 10% ;
    }

}

@keyframes forPlanet {
    0%{
        top: -39%;
        width: 700px;
        height: 700px;
        right: 36%;
    }
    100%{
        width: 400px;
        height: 400px;
        top: 0;
        right: 0;
    }
}

.visibility{
    animation: visibility 8s linear;
    -o-animation: visibility 8s linear;
    -moz-animation: visibility 8s linear;
    -webkit-animation: visibility 8s linear;
}

@keyframes visibility {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}


/* responsiveness */
@media only screen and (max-width: 1000px) {
    .about-planet .container{
        max-width: 900px;
    }
}
@media only screen and (max-width: 991px) {
    .about-planet .content, .about-planet .planet {
        width: 100%;
    }

    .about-planet .container{
        flex-direction: column-reverse;
        text-align: center;
        align-items: center;
    }

    .about-planet .planet {
        min-height: 0px;
    }

    .about-planet .underline{
        margin: auto;
        width: 100px;
    }

    .about-planet p{
        max-width: 500px;
        padding: 20px 30px;
        margin: auto;
    }

    .about-planet .earth, .about-planet .jupitar {
        opacity: 0.3;
        right: calc(50% - 200px);
        top: 0;
    }

    .about-planet .planet{
        opacity: 0.5;
    }

    .detail-planet{
        padding: 40px 30px 40px 40px
    }

    nav ul{
        padding-top: 40px;
    }
    
    nav ul.prim-menu li a{
        font-size: 40px;
        margin-top: 10px;
    }

    nav ul.prim-menu li{
        min-height: 80px;
    }
}

@media only screen and (max-width: 1000px) {
    .planet-header .container{
        padding: 20px;
    }

    .planet-header p{
        letter-spacing: 2px;
        max-width: 500px;
        margin: auto;
        height: 100px;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .planet-header h2{
        font-size: 82px;
    }

    .planets{
        bottom: -30vw;
        left: calc(50% - 30vw);
        width: 60vw;
        height: 60vw;
    }

    #main-planet {
        bottom: -30vw;
        left: calc(50% - 30vw);
        width: 60vw;
        height: 60vw;
        animation-duration: 30s;
        -o-animation-duration: 30s;
        -moz-animation-duration: 30s;
        -webkit-animation-duration: 30s;
    }
}

@media only screen and (max-width: 775px){
    ul.sec-menu{
        flex-direction: column;
        max-width: 100%;
        right: 0;
        top: 45px;
        text-align: start;
    
    }
    ul.sec-menu li {
        padding: 10px 20px;
    }
}


@media only screen and (max-width: 600px) {
    .planet-header .container{
        padding: 20px;
    }

    .planet-header p{
        letter-spacing: 2px;
        max-width: unset;
        margin: auto;
        padding: 0 20px;
        min-height: 180px;
        height: auto;
        margin-top: 30px;
    }

    .planet-header h2{
        font-size: 72px;
    }

    .planet-header h1{
        font-size: 18px;;
    }

    .planets{
        bottom: 0vw;
        left: calc(50% - 20vw);
        width: 60vw;
        height: 60vw;

    }

    #main-planet {
        bottom: 0vw;
        left: calc(50% - 20vw);
        width: 60vw;
        height: 60vw;
        animation-duration: 30s;
        -o-animation-duration: 30s;
        -moz-animation-duration: 30s;
        -webkit-animation-duration: 30s;
    }

    #left-planet {
        width: 20vw;
        height: 20vw;
        left: 2vw;
        bottom: 35%;
    }

    #right-planet {
        width: 16vw;
        height: 16vw;
        left: 77vw;
        bottom: 56%;
    }

    .about-planet :is(.earth, .jupitar, .mars, .neptune, .uranus, .saturn, .venus, .mercury, .sun, .moon){
        width: 300px;
        height: 300px;
        right: calc(50% - 150px)
    }
    
    @keyframes forPlanet {
        0%{
            top: -39%;
            width: 700px;
            height: 700px;
            right: 36%;
        }
        100%{
            width: 300px;
            height: 300px;
            top: 0;
            right: calc(50% - 150px);
        }
    }

    .about-planet h2 {
        font-size: 70px;
    }

    .detail-planet{
        overflow: hidden;
    }

    .detail-planet .planet{
        width: 100vw;
        height: 130vw;
    }

    .detail-planet span{
        font-size: 62px;
    padding-top: 99%;
    }

    .detail-planet .content{
        padding: 20px 30px 20px 10px;
    }
    
    nav ul.prim-menu li a{
        font-size: 30px;
    }
}

@media only screen and (max-width: 400px) {

    .planet-header p{
        min-height: 250px;
    }

    .planet-header h2{
        font-size: 62px;
        padding: 0 10px;
        margin-top: 10px;
    }

    .detail-planet span {
        font-size: 31px;
    }

    .detail-planet h3 {
        font-size: 48px;
        margin-left: -10%;
    }

    .detail-planet p {
        font-size: 15px;
    }

    .detail-planet {
        padding: 20px 2px 20px 20px;
    }

}

@media only screen and (max-width: 400px) {

    .planet-header p{
        min-height: 250px;
    }

    .planet-header h2{
        font-size: 62px;
    }

    
    #main-planet,
    .planets{
        bottom: 10vw;
        left: calc(50% - 35vw);
        width: 76vw;
        height: 76vw;
    }

    #left-planet{
        bottom: 45vh
    }

    #right-planet{
        bottom: 60vh
    }

    div.about-planet .content>span:nth-child(1) {
        font-size: 18px;
    }

    .about-planet h2 {
        font-size: 75px;
    }

    div.about-planet span.underline {
        width: 85px;
    }

    .about-planet p{
        font-size: 16px;
        padding: 10px;
    }

    .about-planet h2{
        font-size: 50px;
    }

    .about-planet :is(.earth, .jupitar, .mars, .neptune, .uranus, .saturn, .venus, .mercury, .sun, .moon) {
        width: 200px;
        height: 200px;
        right: calc(50% - 100px);
        top: 100px;
    }

    @keyframes forPlanet {
        0%{
            top: -39%;
            width: 700px;
            height: 700px;
            right: 36%;
        }
        100%{
            width: 200;
            height: 200;
            top: 100px;
            right: calc(50% - 100px);
        }
    }

    nav ul{
        padding-top: 50px;
    }

    nav ul.prim-menu li a{
        font-size: 30px;
        margin-top: 10px;
    }

    nav ul.prim-menu li{
        min-height: 80px;
    }
}

@media only screen and (max-width: 320px) {

    .planet-header h2{
        font-size: 52px;
    }

    nav ul.prim-menu li a{
        font-size: 24px;
    }
}


@media only screen and (max-height: 800px) and (max-width: 500px) {
    .planet-header {
        padding-top: 85px;
    }
}

@media only screen and (min-height: 900px) and (min-width:700px){
    .planet-header {
        padding-top: 0px;
        align-items: center;
        margin-top: -60px;
    }

    #left-planet,
    #right-planet{
        bottom: 43%
    }

    #main-planet,
    .planets {
        bottom: -32vw;
        left: calc(50% - 33vw);
        width: 65vw;
        height: 65vw;
    }
}

@media only screen and (min-height: 900px) and (min-width:1500px){
    #main-planet {
        bottom: -47vw;
    }
    .planets{
        bottom: -47vw;
    }
}


/* cursor */
.cursor{
    position: absolute;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: transparent;
    /* transition-duration: 0.05s;
    -o-transition-duration: 0.05s;
    -moz-transition-duration: 0.05s;
    -webkit-transition-duration: 0.05s;
    transition-timing-function:linear;
    -o-transition-timing-function:linear;
    -moz-transition-timing-function:linear;
    -webkit-transition-timing-function:linear; */
    will-change: transform, left, top;
    transition: transform 0.1s ease, background-color 0.1s ease;
    transform: translate(-40%, -30%);
    -o-transform: translate(-40%, -30%);
    -ms-transform: translate(-40%, -30%);
    -moz-transform: translate(-40%, -30%);
    -webkit-transform: translate(-40%, -30%);
    pointer-events: none;
    mix-blend-mode: difference;
    /* display: none; */
    z-index: 1000000000000000000;
    border: 2px solid white;
}

.cursorBig{
    background-color: #ffffff9e;
    border-color: #ffffff0a;
    transform: scale(2) translate(-40%, -30%);
}