Untitled

[dohtml]

<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=Neucha&family=Yuji+Boku&display=swap" rel="stylesheet">
<div class="haruka-outer">
<img class="overlay" src="http://www.animationsoftware7.com/img/agifs/leaf_fall_3.gif">
<div class="haruka-hello">
こんにちは。
</div>
<div class="haruka-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Feugiat in ante metus dictum at tempor commodo ullamcorper. Amet porttitor eget dolor morbi non arcu risus quis. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra orci. Erat velit scelerisque in dictum. Pharetra vel turpis nunc eget lorem dolor sed. Vel pharetra vel turpis nunc eget. Tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Suspendisse sed nisi lacus sed viverra tellus in hac. Sociis natoque penatibus et magnis. Elementum tempus egestas sed sed risus pretium quam vulputate dignissim. Commodo nulla facilisi nullam vehicula ipsum.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Feugiat in ante metus dictum at tempor commodo ullamcorper. Amet porttitor eget dolor morbi non arcu risus quis. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra orci. Erat velit scelerisque in dictum. Pharetra vel turpis nunc eget lorem dolor sed. Vel pharetra vel turpis nunc eget. Tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Suspendisse sed nisi lacus sed viverra tellus in hac. Sociis natoque penatibus et magnis. Elementum tempus egestas sed sed risus pretium quam vulputate dignissim. Commodo nulla facilisi nullam vehicula ipsum.
</div>
<div class="haruka-bye">
秋元 楓香
</div>
</div>
<style type="text/css">
.haruka-hello {
width: 352px;
text-align: left;
font-family: 'Yuji Boku', serif;
font-size: 20px;
color: #3F2E24;
margin-left:auto;
margin-right:auto;
top: 10px;
}
.haruka-body {
width: 340px;
text-align: left;
font-family: 'Neucha', cursive;
font-size: 12px;
color: #3F2E24;
margin-left:auto;
margin-right:auto;
margin-top: 10px;
  padding: 10px 10px 10px 10px;
}
.haruka-bye {
width: 352px;
text-align: right;
font-family: 'Yuji Boku', serif;
font-size: 20px;
color: #3F2E24;
margin-left:auto;
margin-right:auto;
margin-top: 10px;
position: relative;
bottom: 10px;
}

.haruka-outer {
border: 3px solid #865350;
background-color: #C9AB93;
width: 352px;
margin: 10px auto 0px;
position: relative;
justify-content: space-between;
  height: auto;
}
.overlay {
position: absolute;
object-fit: cover;
width: 100%;
height: 100%;
}
</style>

[/dohtml]