<div class="system-container">
   <div class="system-title">
      <h2>CYDERVERSE</h2>
      <hr>
      <p>welcome to beck & lily's ocslop universe where we made dollar tree versions of rpf ships</p>
    </div>
   <hr>
   <div class="alter-pill" id="ryder">
       <div class="alter-block"> 
          <img id="alter-icon" src="https://file.garden/ZuQf8MRKYTjyuCx8/slop2.jpg">
          <p><h2>ryder</h2>he/him</p>
       </div>
       <div class="alter-block"> 
          <div id="desc-scroll">
              <p>this guy got hit and became an asshole</p>
          </div>
          <div style="text-align: center;">
            <!-- <a href="your link">link</a> ． <a href="your link">link</a> ． <a href="your link">link</a> --!>
         </div>
       </div>
   </div>
   <div class="alter-pill" id="clyde">
       <div class="alter-block"> 
          <img id="alter-icon" src="https://file.garden/ZuQf8MRKYTjyuCx8/slop1.jpg">
          <p><h2>clyde</h2>he/they</p>
       </div>
       <div class="alter-block"> 
          <div id="desc-scroll">
              <p>this guy really likes the guy that got hit but hes most likely the one that hit him</p>
          </div>
          <div style="text-align: center;">
            <a href="https://characterhub.com/character/clyde-buckley">c-hub</a> <!--． <a href="your link">link</a> ． <a href="your link">link</a> --!>
         </div>
       </div>
   </div>
   <hr>
   <div><p>lore is updating</p></div>
</div>

<style>
hr {
width: 15em;
margin-bottom: 10px;
}

.system-title {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px;
width: 15em;
}

.system-title p {
text-align: center;
line-height: 1em;
padding-top: 10px;
}

.alter-pill h2 {
padding-bottom: 0px;
}

/* Use this as the main container pls thanx */
.system-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

#desc-scroll {
width: 8em;
height: 9em;
border: var(--color-border) 1px solid;
border-radius: 3px;
padding: 5px;
overflow-y: scroll;
background: rgb(255 255 255 / 60%);
}

#desc-scroll::-webkit-scrollbar {
width: 0px;
}

.alter-block {
display: flex;
flex-direction: column;
justify-content: space-around;
}

.alter-pill {
display: flex;
justify-content: space-between;
border: var(--color-border) 1px solid;
margin-bottom: 10px;
border-radius: 5px;
width: 15em;
height: 10em;
padding: 10px;
}

.alter-pill p {
line-height: 15px;
}

#alter-icon {
width: 5em;
height: 5em;
border-radius: 10px
}

.system-title hr {
width: 5em;
margin: 0px;
}

.container-1 {
border: none;
display: flex;
align-items: center;
justify-content: center;
}

#clyde {
background: url("https://file.garden/ZuQf8MRKYTjyuCx8/bg2.png");
background-size: contain;
color: #292876;
}

#clyde a, a:visited {
color: #083078;;
}

#clyde p {
color: #1a1a1f;
}

#ryder {
background: url("https://file.garden/ZuQf8MRKYTjyuCx8/bg.jpg");
background-size: contain;
color: #651414;
}

#ryder a, a:visited {
color: #6683b6;
}

#ryder p {
color: #1a1a1f;
}
</style>