body{
    background-image: url("Assets/png/bg01.jpg");
    background-size: 100%;
}
.title{
    position:absolute;
    font-size: 9vh;
    font-family: 'Cherish', cursive;
    font-weight: bold;
    padding-left: 10vw;
    color:rgb(255, 255, 255);
    text-shadow: 0 0 30px rgb(0, 0, 0);
}
.mypic{
    position: absolute;
    left: 80vw;
    border: 5px solid;
    border-radius: 50%;
    border-color:rgb(248, 231, 198);
    width: 25vh;
    height: 25vh;
    z-index: 0;
}

.cntr{
    position: absolute;
    top:32vh;
    left:37vw;
    width:25vw;
    height:25vw;
    border-width: 1px solid;
    border-color: transparent;
    border-radius: 50%;
    z-index: 1;
}

.container{
    position: absolute;
    top:32vh;
    left:37vw;
    width:25vw;
    height:25vw;
    border-width: 1px solid;
    border-radius: 50%;
    z-index: -1;
}

.gitline{
    position: absolute;
    top:0vh;
    left:12.5vw;
    width: 1px;
    height: 12.5vw;
    transform-origin: bottom;
    animation: animategit 20s linear infinite;
}

.github{
    position: absolute;
    top:-10.5vh;
    left:-2.5vw;
    width:5vw;
    height:5vw;
    border-width: 3.5px;
    border-style: solid;
    border-color:whitesmoke;
    border-radius: 50%;
    box-shadow: 0px 0px 15px 5.5px rgba(225, 255, 255, 150);
}

.instaline{
    position: absolute;
    top:0vh;
    left:12.5vw;
    width: 1px;
    height: 12.5vw;
    transform-origin: bottom;
    transform: rotate(-144deg);
    animation: animateinsta 20s linear infinite;
}

.instagram{
    position: absolute;
    top:-10.5vh;
    left:-2.5vw;
    width:5vw;
    height:5vw;
    border-width: 3.5px;
    border-style: solid;
    border-color:rgb(155, 50, 255);
    border-radius: 50%;
    box-shadow: 0px 0px 15px 5.5px rgba(155, 50, 230, 150);
}

.lnkline{
    position: absolute;
    top:0vh;
    left:12.5vw;
    width: 1px;
    height: 12.5vw;
    transform-origin: bottom;
    transform: rotate(144deg);
    animation: animatelnk 20s linear infinite;
}

.linkedin{
    position: absolute;
    top:-10.5vh;
    left:-2.5vw;
    width:5vw;
    height:5vw;
    border-width: 3.5px;
    border-style: solid;
    border-color:rgb(0, 120, 255);
    border-radius: 50%;
    box-shadow: 0px 0px 15px 5.5px rgba(0, 115, 235, 150);
}

.cfline{
    position: absolute;
    top:0vh;
    left:12.5vw;
    width: 1px;
    height: 12.5vw;
    transform-origin: bottom;
    transform: rotate(-72deg);
    animation: animatecf 20s linear infinite;
}

.codechef{
    position: absolute;
    top:-10.5vh;
    left:-2.5vw;
    width:5vw;
    height:5vw;
    border-width: 3.5px;
    border-style: solid;
    border-color: rgb(255, 255, 255);
    border-radius: 50%;
    box-shadow: 0px 0px 15px 5.5px rgba(170, 235, 255, 150);
}

.gmline{
    position: absolute;
    top:0vh;
    left:12.5vw;
    width: 1px;
    height: 12.5vw;
    transform-origin: bottom;
    transform: rotate(72deg);
    animation: animategm 20s linear infinite;
}

.gmail{
    position: absolute;
    top:-10.5vh;
    left:-2.5vw;
    width:5vw;
    height:5vw;
    border-width: 3.5px;
    border-style: solid;
    border-color: rgb(255, 0, 0);
    border-radius: 50%;
    box-shadow: 0px 0px 15px 5.5px rgba(225, 0, 0, 150);
}

@keyframes animategit{
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

@keyframes animateinsta{
    0%{
        transform:rotate(-144deg);
    }
    100%{
        transform: rotate(216deg);
    }
}

@keyframes animatelnk{
    0%{
        transform:rotate(144deg);
    }
    100%{
        transform: rotate(504deg);
    }
}

@keyframes animatecf{
    0%{
        transform:rotate(-72deg);
    }
    100%{
        transform: rotate(288deg);
    }
}

@keyframes animategm{
    0%{
        transform:rotate(72deg);
    }
    100%{
        transform: rotate(432deg);
    }
}