#div0{
    margin-top:50px;
    height: 92vh;
    display: flex;
    justify-content: center;
    align-items: center;
    animation:side 5s ;
    
}
#div2{
    font-size: xx-large;
}
@keyframes side {
    0%{
        transform:translateX(-100%)
    }
    100%{
        transform: translateX(0%);
    }
}
#div1{
    display: flex;
    justify-content: center;
}
#para1{
    color:white;
}
#div2 ol{
    overflow: hidden;
    padding: 0%;
    --height:2.8rem;
    height: var(--height);
    display:flex;
    flex-direction: column;
    align-items: flex-start;
}
#div2 ol li{
    list-style: none;
    animation:slide calc(5*3*2s) steps(5) infinite; 
    padding-top:4px;
    padding-bottom: 4px;
}
@keyframes slide {
    100%{
        transform: translateY(-500%);
    }
}
ol li span{
    -webkit-text-fill-color: transparent;
    background:  linear-gradient(20deg, cyan , magenta);
    -webkit-background-clip: text;
    white-space: nowrap;
    display:inline-block;
    width:0%;
    border-right: 3px solid white;
    animation:cursor .8s step-end infinite,
    typing 3s steps(16) infinite alternate;
}
@keyframes cursor {
    50%{
        border-color: transparent;
    }
}
@keyframes typing {
    0%,10%{
        width:0%;
    }
    70%,100%{
        width:101%;
    }
}
#image{
    border: 5px solid  cyan ;
    box-shadow: 0px 0px 30px magenta;
    border-radius: 50rem;
}
#div3{
    display: flex;
    text-align: center;
     
}
#btn{
    background:linear-gradient(20deg, cyan , magenta); 
    padding-block: 20px;
    color:white;
    border:1px solid white;
    box-shadow: 0px 0px 10px white;
    border-radius: 50rem;
    padding-inline: 10px;
    font-size: large;
    text-decoration: none;
}
#title{
    color:cyan;
}
#about{
    
    height: auto;
    
}
#imageabout{
    border-radius: 5px;
    width: 300px;
    height: 300px;
    animation: side 10s ;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}
#div4{
    font-size: x-large;
    text-align: start;
    margin-inline-end:50px;
}
i{
    -webkit-text-fill-color: transparent;
    background:  linear-gradient(20deg, cyan , magenta);
    -webkit-background-clip: text;
    white-space: nowrap;
    
}
i:hover{
    -webkit-text-fill-color: transparent;
    background:  linear-gradient(20deg, rgb(255, 153, 0) , rgb(0, 162, 255));
    -webkit-background-clip: text;
    white-space: nowrap;
}
#award{
    -webkit-text-fill-color: transparent;
    background:  linear-gradient(20deg, cyan , magenta);
    -webkit-background-clip: text;
}
.ani{
    animation: side 5s ;
}
#ani{
    animation: side 5s ;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}
#contact{
    background: linear-gradient(20deg, cyan , magenta);
    color:white;
    margin-top: 5px;
}