/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: #130f42;
  color: white;
  font-family: ubuntu;
}
<style>
    
.parent{
    position: relative;
    top: 0;
    left: 0;
}

.apollo-image1{
    width: 120px;
    border-radius: 100%;
    border-width: 2px;
    border-style: solid;
    border-color: #fff;
    position: relative;
    top:100px;
    left: 40px; 
    z-index: 3;
}


.space-background{
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 20px;
    position:absolute;
    top: 0;
    left: 0;
    right:0;
    bottom:0;
    Border: 1px solid #000000;
    z-index: 1;
    margin-bottom: 0;
    padding-bottom: 0;

}
.profile-box{
    width: 500px;
    height: 200px;
    background-color: #251e6d;
    border-radius: 50px;
    position: absolute;
    top: 70px;
    left:35px;
    z-index: 2;
}
.name{
    color: #fff;
    font-family: ubuntu;
    padding-top: 15px;
    padding-left: 200px;
    padding-bottom: 0px;
    margin-bottom: 0;
    font-size: 30px;
}
.extra-info-bio{
    padding-left: 200px;
    color:#fff;
    font-family: ubuntu;
    font-size: 15px;
    opacity: 70%;
}
.pan-flag{
    padding-top: 10px;
    width: 50px;
    padding-left: 200px;
}
.demi-flag{
    padding-top: 10px;
    
}

.bio-background{
    background-color: #251e6d;
    position: relative;
    margin-top: 200px;
    margin-left: 30px;
    border-style: solid;
    border-width: 2px;
    border-color: #6754d0;
    border-radius: 10px;
    width: 70vw;
}
.bio-header{
    font-family: ubuntu;
    padding: 30px;
    padding-bottom: 0;
    margin-bottom: 0;
    font-size: 40px;
    color: #fff;
    margin-top: 0;
    text-align: center;
}
.bio-content{
    font-family: ubuntu;
    color:#fff;
    padding: 20px;
    padding-top: 0;
    padding-left: 50px;
}
.scrollmenu {
    position: absolute;
    right: 30px;
    width: 20vw;
    overflow-y: scroll;
    top: 333px;
    height:300px;
    border-style: solid;
    border-width: 2px;
    border-color: #6754d0;
    background-color: #251e6d;
    border-radius: 10px;
}
.intrests-box{
    position: relative;
    background-color: #251e6d ;
    top: 27px;
    margin-left: 30px;
    width: 30vw;
    height: 250px;
    border-style: solid;
    border-color: #6754d0;
    border-width: 2px;
    border-radius: 10px;
    font-family: ubuntu;  
    color: #fff;  
    font-size: 15px;
    padding: 30px;
}
.intrests-header{
    background-color:#251e6d;
    font-family: ubuntu;
    color: #fff;
    padding-top: 0;
    margin-top: 0;
    right:0;
    text-align: center;
}
.friends-box{
    background-color: #251e6d;
    color: #fff;
    border-style: solid;
    border-width: 2px;
    border-color: #6754d0;
    border-radius: 10px;
    font-family: ubuntu;
    font-size: 15px;
    position: absolute;
    left: 40vw;
    top: 580px;
    padding:30px;
    width: 27vw;
}
.friend-name{
    background-color: #251e6d;
    border-width: 0;
    right: 0;
    
}
.friend-img{
    border-radius: 100%;
    width: 75px;
    height: 75px;
    object-fit: cover;
    border-width: 2px;
    border-style:solid;
    border-color: #fff;
    margin: 10px;

}
.th-links-box{
 border-radius: 10px;
 border-style: solid;
 border-color: #6754d0;
 background-color:#251e6d;
 border-width: 2px;
 right:30px;
 position: absolute;
 width: 275px;
 top:675px;
 
}

</style>