destined to chud | lesson

<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=Averia+Serif+Libre:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<style>
  @font-face {
    font-family: "Ethereal";
    src: url("https://raw.githubusercontent.com/finchscodes/fonts/main/Ethereal-Bold.ttf") format("truetype");
  }
:root{
	--main: #1A1A21;
    --second: #C4C4C4;
    --third: #F7F7F7;
    --accent: #1D38A1;
    --accent2: #3E55A8;
    --body:'PT Serif';
    --display:'Averia Serif Libre';
    --fun: 'Ethereal';
}
.article{
	max-width: 600px;
   	background: linear-gradient(180deg, var(--main) 60%, var(--accent) 190%);
    padding: 40px;
    margin: 20px auto;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid var(--second)
}
.header{
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  margin-bottom: 16px;

}
.header h1{
	font: 60px/50px var(--fun);
    color: var(--third);
    text-shadow: 0px 0px 10px var(--second);
    position: relative;
    z-index: 2
}
.header h2{
	font: 20px/15px var(--display);
    color: var(--third);
    text-shadow: 0px 0px 10px var(--second);
    position: relative;
    z-index: 2;
    margin-top: -30px;
    text-transform: uppercase
}
.starburst {
  width: 200px;
  margin: auto;
  position: absolute;
  opacity: 0.8;
  background: linear-gradient(360deg, var(--main) 0%, var(--accent) 100%);
  aspect-ratio: 1;
  clip-path: polygon(50.00% 0.00%, 52.76% 35.26%, 68.06% 3.38%, 57.90% 37.25%, 83.68% 13.05%, 61.97% 40.96%, 94.76% 27.71%, 64.43% 45.90%, 99.79% 45.39%, 64.94% 51.38%, 98.09% 63.68%, 63.43% 56.69%, 89.90% 80.13%, 60.11% 61.09%, 76.32% 92.51%, 55.42% 63.99%, 59.19% 99.15%, 50.00% 65.00%, 40.81% 99.15%, 44.58% 63.99%, 23.68% 92.51%, 39.89% 61.09%, 10.10% 80.13%, 36.57% 56.69%, 1.91% 63.68%, 35.06% 51.38%, 0.21% 45.39%, 35.57% 45.90%, 5.24% 27.71%, 38.03% 40.96%, 16.32% 13.05%, 42.10% 37.25%, 31.94% 3.38%, 47.24% 35.26%);
    z-index: 1
}
.text{
	color: var(--second);
    font: 16px/22px var(--body);
    text-align: justify
}

.text img{
  float: right;
  width: 180px;
  object-fit: cover;
  margin: 0 0 16px 20px;
  border: 1px solid var(--accent2);
  border-radius: 3px;
}
.requirements{
	padding: 20px;
    border: 1px solid var(--second);
    border-radius: 5px;
    font: 14px/18px var(--body)
}
.requirements h2{
	font: 20px/15px var(--display);
    color: var(--third);
    text-shadow: 0px 0px 10px var(--second);
    position: relative;
    margin: 0px;
    text-transform: uppercase
}
ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

li {
  padding-left: 2em;
  text-indent: -1em;
}

li:before {
  content: "✴";
  color: var(--accent2);
  padding-right: 5px;
}
b, i{color: var(--accent2)}
.credits {
  margin-top: 24px;
  text-align: center;
  font: 14px/14px var(--body);
  text-transform: uppercase;
}
.credits a {
  color: var(--accent2);
  text-decoration: none;
  transition: color 0.3s;
}
@media (max-width: 480px) {
  .article {padding: 20px}
  .header  {height: 160px; margin-bottom: 20px}
  .starburst {width: 150px}
  .header h1 {font: 40px/35px var(--fun)}
  .header h2 {font-size: 15px}

}
.professor{
  text-align: center;
  margin: 20px auto 0;
  font: 14px/20px var(--body);
  color: var(--second);
}
.professor-sig {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 10px;
}
.professor-sig img:first-child {
  width: 55%;
  border: none
}
.professor-sig img:last-child {
  width: 75px;
  height: 75px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--accent);
  flex-shrink: 0;
}
.credits a:hover { color: var(--accent); }
</style>
<div class="article">
<div class="header">
<div class="starburst"></div>
<h1>destined to chud</h1>
<h2>year one, week one of chudding</h2>
</div>
<div class="text">
<b>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat.</b> In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. <i>Pulvinar vivamus fringilla lacus nec metus bibendum egestas.</i> Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
<p><img src="https://64.media.tumblr.com/20e3abff9a522a6aa3573c4a975aa27c/06af5a39ab295484-2f/s500x750/812874db8d1c8e577ff94a1cc7f189bf23a13168.gif">
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
<div class="requirements">
<h2>assignment</h2>
<ul>
<li>am i a chud</li>
<li>forlorn from this world</li>
<li>destined to chud along</li>
<li>until the chud end</li>
</ul>
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
</div>
<div class="professor">if you have questions, no you don't
  <div class="professor-sig">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/Huey_Long_Signature.svg/1280px-Huey_Long_Signature.svg.png" alt="signature">
    <img src="https://64.media.tumblr.com/eced3886cf943ce7bba6a0e23adb4bbf/20638eb9ea1f1a8c-0e/s400x600/7019cc2a362e911fc9fb362ff96d28e95d22af2e.gifv" alt="professor">
  </div>
</div>
<div class="credits"><a href="https://finchscodes.tumblr.com" target="_blank">CODED BY FINCH</a></div>
</div></div>