* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color: rgb(51, 48, 48);
    overflow: hidden;
    height: 125vh;
}

.navbar {
    display: flex;
    max-height: 4rem;
}

.nav_items {
    width: 100%;
    background-color: cornflowerblue;
    display: flex;
}

.nav_items li {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
   
    padding: 1.7rem 5rem;
    
}

.nav_items li a {
    text-decoration: none;
    font-weight: bold;
    color: white;
    position: relative;
}

.nav_items li a::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0.2rem;
    left: 0;
    top: 100%;
    background-color: black;
    transition: all 0.6s;
} 

.nav_items li a:hover::before {
    width: 100%;
    background-color: greenyellow;
}

.logo {

    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
font-weight: bolder;

}


.jar{
width: 30vw;
height: 60vh;
position: absolute;
top: 40vh;
left: 40vw;
transform:translate(-50% -50%) ;
perspective: 1000px;
}
.three-d{
    transform-style:preserve-3d ;
    height: 250px;
    width: 250px;
    position: absolute;
      /* top: 10px; */
      animation: animate 5s infinite;

}
@keyframes animate{
    0%{
        transform: rotateX(45deg) rotateY(-45deg);
    }
    25%{
        transform: rotateX(-45deg) rotateY(-45deg);
    }
    50%{
        transform: rotateX(45deg) rotateY(45deg);
    }
    75%{
        transform: rotateX(-45deg) rotateY(45deg);
    }
    100%{
        transform: rotateX(45deg) rotateY(-45deg);
    }

}
.three-d-obj{
    height: 250px;
    width: 250px;
    text-align: center;
    padding: 6vw 0;
    color: white;
    background: linear-gradient(#151515 ,#00ec00);
   border: 2px solid white;
   font-size: 2rem;
   box-sizing: border-box;
   position: absolute;
}
#front{
transform: translateZ(125px);
}
#back{
    transform: translateZ(-125px);
}
#up{
    bottom: 125px;
transform: rotateX(90deg);
}
#down{
    top: 125px;
    transform: rotateX(-90deg);
}
#left{
right: 125px;
transform: rotateY(90deg);
}
#right{
    left: 125px;
    transform: rotateY(-90deg);
}

.star{
    display: flex;
    position: relative;
}
.star span{
    position: relative;
    width: 20px;
    height: 20px;
    background-color: rgb(39, 189, 189);
    margin: 0 8px;
    border-radius: 50%;
    box-shadow: 0 0 0 6px rgb(21, 89, 134),0 0 50px rgb(10, 32, 102),0 0 100px rgb(10, 32, 102) ;
    animation: new 15s linear infinite;
    animation-duration: calc(125s / var(--i));
}
@keyframes new {
    0%{
        transform: translateY(100vh) scale(0);
    }
    100%{
        transform: translate(-1vh) scale(1);
    }
}

.star span:nth-child(even){
    background-color: red;
    box-shadow: 0 0 0 6px rgb(240, 69, 27),0 0 50px rgb(175, 13, 13),0 0 100px rgb(175, 13, 13) ;

}