[html]<stye>.cell {
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 20px;
margin: 0 auto;
max-width: 350px;
background: var(--bg3);
border-radius: 10px;
padding: 20px 0px 20px 20px;
box-shadow: 1px 1px 1px var(--o1);
}
.contact {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
justify-content: space-between;
}
.cell .cimg {
width: 60px;
height: 60px;
border-radius: 50%;
padding: 10px;
background: var(--mainborder);
place-self: center;
box-shadow: 1px 1px 1px var(--o1);
}
.cell .cimg img {
border-radius: 50%;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
object-fit: cover;
filter: grayscale(100%) contrast(120%) brightness(120%);
}
.cell .cdet {
display: flex;
flex-direction: column;
gap: 5px;
}
.cell .cdet contact {
place-self: end;
border-radius: 10px 0px 0px 10px;
padding: 10px;
font-family: stay funky;
font-size: 2rem;
height: fit-content;
width: fit-content;
background: var(--mainborder);
text-shadow: 1px 1px 1px var(--o1);
box-shadow: -1px 1px 1px var(--o1);
}
.cell .cdet cmsg {
place-self: end;
width: fit-content;
color: var(--body);
font-family: monotalic;
font-size: 0.7rem;
border-radius: 10px 0px 0px 10px;
padding: 10px;
background: var(--mainborder);
box-shadow: -1px 1px 1px var(--o1);
}
.cellcont {
background: var(--mainborder);
border-radius: 10px;
display: flex;
flex-direction: column;
place-items: end;
margin-right: 20px;
max-height: 440px;
box-shadow: 1px 1px 1px var(--o1);
}
.cellcont2 {
place-items: end;
padding: 5px 10px;
max-height: 430px;
overflow-y: scroll;
}
.cellcont2::-webkit-scrollbar, .callcont2::-webkit-scrollbar {
display: none;
}
.post1 .cellcont2 {
place-items: start;
}
.callcont {
background: var(--mainborder);
border-radius: 10px;
display: flex;
flex-direction: column;
place-items: end;
margin-right: 20px;
max-height: 440px;
box-shadow: 1px 1px 1px var(--o1);
}
.callcont2 {
font-size: 0.7rem;
place-items: end;
padding: 30px;
max-height: 420px;
overflow-y: scroll;
}
.cellcont p {
background: var(--mainborder);
border: 1px solid var(--borderalt);
border-radius: 10px;
padding: 10px;
text-align: right;
font-size: 0.7rem;
width: fit-content;
box-shadow: 1px 1px 1px var(--o1);
}
.cellcont p img {
max-width: 250px;
height: auto;
border-radius: 5px;
filter: grayscale(100%) contrast(120%) brightness(120%);
}
.contentwarn {
margin: 0 auto;
max-width: 350px;
background: var(--bg3);
border-radius: 5px;
padding: 10px;
box-shadow: 1px 1px 1px var(--o1);
}
.contentwarninner {
background: var(--mainborder);
border-radius: 5px;
padding: 10px;
box-shadow: 1px 1px 1px var(--o1);
}
.note, .letter {
margin: 0 auto;
max-width: 400px;
background: var(--bg3);
border-radius: 10px;
padding: 40px;
box-shadow: 1px 1px 1px var(--o1);
}
.notecont, .lettercont {
background: var(--mainborder);
border-radius: 5px;
padding: 20px;
box-shadow: 1px 1px 1px var(--o1);
}
.lettercont .to {
display: flex;
place-self: start;
margin-bottom: 10px;
font-family: santa catalina;
font-size: 2rem;
}
.notecont .bottom, .lettercont .from {
display: flex;
place-self: end;
margin-top: 10px;
font-family: santa catalina;
font-size: 2rem;
}</style>
<div class="cell">
<div class="contact">
<div class="cimg"><img src="URL"></div>
<div class="cdet"><contact>contact name</contact>
<cmsg><i class="ph ph-arrow-left"></i> outgoing call</cmsg></div>
</div>
<div class="callcont">
<div class="callcont2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget quam non ante suscipit vulputate tempor vel orci. <b>Nullam at hendrerit augue, vitae feugiat turpis.</b> Aliquam ac dictum velit. In in quam lorem. Curabitur in maximus orci. Donec dictum nulla magna, id fringilla augue semper vitae. Nullam rhoncus nec ante in imperdiet. Integer nibh tortor, commodo quis leo a, dignissim consequat eros. Etiam placerat urna non dolor rhoncus egestas. <i>Pellentesque ac fringilla risus.</i> Sed eu risus mattis, varius est at, mattis nibh.
<p>Phasellus nisl erat, sagittis a sapien vel, interdum tristique urna. Sed placerat finibus lectus id imperdiet. Pellentesque a enim arcu. Phasellus vitae nunc aliquet, pharetra augue eu, aliquam nisi. Nullam scelerisque dignissim mattis. Aenean pretium elementum ipsum. Duis scelerisque, mauris a posuere interdum, est ligula aliquam est, ac tincidunt eros nisl et velit. Cras vitae velit justo. <b>Praesent vestibulum ante in pharetra ultrices.</b> Donec et vulputate neque. Nulla et consequat massa. Ut non neque ut diam ultrices sagittis. Fusce aliquet at urna in facilisis.
</div>
</div>
</div>[/html]