<style>
* {
font-family: "Verdana";
}

:root {
    --color-background-end: #ffffff;
    --color-border: #ffffff;
    --color-icon: #000000;
  --custom-image: url('https://i.postimg.cc/x8yXHSyS/iseeyou.png');
  --custom-text: "moved dis from fluffle! but example of a picture changing per them! dont mind the image names, i had a weirdo copying me 😭";
}

:root[data-theme="dark"] {
    --color-background-end: #000000;
    --color-border: #000000;
    --color-icon: #ffffff;
 --custom-image: url('https://i.postimg.cc/G3k86k02/youreastalker.png');
  --custom-text: "moved dis from fluffle! but example of a picture changing per them! dont mind the image names, i had a weirdo copying me 😭";
}

.container-1 {
max-width: 355px;
}

#example_1 {
  height: 180px;
  width: 180px;
  background-image: var(--custom-image);
  background-size: 100%;
  image-rendering: pixelated;
  background-repeat: no-repeat;
  background-position: center;
position: relative;
}

#example_1::before {
  content: var(--custom-text);
  min-width: 100px;
max-height: 180px;
  font-size: .9rem;
left: 110%;
  position: absolute;
display: block;
overflow-y: scroll;
}

hr {
 border: 1px dashed;
border-color: var(--color-icon);
}

</style>

<div id="example_1"></div>
<br>
***
***
<br>
names: &nbsp; name1 &nbsp; name2 &nbsp; name3 &nbsp; name4 &nbsp; name5 &nbsp; name6 &nbsp; name7
<br> <br>
**ids**: &nbsp; id1 &nbsp; id2 &nbsp; id3 &nbsp; id4 &nbsp; id5 &nbsp; id6 &nbsp; id7
<br> <br>
illness: &nbsp; ill1 &nbsp; ill2 &nbsp; ill3 &nbsp; ill4 &nbsp; ill5 &nbsp; ill6 &nbsp; ill7
<br> <br>
**interests**: int1 &nbsp; int2 &nbsp; int3 &nbsp; int4 &nbsp; int5 &nbsp; int6 &nbsp; int7
<br> <br>
high kins: kin1 &nbsp; kin2 &nbsp; kin3 &nbsp; kin4 &nbsp; kin5 &nbsp; kin6 &nbsp; kin7
<br> <br>
**notes**: idk yet