the fool | article

<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Merriweather&display=swap" rel="stylesheet">
<style>
.body{
    margin: 30px auto;
    padding: 20px;
    width: 500px;
      border: 3px solid #000;
  border-radius: 0;
  box-shadow: 15px 15px 0 -2.5px #fff, 15px 15px 0 0 #000;
    background: #000;
    outline:2px solid #083D77;
    outline-offset:-10px;
    transition: all 300ms
}
.body:hover{
transform: scale(1.02);

}
h2{
padding: 10px;
border-bottom: 5px solid #083D77;
margin: 0px;
color: #fff;
text-transform: uppercase;
font-size: 30px;
font-family: 'Merriweather';
}
.text{
    font-family: 'IBM Plex Mono';
    font-size: 13px;
    color: #fff;
    text-align: justify
}
.bit{
    float:left;
    padding: 5px;
    display: inline-block;
    color: #fff;
    background: #083D77;
    margin-right: 5px;
    font-family: 'Merriweather';
    font-size: 13px;
    font-weight: bold;
    text-align: center
}
hr{
    border: 1px solid #083D77
}
.bit2{
    border-left: 2px solid #083D77;
    font-size: 13px;
    font-family: 'IBM Plex Mono';
    font-size: 13px;
    color: #fff;
    padding: 5px 15px;
 }
</style>
<div class="body">
<h2>the fool.</h2>
<div class="text">
<p><div class="bit">honk honk</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue lacus viverra vitae congue eu consequat ac felis. Et pharetra pharetra massa massa ultricies mi quis. Dignissim cras tincidunt lobortis feugiat vivamus at augue eget. Consectetur libero id faucibus nisl tincidunt eget nullam non nisi. Et sollicitudin ac orci phasellus egestas tellus rutrum. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra. Urna molestie at elementum eu facilisis sed odio morbi quis. Morbi non arcu risus quis. Nunc consequat interdum varius sit amet mattis vulputate. A pellentesque sit amet porttitor. Non pulvinar neque laoreet suspendisse. Purus sit amet luctus venenatis lectus magna fringilla. Vitae nunc sed velit dignissim sodales ut eu. Duis at tellus at urna condimentum mattis pellentesque id nibh. Tempus quam pellentesque nec nam aliquam sem et tortor. Tristique magna sit amet purus gravida quis blandit turpis cursus.
<hr>
<p>Ultrices neque ornare aenean euismod elementum nisi quis eleifend quam. Purus viverra accumsan in nisl. Scelerisque eu ultrices vitae auctor eu augue ut lectus arcu. Est ultricies integer quis auctor. Nunc congue nisi vitae suscipit tellus mauris a diam maecenas. Laoreet sit amet cursus sit. Auctor urna nunc id cursus metus aliquam. Id diam maecenas ultricies mi eget mauris pharetra et ultrices. Semper eget duis at tellus. Vel orci porta non pulvinar neque. Est ullamcorper eget nulla facilisi etiam. Justo nec ultrices dui sapien eget mi proin sed libero. Ultricies integer quis auctor elit sed vulputate mi sit amet. Nisl pretium fusce id velit ut tortor pretium. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Imperdiet massa tincidunt nunc pulvinar sapien. Aliquet nec ullamcorper sit amet risus nullam eget felis. Sit amet commodo nulla facilisi nullam vehicula ipsum a arcu. Nulla facilisi etiam dignissim diam quis enim lobortis.
<p><table><td><div class="bit" style="padding: 5px 15px;">what the is a tarus</div></td><td><div class="bit2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi placerat ante nibh, et congue erat malesuada non.</div></td></table>
</div> <div style="font-family:'IBM Plex Mono';font-size: 10px; text-align: center"><a href="https://finchscodes.tumblr.com" style="text-decoration: none;color: #fff;" target="_blank"> CODED BY FINCH</a>
</div></div>