lovespace update log 2

<!-- CREDIT FIOREFAE. recommended page size on mobile is "9" and it'll adjust on whatever desktop size you use. -->

<style>
#updates {
position: absolute;
top: 1.5rem;
left: 1.5rem;
z-index: 9;
}

.spring {
position: absolute;
top: -1.2rem;
height: 1.56rem;
width: 100%;
z-index: 2;
background: url(https://fiorefae.neocities.org/images/lovespring.png) center / auto 1.54rem repeat-x;
}

.updates-container {
width: 20rem;
border-radius: 0.6rem;
padding: 0.8rem;
border: 0.09rem solid #4a3036;
background-image: linear-gradient(#ffeef1, #edecf3);
box-shadow: 0 0 0 0.125rem rgba(0, 0, 0, 0.125), inset 0 0 0.4rem 0.01rem #fff;
filter: drop-shadow(0.5rem 0.5rem 0 #edb5c2);
}

.updates-inner {
font: 0.95rem sans-serif;
color: #4a3036;
line-height: 1.55;
padding: .5rem;
overflow: hidden;
border-radius: 0.45rem;
background: linear-gradient(to bottom, white 1.4rem, rgba(206, 211, 229, 0.5) 0.09rem);
background-size: 100% 1.49rem;
}

.updates-title {
font: 1.65rem sans-serif;
font-weight: bold;
color: #4a3036;
text-align: center;
height: 2.3rem;
text-shadow: 0 0 0.46rem #ffdde2;
margin-top: .18rem;
}

.updates-scroll {
overflow: auto;
height: 13.31rem;
padding-top: 0.18rem;
}

.updates-stats {
margin-top: .2rem;
}

#updates br {
display: block;
content: "";
margin-top: 1.5rem;
}
</style>

<div id="updates">
<div class="spring"></div>
<div class="updates-container">
<div class="updates-inner" align="left">
<div class="updates-title">Update Log</div>
<div class="updates-scroll" align="left">
<mark>xx.xx.xx</mark> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tristique, augue quis egestas mattis, felis ligula tempor nulla, id ultricies odio elit nec lectus.
<br>
<mark>xx.xx.xx</mark> Aliquam ornare magna vitae dolor egestas, vel pellentesque tellus pretium. Vivamus viverra odio at lacus vestibulum, ut imperdiet neque blandit.
<br>
<mark>xx.xx.xx</mark> Aliquam tempus magna felis, non vehicula lorem faucibus at. Ut interdum varius lectus, sed ornare augue congue et. Duis sed lectus quam. Ut efficitur nec massa ullamcorper consequat.
<br>
<mark>xx.xx.xx</mark> In bibendum dui non consequat laoreet. Quisque luctus erat quis urna rutrum, sed dapibus ex porta. Proin vel metus rhoncus, laoreet nisi vitae, commodo orci. Etiam et ornare risus, nec faucibus lacus.
<br>
<mark>xx.xx.xx</mark> Vestibulum ac mi a augue rutrum lacinia ut nec odio. Nunc ut ligula id mauris convallis laoreet sit amet pulvinar justo. Ut eleifend efficitur cursus. Nam consequat aliquet vehicula.
</div>
<div class="updates-stats" align="center">
<strong>online: </strong> [12345] | <strong>visits: </strong> [6758]
</div>
</div>
</div>