.highlight1 {
    background-image: linear-gradient(to right, rgba(55, 106, 247, 0), rgba(170, 94, 241, 0.5), rgba(64, 44, 238, 0));
    width: 1200px;
    height: 300px;
    position: fixed;
    top: 450px;
    right: 2000px;
    animation-name: appear;
    animation-duration: 5s;
}

@keyframes appear {
    0% {right: -1500px;}
    30% {right: -1500px;}
    65% {right: -300px;}
    100% {right: 2000px;}
  }

#name {
    margin-top: 50px;
}

.cirle {
    background-image: linear-gradient(156deg, #8E1F65, #2981E6);
    width: 2000px;
    height: 2000px;
    position: fixed;
    top: -25%;
    left: -55%;
    border-radius: 50%;
    animation-name: sircol;
    animation-duration: 0.7s;
}

.image1 {
    position: fixed;
    left: 10%;
    top: 20%;
    width: 15%;
    animation-name: img1;
    animation-duration: 1.7s;
}
.image2 {
    position: fixed;
    left: 25%;
    top: 35%;
    width: 15%;
    animation-name: img2;
    animation-duration: 2.0s;
}

@keyframes sircol {
    from {left: -100%;}
    to {left: -55%;}
  }

@keyframes img1 {
from {left: -30%;}
to {left: 10%;}
50% {transform: rotate(360deg);}
}
    
@keyframes img2 {
from {left: -30%;}
to {left: 25%;}
45% {transform: rotate(360deg);}
}

.form {
    position: fixed;
    top: 50px;
    right: 0px;
    width: 40%;
    margin: 0px 50px 18px 12px;
    animation-name: frm;
    animation-duration: 0.7s;
}

#name {
    animation-name: frm;
    animation-delay: 500ms;
}
#email {
    animation-name: frm;
    animation-delay: 1000ms;
}
#category {
    animation-name: frm;
    animation-delay: 2000ms;
}


@keyframes frm {
    from {right: -600px;}
    to {right: 0px;}
    }

footer {
    width: 45%;
    position: fixed;
    bottom: 0px;
    right: 0px;
    color: #a3a3a3;
    margin: 0px 12px 18px 12px;
    font-size: x-small;
}


.unselectable {
    user-drag: none; 
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
  }