style.css

html, body{
    height: 100%;
    font-family:'Heebo', sans-serif;;
}
img{
    height: 500px;
    width: 500px;
    border-radius: 250px;
    box-shadow: rgba(0, 0, 0, 0.2)10px 10px 10px 10px;
    margin: 30px;
}
body{
    text-align: right;
    background-image: url("./backimg.jpg");
}
header{
    background-color:  rgba(0, 0, 0, 0.2);
    width: 100%;
    height: 17%;
    text-align: center;
    padding: 3px;
    margin: 0px 0 40px 0;
    
}
header{
           
        position: relative;
        animation: ani;
        animation-duration: 3s;
        animation-timing-function:linear;
        animation-iteration-count: 1;

}
@keyframes ani{
    from{
        color: rgba(0, 0, 0, 0.2);
        width: 30%;
        height: 7%;

    }
    to{
        width: 100%;
        height: 17%;
        color: black;
    }
}

h3, h4{
    background-color:  rgba(0, 0, 0, 0.2);
}

#contact{
    font-size: 20px;
    text-align: left;
    margin: 50px 0px 10px 0px;
    float: left;
}

/* img{
        
    position: relative;
    animation: im;
    animation-duration: 2s;
    animation-timing-function:linear;
    animation-iteration-count: 1;
}
@keyframes im{
from{
    right: 10px;
    width: 200px;
    height: 200px;

}
to{
    left: 200px;
    width: 500px;
    height: 500px;
}
} */