2 crditem crd scrollboxes

---first scrollbox---

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">

<style>

#scroll1 {
background-image: radial-gradient(circle, rgb(146,85,134) 0%, rgba(255, 255, 255,1) 99%);
background-position: 0% 0%;
background-repeat: repeat;
background-size: cover;
border-radius:2%;
padding-left:6px;
padding-right:5px;
padding-top: 6px;
padding-bottom: 6px;
border: 1px solid #695595;
width: 12.8em;
height: 10em;
overflow-y: auto;
font-family: 'JetBrains Mono';
font-size: .7em;
text-align: left;
line-height: 14px;
}

</style>

<div id="scroll1">
about info info info info info
<br></br>
find me <a href="URL">Title</a> <a href="URL">Titleg</a> <a href="URL">Title</a> <a href="URL">Title</a> </div>

---second scrollbox---

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">

<style>

#scroll2 {
background: radial-gradient(circle, #ffffff 0%, #9F8BB0 76%);
background-position: 0% 0%;
background-repeat: repeat;
background-size: cover;
border-radius:2%;
padding-left:6px;
padding-right:6px;
padding-top: 6px;
padding-bottom: 6px;
border: 1px solid #695595;
width: 12.8em;
height: 10em;
overflow-y: auto;
font-family: 'JetBrains Mono';
font-size: .7em;
text-align: left;
line-height: 14px;
}

</style>

<div id="scroll2">
byf info info info
<br></br>
dni info info info
</div>

---third scrollbox---

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">

<style>

#scroll3 {
background: radial-gradient(circle, #ffffff 0%, #9F8BB0 100%);
background-position: 0% 0%;
background-repeat: repeat;
background-size: cover;
border-radius:2%;
padding: 6px;
border: 1px solid #695595;
width: 9em;
height: 14em;
overflow-y: auto;
font-family: 'JetBrains Mono';
font-size: .7em;
text-align: left;
line-height: 14px;
position: absolute;
left: 22em;
top: -2em;
}

</style>

<div id="scroll3">
notes info info info info info
</div>

---fourth scrollbox---

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">

<style>

#scroll4 {
background-image: radial-gradient(circle, rgb(146,85,134) 0%, rgba(255, 255, 255,1) 99%);
background-position: 0% 0%;
background-repeat: repeat;
background-size: cover;
border-radius:2%;
padding-left:6px;
padding-right:6px;
padding-top: 6px;
padding-bottom: 6px;
border: 1px solid #695595;
width: 9em;
height: 10.5em;
overflow-y: auto;
font-family: 'JetBrains Mono';
font-size: .7em;
text-align: left;
line-height: 14px;
position: absolute;
left: 22em;
top: 12.5em;
}

</style>

<div id="scroll4">
kpop info info info
<br></br>
my interests info info info
</div>