nine iron profile

<style>
@import url('https://fonts.googleapis.com/css2?family=Changa:wght@600&display=swap');

::-webkit-scrollbar {
   width: 0px
 }
 ::-webkit-scrollbar-thumb {
   border-width: 0px 0px 0px 0px
 }
 ::-webkit-scrollbar-track {
   border-width: 0
 }
 ::-webkit-scrollbar {
   height: 0px;
   overflow: visible;
   width: 0px;
 }
 ::-webkit-scrollbar-button {
   height: 0;
   width: 0;
 }
 ::-webkit-scrollbar-track {
   background-clip: padding-box;
   border: solid transparent;
   border-width: 0 0 0 0px;
 }
 ::-webkit-scrollbar-track:horizontal {
   border-width: 0px 0 0
 }

body {
 background: url('https://www.creativefabrica.com/wp-content/uploads/2020/03/14/A-city-background-with-many-buildings-Graphics-3653585-1.jpg');
 background-position: center;
 background-size:100%;
 background-repeat: no-repeat;
 cursor: url('https://i.imgur.com/Y0IkpTz.png'), default;}
.lin1 {position: absolute; top: 50px; height: 10px; width: 10px; background: transparent; border-radius: 50%; -webkit-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
.lin1:hover { background:transparent;}

.lin2 {position: absolute; top: 50px; height: 10px; width: 10px; background: transparent; border-radius: 50%; -webkit-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
.lin2:hover { background:transparent;}

.lin3 {position: absolute; top: 50px; height: 10px; width: 10px; background: transparent; border-radius: 50%; -webkit-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
.lin3:hover {background:transparent;}

.lin4 {position: absolute; top: 50px; height: 10px; width: 10px; background: transparent; border-radius: 50%; -webkit-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
.lin4:hover {background:transparent;}

#li1 {left:5%; z-index: 12; top:40%;}
#li2 {left:5%; z-index: 12; top:45%;}
#li3 {leftt:5%; z-index: 12; top:50%;}
#li4 {leftt:5%; z-index: 12; top:55%;}

.container {
position: absolute;
margin-top:10%;
margin-left:18%;
width:450px;
height: 386px;
padding: 10px 12px 11px 10px;
background-size:cover;
background-image: url();
background-repeat:no-repeat;
outline: solid 6px #000;
}
#nineiron {
position: absolute;
top: 17%;
right:30%;
width: 40%;
height: 65%;
background-image: url('https://i.imgur.com/vwzfWAP.png');
background-repeat: no-repeat;
background-position: fixed;
background-size: 43%;
z-index: 999;

}
#name {
position: absolute;
top:86.5%;
left:66%;
width: 40%;
height:25%;
background-image: url('https://i.imgur.com/oALr0yM.png');
background-repeat: no-repeat;
background-position: fixed;
background-size: 62.5%;
z-index: 999;
-webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
.thecontent {
background-color:transparent;
border: none;
color: #ffffff;
font-size: 15px;
font-family:  'Changa', sans-serif;
text-transform: uppercase;
height: 130px;
left:17%;
opacity:0;
overflow: auto;
padding: 5px;
position: fixed;
text-align: left;
top:30%;
width:270px;
height:260px;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}

.thecontent:target {
background-color: transparent;
border: none;
left: 20%;
opacity: 1;
overflow: auto;
padding: 5px;
position: fixed;
top:25%;
width:270px;
height:255px;
z-index: 40;
}


</style>
<a href="#01"><div id="li1" class="lin1"><img src="https://i.imgur.com/yVjdDJG.png" width="60"></div></a>
<a href="#02"><div id="li2" class="lin2"><img src="https://i.imgur.com/yVjdDJG.png" width="60"></div></a>
<a href="#03"><div id="li3" class="lin3"><img src="https://i.imgur.com/yVjdDJG.png" width="60"></div></a>
<a href="#reset"><div id="li4" class="lin4"><img src="https://i.imgur.com/yVjdDJG.png" width="60"></div></a>

<div id="nineiron"></div>

<div class="container">
<div id="name"></div>
<div id="01" class="thecontent">
<b>Name:</b> <font style="float:right">---</font><br>
<b>Nickname(s):</b> <font style="float:right">---</font><br>
<b>Age:</b> <font style="float:right">---</font><br>
<b>Race:</b> <font style="float:right">---</font><br>
<b>Heritage:</b><font style="Float:right">---</font><br>
<b>Pronouns:</b><font style="Float:right">---</font><br>
<b>Birthday:</b><font style="float:right">---</font><br>
<b>Eye color:</b><font style="float:right">---</font><br>
<b>Hair color:</b><font style="float:right">---</font><br>
<b>Height:</b><font style="float:right">---</font><br>
<b>Weight:</b><font style="float:right">---</font><br>
<b>Occupation:</b><font style="float:right">---</font><br>
<b>Orientation:</b><font style="float:right">---</font><br>
</div>
<div id="02" class="thecontent">
test test test test test test test
</div>
<div id="03" class="thecontent">
Tests Tests Tests
</div>