@font-face {
    font-family: 'Poppins';
    font-style: normal;
    src: local('Poppins'), url('font/poppins-regular.woff2') format('woff');
}

body {
    background-color: rgb(15, 15, 15);
    margin: 0;
    padding: 0;
    font-family: 'Poppins';
}

.h11 {
    animation-name: colorchange;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: .2s;
    animation-iteration-count: infinite;
}

@keyframes colorchange {
    0% {
        color: #00ff93;
    }

    10% {
        color: #f6ff00;
    }

    20% {
        color: #ff5e00;
    }

    30% {
        color: #00ff51;
    }

    40% {
        color: #00b3ff;
    }

    50% {
        color: #00ff93;
    }

    60% {
        color: #00c3ff;
    }

    70% {
        color: #0400ff;
    }

    80% {
        color: #8c00ff;
    }

    90% {
        color: #ff00ee;
    }

    100% {
        color: #00ff93;
    }
}

.h33.highlight-last-word span {
    color: #00d9ff;
}

@media screen and (min-width:1569px) {
    main .container {
        max-width: 1500px;
    }
}

main .container {
    margin: 0 7em;
    justify-self: center;
}

.img1 {
    width: 60rex;
    display: flex;
    border: 1px solid black;
    border-radius: .6em;
    filter: drop-shadow(1px 1px 1em white);
    transition: 2s;
    animation-name: front;
    animation-timing-function: ease-in-out;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

@keyframes front {
    0% {
        transform: scale(.9);
    }

    50% {
        transform: scale(.8);
    }

    100% {
        transform: scale(.9);
    }
}

.img1:hover {
    transform: scale(.8);
    animation: none;
}

/* About section */

.main2 {
    background-color: white;
    background: linear-gradient(222deg, #111111 0% 19%, #584fb9 85%);
}

.Tech-Skills {
    background: linear-gradient(-222deg, #111111 0% 19%, #584fb9 85%);
    position: relative;
}

/* .Tech-Skills::before {
    content: '';
    pointer-events: none;
    position: absolute;
    left: 2em;
    top: 3em;
    width: 500px;
    height: 400px;
    background: radial-gradient(circle at center, #00c382cc 0%, #003d25b3 40%, #00000000 80%);
} */

.div2 {
    border: 1px solid rgba(255, 255, 255, 0);
}


#showabout,
#showabout-img,
#showabout-txt {
    opacity: 0;
}

#About .container.visible {
    animation: reload-img2 .8s linear forwards;
}

#About #showabout-img.visible {
    animation: reload-img2 .8s linear .7s forwards;
}

#About #showabout-txt.visible {
    animation: reload-img3 .8s linear 1.3s forwards;
}

#About .container {
    cursor: pointer;
}

@keyframes reload-img2 {
    0% {
        transform: translateY(-50em);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes reload-img3 {
    0% {
        transform: translateX(50em);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Resume */

.main3 {
    background-color: white;
    position: relative;
}

/* Footer page section */

footer {
    background-color: rgb(237, 237, 237);
    height: 6em;
    position: relative;
    align-content: center;
    align-self: center;
}

footer ul {
    display: block;
}

footer ul li {
    display: block;
    text-align: center;
}

footer ul li a {
    text-decoration: none;
    color: rgb(49, 49, 49);
}

li a span {
    color: rgb(0, 157, 171);
}

.educationanimation,
.alleductionanimation,
.alleductionanimation .icons,
.alleductionanimation img {
    transition: all .7s ease-in;
}

.educationanimation:hover {
    scale: 1.04;
    background-color: #a5a2ce1e;
}

.educationanimation:hover img {
    scale: 1.06;
}

#skills,
/* #projects, */
#Resume .showresume,
#Resume .showgridresume {
    opacity: 0;
    overflow: hidden;
}

#projects.visible {
    animation: projects .8s linear forwards;
}

#Resume .showresume.visible {
    animation: resume .8s linear forwards;
}

#skills.visible,
#Resume .showgridresume.visible {
    animation: showgridresume .9s linear 1s forwards;
}

@keyframes resume {
    0% {
        opacity: 0;
        transform: translateX(-106em);
    }

    80% {

        transform: translateX(0);
    }

    90% {
        transform: translateX(2em);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes showgridresume {
    0% {
        opacity: 0;
        transform: scale(1);
        transform: translateX(106em);
    }

    50% {
        transform: scale(.5);
    }

    80% {

        transform: translateX(0);
    }

    90% {
        transform: translateX(2em);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        transform: translateX(0);
    }
}

@keyframes projects {
    0% {
        opacity: 0;
        transform: scale(1);
        transform: translateX(-106em);
    }

    50% {
        transform: scale(.5);
    }

    80% {

        transform: translateX(0);
    }

    90% {
        transform: translateX(-2em);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        transform: translateX(0);
    }
}

/* circular progress bar css */

.circular-progress {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.inner-circle {
    position: absolute;
    width: 47px;
    height: 47px;
    border-radius: 50%;
    background-color: rgb(83, 36, 36);
}

.percentage {
    position: relative;
    font-size: 1em;
    color: black;
}

@media screen and (max-width:600px) {
    .circular-progress {
        width: 80px;
        height: 80px;
    }
}


/* animation slider */

.animations {
    /* top: 35%;
    left: 49%;
    rotate: 0deg; */
    animation: animatecross 6s linear infinite;
}

@keyframes animatecross {
    0% {
        top: 0%;
        left: 25%;
        rotate: 0deg;
    }

    25% {
        top: 35%;
        left: 0%;
        /* rotate: 360deg; */
    }

    50% {
        top: 73%;
        left: 25%;
        /* rotate: 0deg; */
    }

    75% {
        top: 49%;
        left: 50%;
        /* rotate: 360deg; */
    }

    100% {
        top: 0%;
        left: 25%;
        rotate: 360deg;
    }
}

#projects .alleductionanimation:hover .icons {
    border: 1px solid rgb(17, 52, 255);
    padding: 3px 8px;
    background-color: #0051ff70;
    color: #ffffff;
}

@media screen and (min-width:1281px) {
    #projects {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media screen and (max-width:1280px) {
    #projects {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width:1023px) {
    #projects {
        grid-template-columns: auto;
    }
}

#projects .alleductionanimation:hover .visiblelive {
    opacity: 1;
    transition: all .7s ease;
}

.animatelive {
    animation: alltime .6s ease-in infinite;
}

@keyframes alltime {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@media screen and (min-width:1024px) {
    #projects .alleductionanimation:hover .animated-text h2 {
        transform: translateY(-2rem);
        transition: all .7s ease;
    }

    #projects .alleductionanimation .animated-text h2 {
        transform: translateY(0);
        transition: all 0.7s ease;
    }
}
