/* ---------- skillssections---------- */

.skillssections {
    /* padding: 1rem 3rem; */
    height: 200vh;
    width: 90%;
}

/* ----------skillsbox------------ */

.skillsbox {
    font-size: 3rem;
    /* background-color: red; */
    width: 95%;
    margin-left: 3rem
}

.skills {
    display: flex;
    align-items: center;
    width: 81%;
    justify-content: space-between;
    flex-direction: row-reverse;
    margin-bottom: 1rem;
}

.skillname {
    margin-left: 2rem;
}

.skillline {
    width: 78%;
    height: 1rem;
    background-color: rgb(65, 63, 63);
    border-radius: 100px;
    position: relative;
    box-shadow: rgba(255, 255, 255, 0.1) 0px 4px 12px;
}

/* ---------------------------- */

.html::before {
    content: "";
    position: absolute;
    width: 95%;
    height: 1rem;
    background: rgb(255, 255, 255);
    border-radius: 100px;
    animation: htmlbefore 3s;
}

@keyframes htmlbefore {
    from {
        width: 0%;
    }

    to {
        width: 95%;
    }

}

.html::after {
    content: "";
    position: absolute;
    width: 2rem;
    height: 2rem;
    background: #ffffff;
    border-radius: 100px;
    left: 93%;
    top: -6px;
    box-shadow: #ffcd1b 0px 0px 20px;
    animation: htmlafter 3s;
}

@keyframes htmlafter {
    from {
        left: 0%;
    }

    to {
        left: 93%;
    }
}

/* ---------------------------- */

.css::before {
    content: "";
    position: absolute;
    width: 85%;
    height: 1rem;
    background: rgb(255, 255, 255);
    border-radius: 100px;
    animation: cssbefore 3s;
}

@keyframes cssbefore {
    from {
        width: 0%;
    }

    to {
        width: 85%;
    }

}

.css::after {
    content: "";
    position: absolute;
    width: 2rem;
    height: 2rem;
    background: #ffffff;
    border-radius: 100px;
    left: 83%;
    top: -6px;
    box-shadow: #ffcd1b 0px 0px 20px;
    animation: cssafter 3s;
}

@keyframes cssafter {
    from {
        left: 0%;
    }

    to {
        left: 83%;
    }
}

/* ----------------------------------- */

.JavaScript::before {
    content: "";
    position: absolute;
    width: 75%;
    height: 1rem;
    background: rgb(255, 255, 255);
    border-radius: 100px;
    animation: JavaScriptbefor 3s;
}

@keyframes JavaScriptbefor {
    from {
        width: 0%;
    }

    to {
        width: 75%;
    }

}

.JavaScript::after {
    content: "";
    position: absolute;
    width: 2rem;
    height: 2rem;
    background: #ffffff;
    border-radius: 100px;
    left: 73%;
    top: -6px;
    box-shadow: #ffcd1b 0px 0px 20px;
    animation: javscriptafter 3s;
}

@keyframes javscriptafter {
    from {
        left: 0%;
    }

    to {
        left: 73%;
    }
}

/* ------------------------------ */

.React::before {
    content: "";
    position: absolute;
    width: 60%;
    height: 1rem;
    background: rgb(255, 255, 255);
    border-radius: 100px;
    animation: reactbefore 3s;
}

@keyframes reactbefore {
    from {
        width: 0%;
    }

    to {
        width: 60%;
    }

}

.React::after {
    content: "";
    position: absolute;
    width: 2rem;
    height: 2rem;
    background: #ffffff;
    border-radius: 100px;
    left: 58%;
    top: -6px;
    box-shadow: #ffcd1b 0px 0px 20px;
    animation: reactafter 3s;
}

@keyframes reactafter {
    from {
        left: 0%;
    }

    to {
        left: 58%;
    }
}

/* ----------------------------------- */

.Bootstrap::before {
    content: "";
    position: absolute;
    width: 90%;
    height: 1rem;
    background: rgb(255, 255, 255);
    border-radius: 100px;
    animation-name: Bootstrapdbefore;
    animation-duration: 3s;
}

@keyframes Bootstrapdbefore {
    from {
        width: 0%;
    }

    to {
        width: 90%;
    }
}

.Bootstrap::after {
    content: "";
    position: absolute;
    width: 2rem;
    height: 2rem;
    background: #ffffff;
    border-radius: 100px;
    left: 88%;
    top: -6px;
    box-shadow: #ffcd1b 0px 0px 20px;
    animation-name: Bootstrapdafter;
    animation-duration: 3s;
}

@keyframes Bootstrapdafter {
    from {
        left: 0%;
    }

    to {
        left: 88%;
    }
}

/* --------------------------------- */

.Tailwind::before {
    content: "";
    position: absolute;
    width: 90%;
    height: 1rem;
    background: rgb(255, 255, 255);
    border-radius: 100px;
    animation-name: Tailwindbefore;
    animation-duration: 3s;
}

@keyframes Tailwindbefore {
    from {
        width: 0%;
    }

    to {
        width: 90%;
    }
}

.Tailwind::after {
    content: "";
    position: absolute;
    width: 2rem;
    height: 2rem;
    background: #ffffff;
    border-radius: 100px;
    left: 88%;
    top: -6px;
    box-shadow: #ffcd1b 0px 0px 20px;
    animation-name: Tailwindafter;
    animation-duration: 3s;
}

@keyframes Tailwindafter {
    from {
        left: 0%;
    }

    to {
        left: 88%;
    }
}

/* --------------------------------- */

.MongoDB::before {
    content: "";
    position: absolute;
    width: 50%;
    height: 1rem;
    background: rgb(255, 255, 255);
    border-radius: 100px;
    animation-name: MongoDBbefore;
    animation-duration: 3s;
}

@keyframes MongoDBbefore {
    from {
        width: 0%;
    }

    to {
        width: 50%;
    }
}

.MongoDB::after {
    content: "";
    position: absolute;
    width: 2rem;
    height: 2rem;
    background: #ffffff;
    border-radius: 100px;
    left: 48%;
    top: -6px;
    box-shadow: #ffcd1b 0px 0px 20px;
    animation-name: MongoDBafter;
    animation-duration: 3s;
}

@keyframes MongoDBafter {
    from {
        left: 0%;
    }

    to {
        left: 48%;
    }
}

/* --------------------------------- */

.Express::before {
    content: "";
    position: absolute;
    width: 55%;
    height: 1rem;
    background: rgb(255, 255, 255);
    border-radius: 100px;
    animation-name: Expressbefore;
    animation-duration: 3s;
}

@keyframes Expressbefore {
    from {
        width: 0%;
    }

    to {
        width: 55%;
    }
}

.Express::after {
    content: "";
    position: absolute;
    width: 2rem;
    height: 2rem;
    background: #ffffff;
    border-radius: 100px;
    left: 53%;
    top: -6px;
    box-shadow: #ffcd1b 0px 0px 20px;
    animation-name: Expressafter;
    animation-duration: 3s;
}

@keyframes Expressafter {
    from {
        left: 0%;
    }

    to {
        left: 53%;
    }
}

/* --------------------------------- */

.Next::before {
    content: "";
    position: absolute;
    width: 60%;
    height: 1rem;
    background: rgb(255, 255, 255);
    border-radius: 100px;
    animation-name: Nextbefore;
    animation-duration: 3s;
}

@keyframes Nextbefore {
    from {
        width: 0%;
    }

    to {
        width: 60%;
    }
}

.Next::after {
    content: "";
    position: absolute;
    width: 2rem;
    height: 2rem;
    background: #ffffff;
    border-radius: 100px;
    left: 58%;
    top: -6px;
    box-shadow: #ffcd1b 0px 0px 20px;
    animation-name: Nextafter;
    animation-duration: 3s;
}

@keyframes Nextafter {
    from {
        left: 0%;
    }

    to {
        left: 58%;
    }
}

/* --------------------------------- */

.Node::before {
    content: "";
    position: absolute;
    width: 60%;
    height: 1rem;
    background: rgb(255, 255, 255);
    border-radius: 100px;
    animation-name: Nodebefore;
    animation-duration: 3s;
}

@keyframes Nodebefore {
    from {
        width: 0%;
    }

    to {
        width: 60%;
    }
}

.Node::after {
    content: "";
    position: absolute;
    width: 2rem;
    height: 2rem;
    background: #ffffff;
    border-radius: 100px;
    left: 58%;
    top: -6px;
    box-shadow: #ffcd1b 0px 0px 20px;
    animation-name: Nodeafter;
    animation-duration: 3s;
}

@keyframes Nodeafter {
    from {
        left: 0%;
    }

    to {
        left: 58%;
    }
}


/* --------------------------------- */

.Mongoose::before {
    content: "";
    position: absolute;
    width: 60%;
    height: 1rem;
    background: rgb(255, 255, 255);
    border-radius: 100px;
    animation-name: Nodebefore;
    animation-duration: 3s;
}

@keyframes Mongoosebefore {
    from {
        width: 0%;
    }

    to {
        width: 60%;
    }
}

.Mongoose::after {
    content: "";
    position: absolute;
    width: 2rem;
    height: 2rem;
    background: #ffffff;
    border-radius: 100px;
    left: 58%;
    top: -6px;
    box-shadow: #ffcd1b 0px 0px 20px;
    animation-name: Mongooseafter;
    animation-duration: 3s;
}

@keyframes Mongooseafter {
    from {
        left: 0%;
    }

    to {
        left: 58%;
    }
}


/* ----------------- cubes sections --------------------  */

.cubessection {
    position: relative;
    bottom: -200px;
}

.Tailwindfontsize {
    font-size: 2.5rem;
    font-weight: bold;
}

.container {
    width: 200px;
    height: 200px;
    perspective: 800px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

}

.cube {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: cuberotate 15s linear infinite;

}

.face {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 2px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

.front {
    background-color: #17e8ffc5;
    box-shadow: #ffcd1b 0px 7px 29px 0px;
    transform: translateZ(100px);
}

.back {
    background-color: #17e8ffc5;
    box-shadow: #ffcd1b 0px 7px 29px 0px;
    transform: translateZ(-100px);
}

.left {
    background-color: #17e8ffc5;
    box-shadow: #ffcd1b 0px 7px 29px 0px;
    transform: translateX(-100px) rotateY(-90deg);
}

.right {
    background-color: #17e8ffc5;
    box-shadow: #ffcd1b 0px 7px 29px 0px;
    transform: translateX(100px) rotateY(90deg);
}

.top {
    background-color: #17e8ffc5;
    box-shadow: #ffcd1b 0px 7px 29px 0px;
    transform: translateY(-100px) rotateX(90deg);
}

.bottom {
    background-color: #17e8ffc5;
    box-shadow: #ffcd1b 0px 7px 29px 0px;
    transform: translateY(100px) rotateX(-90deg);
}

@keyframes cuberotate {
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}