toasty woasty 1 | lesson

<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Montserrat&family=Poppins&display=swap" rel="stylesheet">
<style>
::-webkit-scrollbar {width: 5px; background: #3B3A3A}
::-webkit-scrollbar-thumb {background: linear-gradient(0deg, #869d72 0%, #83174a 100%);}

.body{
   margin: auto;
    width: 80%;
     border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.2);
    background: #3B3A3A;
    position: relative;
    font-family: 'Montserrat';
    box-shadow: 1px 1px 16px #666;
    overflow: hidden
}
.bg{
clip-path: polygon(100% 0%, 0% 0% , 0.00% 86.88%, 2.00% 88.74%, 4.00% 89.96%, 6.00% 90.48%, 8.00% 90.30%, 10.00% 89.41%, 12.00% 87.86%, 14.00% 85.69%, 16.00% 82.98%, 18.00% 79.83%, 20.00% 76.35%, 22.00% 72.66%, 24.00% 68.90%, 26.00% 65.19%, 28.00% 61.67%, 30.00% 58.46%, 32.00% 55.68%, 34.00% 53.43%, 36.00% 51.78%, 38.00% 50.79%, 40.00% 50.50%, 42.00% 50.92%, 44.00% 52.04%, 46.00% 53.80%, 48.00% 56.16%, 50.00% 59.03%, 52.00% 62.30%, 54.00% 65.87%, 56.00% 69.59%, 58.00% 73.35%, 60.00% 77.01%, 62.00% 80.44%, 64.00% 83.52%, 66.00% 86.13%, 68.00% 88.19%, 70.00% 89.63%, 72.00% 90.38%, 74.00% 90.44%, 76.00% 89.78%, 78.00% 88.45%, 80.00% 86.47%, 82.00% 83.93%, 84.00% 80.92%, 86.00% 77.54%, 88.00% 73.90%, 90.00% 70.15%, 92.00% 66.41%, 94.00% 62.81%, 96.00% 59.49%, 98.00% 56.56%, 100.00% 54.12%);
    height: 300px;
	width: 100%;
    position: absolute;
    background: linear-gradient(90deg, #869d72 0%, #83174a 100%);
    top: -20px
}

img {
    object-fit: cover;
    border-radius: 20px;
}
h2{
    font-family: 'Poppins';
    text-transform: uppercase;
    font-size: 20px;
    margin: 0px;
    color: #fff;
    font-weight: normal;
        line-height: 100%

}
h3{
    font-family: 'DM Serif Display';
    font-size: 40px;
    margin: 0px 0px 5px;
    color: #fff;
    font-weight: normal;
    line-height: 100%
}
h4{
    margin: 5px 0px;
    background: linear-gradient(90deg, #869d72 0%, #83174a 100%);
    padding: 5px 20px;
    color: #fff;
    font-family: 'Poppins';
    text-transform: uppercase;
    font-size: 13px;
    width: auto
}
.text{
    padding: 20px;
    margin: 20px 20px 0px;
    border: 1px solid rgba(0,0,0,0.2);
    font-family: 'Montserrat';
    font-size: 13px;
    background: #5E5E5E;
    color: #fff;
    text-align: justify;
    border-radius: 20px;
    position: relative;

}
.sidebar{
	border-left: 1px solid rgba(0,0,0,0.2);
    height: 500px;
    width: 250px;
    position: absolute;
    left: 550px;
    padding: 20px;
    box-sizing: border-box;
    color: #fff
}

/* make this uhhhhh lighter than normal colors */
b,i,a{
background: linear-gradient(90deg, #BDDBA4 0%, #F98BBE 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}

</style>
<div class="body">
<div class="bg"></div>
<div class="text">
<h2>toasty woasty</h2>
<h3>mamma mia</h3>
<img src="https://64.media.tumblr.com/8c92c0e61e26b8c4f3fa1951a1adfc91/e703b4acb49b83e2-ef/s400x600/e13d10de9a6001386f967172b42c6b3975d0d80c.gifv" style="width: 100%; height: 200px">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At consectetur lorem donec massa sapien faucibus et. Dis parturient montes nascetur ridiculus. Donec pretium vulputate sapien nec sagittis aliquam. Imperdiet dui accumsan sit amet. Fusce id velit ut tortor. Morbi tristique senectus et netus. Vel turpis nunc eget lorem dolor sed. Vulputate eu scelerisque felis imperdiet proin. Adipiscing elit ut aliquam purus sit amet luctus venenatis.

<p><b>Hendrerit gravida rutrum quisque non tellus orci. Sagittis vitae et leo duis ut diam quam nulla porttitor. Mi proin sed libero enim sed faucibus. Vel orci porta non pulvinar neque laoreet suspendisse interdum consectetur.</b> Ipsum a arcu cursus vitae. Neque volutpat ac tincidunt vitae. Sapien faucibus et molestie ac feugiat sed lectus vestibulum mattis. Ac ut consequat semper viverra nam libero. Etiam sit amet nisl purus in. Cras ornare arcu dui vivamus arcu felis bibendum ut tristique. Amet massa vitae tortor condimentum. <i>Vulputate mi sit amet mauris commodo quis. Dignissim diam quis enim lobortis. Facilisis sed odio morbi quis commodo odio aenean sed adipiscing. Porttitor lacus luctus accumsan tortor posuere ac.</i> In metus vulputate eu scelerisque felis.

<p>Quis viverra nibh cras pulvinar mattis nunc sed. Tortor consequat id porta nibh venenatis cras. Vel pharetra vel turpis nunc eget lorem dolor. Id aliquet lectus proin nibh nisl condimentum id venenatis. Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Mi tempus imperdiet nulla malesuada pellentesque elit eget gravida. Libero nunc consequat interdum varius sit amet mattis. Neque viverra justo nec ultrices dui sapien eget. Lorem dolor sed viverra ipsum nunc. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc. Elementum nibh tellus molestie nunc non blandit massa enim.

<p>Mi bibendum neque egestas congue quisque egestas diam in. Dui vivamus arcu felis bibendum ut tristique et. Pellentesque massa placerat duis ultricies lacus sed turpis. Sociis natoque penatibus et magnis. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Eget nulla facilisi etiam dignissim diam quis enim lobortis. Sed vulputate mi sit amet mauris commodo quis. Lacinia quis vel eros donec ac odio tempor. Sed egestas egestas fringilla phasellus faucibus. Enim nulla aliquet porttitor lacus luctus accumsan tortor posuere. Quis risus sed vulputate odio ut enim. Donec massa sapien faucibus et. Nam libero justo laoreet sit amet cursus. Sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Enim ut tellus elementum sagittis vitae et leo duis ut. Scelerisque felis imperdiet proin fermentum. Feugiat nisl pretium fusce id velit ut tortor pretium.

<p>In hac habitasse platea dictumst vestibulum rhoncus. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus vel. Platea dictumst quisque sagittis purus sit amet. Auctor elit sed vulputate mi sit amet mauris. Posuere lorem ipsum dolor sit amet consectetur adipiscing elit duis. Elementum tempus egestas sed sed risus pretium quam. Bibendum ut tristique et egestas quis ipsum. In ante metus dictum at tempor commodo. Quam elementum pulvinar etiam non quam. Senectus et netus et malesuada. Purus faucibus ornare suspendisse sed nisi lacus sed viverra. Eget est lorem ipsum dolor sit. Pellentesque elit ullamcorper dignissim cras tincidunt.


<h4>your assignment</h4>
<p>hahha toast goes crunch
<h2>requirements</h2>
- In RPG format.
<br>- stinky
<br>- yummy
<center><a href="PROFILELINK" target="_blank"><img alt="profile-picture" src="LINK" style="width:80px;border:1px solid rgba(0,0,0,0.2);margin-top:15px;" /></a>
</center>
</div>
<center><p><a href="https://finchscodes.tumblr.com/" target="_blank" style="color: #fff; text-decoration:none; font-size:12px;font-family:'poppins'">CODED BY FINCH</a></center></div>
</div>