body {
margin-top: 90px;
background: rgb(14, 8, 18);
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

ul {
list-style-type: none;
margin: 0;
padding: 10px;
position: fixed;
top: 10px;
left: 20%;


}

li a {
    text-align: center;
    border: 2.5px solid rgba(0, 0, 0, 0.557);
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
display: block;
    color: rgba(255, 255, 255, 0.772);
text-decoration: none;
padding: 10px 40px 10px 40px;
border-radius: 50px;
background-color: #0000008d;
margin: 10px 45px 0px 45px;

}

li a:hover {
    background-color: rgba(0, 0, 0, 0.406);
    color: white;
}

li a.active {
    background-color: rgba(0, 0, 0, 0.632);
    border-color: rgba(128, 0, 128, 0.712);
    color: rgba(255, 255, 255, 0.63);
    box-shadow: 1px 2px 19px 1px rgba(200, 111, 200, 0.368);
}

ul li {
    float: left;
}



.intro {
    margin-top: 5cm;
    margin-left: 8cm;
    position: relative;
}

a.inb1 {

text-decoration: none;
background-color: rgba(86, 15, 128, 0.733);
border: 2px solid purple;
padding: 10px 25px 10px 25px;
border-radius: 40px;
color: white;
 font-weight: bold;
 

}

a.inb1:hover {
    background-color: rgba(0, 0, 0, 0.313);
    color: rgb(255, 251, 251);
   
}

a.inb2 {

text-decoration: none;
background-color: rgba(86, 15, 128, 0.733);
border: 2px solid purple;
padding: 10px 25px 10px 25px;
border-radius: 40px;
color: white;
 font-weight: bold;
 margin-left: 0.5cm;

}

a.inb2:hover {
    background-color: rgba(0, 0, 0, 0.313);
    color: rgb(255, 251, 251);
  
   
}

.bspace {
    width: 50%;
    display: inline;
}

.img {
 background-color: rgba(128, 0, 128, 0.178);
border: 2px solid white;
width: 8cm;
border-radius: 50%;
position: absolute;
left: 55%;
top: 0;
  overflow: hidden;   
  border: 3px solid rgba(208, 95, 245, 0.463); /* your circle border */
height: 8cm;
box-shadow: 0px 0px 10px 10px rgba(168, 47, 168, 0.349);
}

.img img{
    object-fit: cover; 
    height: 100%;
    width: 100%;
} 


.info {
    margin-top: 2cm;
border-radius: 20px;
   background-color: rgba(255, 255, 255, 0.055);
   width: 25.7cm;
   height: 6cm;
    color: white;
 margin-left: 8cm;  
 border: 2px solid rgba(255, 255, 255, 0.062); 
 position: relative;
}


.abt {
    position: absolute;
left: 1cm;
}

.line {
    position: absolute;
    width: 1px;
    height: 5cm;
    background-color: rgba(255, 255, 255, 0.24);
     top: 0.55cm;
     left: 8cm;
}

.skill {
    position: absolute;
left: 9cm;
top: 0cm;

}


.bar {
    width: 5cm;
    height: 0.15cm;
    border-radius: 0.3cm;
    background-color: rgba(65, 3, 64, 0.6);
}

.fill {
     width: 4cm;
    height: 0.15cm;
    border-radius: 0.3cm;
    background-color: rgba(255, 0, 251, 0.694);

}
.fill1 {
     width: 3cm;
    height: 0.15cm;
    border-radius: 0.3cm;
    background-color: rgba(255, 0, 251, 0.694);

}
.fill2 {
     width: 0.4cm;
    height: 0.15cm;
    border-radius: 0.3cm;
    background-color: rgba(255, 0, 251, 0.694);

}

.html {
    margin-top: 0.5cm;

}

.line1 {
    position: absolute;
    width: 1px;
    height: 5cm;
    background-color: rgba(255, 255, 255, 0.24);
     top: 0.55cm;
     left: 6cm;
}

.imge {
    position:absolute;
    top: 1.5cm;
    right: 1cm;
}

.imge img{
 
   opacity: 0.5;
    height: 5cm;
    width: 8cm;
}