i have finals due | article

<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=Quicksand:[email protected]&display=swap" rel="stylesheet">
<style>
@font-face{font-family:Geometos;src:url(https://cdn.statically.io/gh/finchscodes/fonts/main/Geometos.ttf);}

:root{
	--color1: #181818;
    --color2: linear-gradient(90deg, rgba(94,162,111,1) 0%, rgba(98,148,20,1) 100%);
    --color3: rgba(94, 162, 111, 0.5);
    --color4: #5ea26f;
    --color5: #bbbbbb
}
.body{
	background: var(--color1);
    width: 100%;
    margin: auto;
    outline: 2px solid var(--color3);
    outline-offset: -20px;
    overflow: hidden;
    position: relative;
}
.text{
	color: var(--color5);
    text-align: justify;
    font-family: 'Quicksand';
    font-size: 14px;
    padding: 40px;
    position: relative;
    z-index: 2
}
.wave1{
	position: absolute;
    height: 480px;
	width: 100%;
    bottom:0;
	clip-path: path("M0,245L26.7,269.5C53.3,294,107,343,160,351.2C213.3,359,267,327,320,285.8C373.3,245,427,196,480,204.2C533.3,212,587,278,640,302.2C693.3,327,747,310,800,277.7C853.3,245,907,196,960,171.5C1013.3,147,1067,147,1120,155.2C1173.3,163,1227,180,1280,155.2C1333.3,131,1387,65,1440,49C1493.3,33,1547,65,1600,73.5C1653.3,82,1707,65,1760,73.5C1813.3,82,1867,114,1920,114.3C1973.3,114,2027,82,2080,114.3C2133.3,147,2187,245,2240,277.7C2293.3,310,2347,278,2400,253.2C2453.3,229,2507,212,2560,196C2613.3,180,2667,163,2720,204.2C2773.3,245,2827,343,2880,334.8C2933.3,327,2987,212,3040,138.8C3093.3,65,3147,33,3200,73.5C3253.3,114,3307,229,3360,294C3413.3,359,3467,376,3520,375.7C3573.3,376,3627,359,3680,351.2C3733.3,343,3787,343,3813,343L3840,343L3840,490L3813.3,490C3786.7,490,3733,490,3680,490C3626.7,490,3573,490,3520,490C3466.7,490,3413,490,3360,490C3306.7,490,3253,490,3200,490C3146.7,490,3093,490,3040,490C2986.7,490,2933,490,2880,490C2826.7,490,2773,490,2720,490C2666.7,490,2613,490,2560,490C2506.7,490,2453,490,2400,490C2346.7,490,2293,490,2240,490C2186.7,490,2133,490,2080,490C2026.7,490,1973,490,1920,490C1866.7,490,1813,490,1760,490C1706.7,490,1653,490,1600,490C1546.7,490,1493,490,1440,490C1386.7,490,1333,490,1280,490C1226.7,490,1173,490,1120,490C1066.7,490,1013,490,960,490C906.7,490,853,490,800,490C746.7,490,693,490,640,490C586.7,490,533,490,480,490C426.7,490,373,490,320,490C266.7,490,213,490,160,490C106.7,490,53,490,27,490L0,490Z");
	background: var(--color2);
    opacity: 0.3;
    z-index: 1;
    overflow: hidden;
	box-sizing: content-box;
}
.wave2{
	position: absolute;
    height: 480px;
	width: 100%;
    bottom:0;
	clip-path: path("M0,343L26.7,343C53.3,343,107,343,160,294C213.3,245,267,147,320,163.3C373.3,180,427,310,480,359.3C533.3,408,587,376,640,334.8C693.3,294,747,245,800,236.8C853.3,229,907,261,960,236.8C1013.3,212,1067,131,1120,130.7C1173.3,131,1227,212,1280,204.2C1333.3,196,1387,98,1440,57.2C1493.3,16,1547,33,1600,57.2C1653.3,82,1707,114,1760,114.3C1813.3,114,1867,82,1920,57.2C1973.3,33,2027,16,2080,32.7C2133.3,49,2187,98,2240,138.8C2293.3,180,2347,212,2400,261.3C2453.3,310,2507,376,2560,334.8C2613.3,294,2667,147,2720,73.5C2773.3,0,2827,0,2880,65.3C2933.3,131,2987,261,3040,302.2C3093.3,343,3147,294,3200,253.2C3253.3,212,3307,180,3360,171.5C3413.3,163,3467,180,3520,220.5C3573.3,261,3627,327,3680,351.2C3733.3,376,3787,359,3813,351.2L3840,343L3840,490L3813.3,490C3786.7,490,3733,490,3680,490C3626.7,490,3573,490,3520,490C3466.7,490,3413,490,3360,490C3306.7,490,3253,490,3200,490C3146.7,490,3093,490,3040,490C2986.7,490,2933,490,2880,490C2826.7,490,2773,490,2720,490C2666.7,490,2613,490,2560,490C2506.7,490,2453,490,2400,490C2346.7,490,2293,490,2240,490C2186.7,490,2133,490,2080,490C2026.7,490,1973,490,1920,490C1866.7,490,1813,490,1760,490C1706.7,490,1653,490,1600,490C1546.7,490,1493,490,1440,490C1386.7,490,1333,490,1280,490C1226.7,490,1173,490,1120,490C1066.7,490,1013,490,960,490C906.7,490,853,490,800,490C746.7,490,693,490,640,490C586.7,490,533,490,480,490C426.7,490,373,490,320,490C266.7,490,213,490,160,490C106.7,490,53,490,27,490L0,490Z");
	background: var(--color2);
    opacity: 0.1;
    z-index:1;
    overflow: hidden;
	box-sizing: content-box;
}
h3,b,i{
	color: var(--color4)
}
h2{
	color: var(--color5);
    font-family: 'Geometos';
    text-align: center;
    font-size: 1.75em;
    margin-bottom: 0px
}
h3{
	font-family: 'Quicksand';
    text-align: center;
    font-size: 1.2em;
    margin: 0px
}
.header{
	display: flex;
    align-items: center;
    margin: -20px 0px;
}
h4{
	color: var(--color5);
    font-family: 'Geometos';
    text-align: left;
    font-size: 1em;
    display: inline-block;
    padding-right: 10px;
    flex: 0 1 auto;
}
.headerline{
	height: 5px;
    flex: 1;
    background: var(--color2)
}
img{
	border: 2px solid var(--color4);
    object-fit: cover;
    display: block;
    margin: auto
}

ul {
    padding:0px;
}
ul li {
        list-style-type:none;
    }
ul li:before {
          content: "✦ ";
    }
.credits{
    text-align: center;
    transition: 0.4s all;
    letter-spacing: normal;
}
.credits:hover{
	letter-spacing: 5px;
    text-shadow: var(--color4) 0px 0 7px;
}
summary{
	cursor: pointer;
    font-size: 1.2em;
    color: var(--color4);
    font-weight: bold
}
details{
	border: 2px solid var(--color3);
    background: var(--color1);
    padding: 20px;
    text-align: left;
    width: 70%;
    margin: auto
}
</style>
<div class="body">
<div class="text">
<h2>i have finals due</h2>
<h3 style="margin-bottom: 20px">why am i coding</h3>
<div class="header"><h4>i need to pass my classes</h4><div class="headerline"></div></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo vel orci porta non pulvinar neque laoreet suspendisse interdum. Tristique senectus et netus et malesuada fames ac turpis egestas. Accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Nibh cras pulvinar mattis nunc sed. Elementum sagittis vitae et leo duis ut diam quam nulla. Amet est placerat in egestas erat imperdiet sed euismod nisi. Eu augue ut lectus arcu bibendum. Mi proin sed libero enim sed faucibus turpis in. Tortor consequat id porta nibh venenatis cras sed felis. Quis imperdiet massa tincidunt nunc pulvinar. Ut tristique et egestas quis. Montes nascetur ridiculus mus mauris vitae ultricies. Elementum pulvinar etiam non quam lacus suspendisse faucibus interdum posuere. Egestas diam in arcu cursus euismod. Etiam non quam lacus suspendisse faucibus interdum. Sapien pellentesque habitant morbi tristique senectus et netus et. Integer eget aliquet nibh praesent tristique magna sit.

<p>Vitae suscipit tellus mauris a diam maecenas. Justo donec enim diam vulputate ut. Sapien nec sagittis aliquam malesuada bibendum. Nam libero justo laoreet sit amet. Augue mauris augue neque gravida in fermentum et sollicitudin ac. Id diam vel quam elementum pulvinar etiam non quam lacus. Enim neque volutpat ac tincidunt vitae semper quis lectus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Eget felis eget nunc lobortis mattis aliquam. Pharetra vel turpis nunc eget lorem dolor. Ridiculus mus mauris vitae ultricies leo. Purus ut faucibus pulvinar elementum integer enim neque volutpat ac. Urna id volutpat lacus laoreet non curabitur gravida. Arcu dui vivamus arcu felis bibendum. Fermentum leo vel orci porta non pulvinar neque laoreet suspendisse.
<h3>why am i like this</h3>
<p><img src="https://i.pinimg.com/736x/65/f8/a9/65f8a91965b6020fb13d30553416b64d.jpg" style="width: 100px; height: 100px">
<details><summary>updates</summary>
<ul><li>i thought i was taking all the easy classes
<li>my advisor lied to me
<li>these classes don't even relate to my major
<li>i'm cooked
</ul></details>
<p>Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. In egestas erat imperdiet sed euismod. Neque ornare aenean euismod elementum. Vel eros donec ac odio tempor orci. Scelerisque eleifend donec pretium vulputate. Mi in nulla posuere sollicitudin. Sagittis id consectetur purus ut faucibus pulvinar. Tortor pretium viverra suspendisse potenti nullam. Aliquam ut porttitor leo a diam sollicitudin tempor id. Risus viverra adipiscing at in tellus integer. Rhoncus est pellentesque elit ullamcorper dignissim. Non curabitur gravida arcu ac tortor. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Pellentesque nec nam aliquam sem et tortor consequat id. Faucibus turpis in eu mi bibendum neque. Commodo elit at imperdiet dui accumsan sit amet.
<div class="credits"> <a href="https://finchscodes.tumblr.com" style="text-decoration: none;color: var(--color5); " target="_blank">CODED BY FINCH</a></div>
</div><div class="wave1"></div><div class="wave2"></div>
</div>