body{
    margin:0;
    padding:0;
}
#intro{
    max-width:100%;
    height:948px;
    /* background-image:url("background for website.jpg"); */
    background-color:#191919;
    background-size:cover;
    margin:0px;
    overflow:hidden;
}

#first{
    width:300px;
    height:300px;
    background-color:#ff006a;
    z-index:1;
    margin-top:180px;
    margin-left:450px;
    border-radius:20px;
    position:relative;
   
}

#second{
    width:300px;
    height:300px;
    background-color:#fe9900;
    z-index:0;
    margin-top:-380px;
    margin-left:720px;
    border-radius:20px;
    position:relative;
}

#third{
    width:320px;
    height:320px;
    background-color:#981FAC;
    z-index:3;
    margin-top:-50px;
    margin-left:550px;
    border-radius:20px;
    position:relative;
}


#my-image{
    width:200px;
    height:200px;
    border-radius:50%;
    margin-left:620px;
    position:relative;
    bottom:400px;
    z-index:5;
}
#name{
    font-size:50px;
    color:white;
    font-family:Dosis;
    text-align:center;
    padding-left:40px;
    margin-top:-250px;
    text-transform: uppercase;
    animation:fade-in ease-in 4s;
    position:relative;
    z-index:6;
}

@keyframes fade-in{
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}
#background-gradient{
    position:relative;
    bottom:320px;
    z-index:4;
    width:220px;
    height:220px;
    border-radius:40px;
    margin-top:-300px;
    margin-left:610px;
    background-color:white;
    opacity:0.4;
    /*
    background-image: linear-gradient(315deg, #fce043 0%, #fb7ba2 74%); */
    /* background-image:url("black gradient.jpg"); */
}
#animation-hey{
    height:100px;
    width:100px;
    border-radius:50%;
    background-color:#ff006a;
    opacity:0.9;
    text-align:center;
    color:white;
    font-size:32px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    margin-top:-10px;
    position:relative;
    animation:moveup 10s infinite;
}

@keyframes moveup{
    from{
        transform:scale(1);
        bottom:0px;}
    to{
        transform:scale(1.2);
        bottom:600px;}
}

#center-text{
    padding-top:30px;
}
#animation-u{
    height:100px;
    width:100px;
    border-radius:50%;
    background-color:#fe9900;
    opacity:0.9;
    text-align:center;
    color:white;
    font-size:32px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    position:absolute;
    top:0px;
    right:10px;
    animation:movedown 10s infinite;
}
@keyframes movedown{
    from{
        transform: scale(1);
        top:0px;}
    to{
        transform: scale(1.2);
        top:600px;}
}
#animation-u:hover{
    background-color:white;
    color:#fe9900;
}
#animation-hey:hover{ 
    background-color:white;
    color:#ff006a;
}

#about{
    background-color:#9400d3;
    width:100%;
    height:550px;
    margin-top:-40px;
}
.about-heading{
    font-size:40px;
    color:white;
    font-family:Dosis;
    padding-left:50px;
    padding-top:50px;
    text-decoration-line:underline;
    text-decoration-style:dotted;
    text-decoration-thickness:9px;
}

#about-attracter{
    font-size:150px;
    padding-left:150px;
    margin-top:-5px;
    font-family:Dosis;
    font-weight:700;
}

#Identity{
    margin-left:1150px;
    margin-top:-400px;
    font-size:40px;
    font-family:Dosis, Helvetica, sans-serif;
    font-weight:bold;
    color:white;
    animation:slow-id 5s 1;
    animation-delay:5s; 
}

@keyframes slow-id{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

#contact{
    background-color:#191919;
    width:100%;
    height:850px;
    margin-top:-40px;
}

#contact-heading{
    padding-left:1200px;
}
#your-image{
    width:400px;
    height:auto;
    margin-left:900px;
    margin-top:100px;
}
i{
    color:white;
    font-size:40px;
}
span{
    color:white;
    font-size:30px;
    font-family:Arial;
    padding-left:200px;
}
a{
    color:white;
    text-decoration:none;
}