like a villain | 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=Poiret+One&display=swap" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<link href="https://fonts.googleapis.com/css2?family=Schoolbell&display=swap" rel="stylesheet">

<style>
.background {
background-image: url("https://img.freepik.com/premium-vector/snakes-seamless-pattern-golden-mystic-serpents-decorative-repeated-dark-wallpaper-magical-occult-symbols-stars-moon-decor-textile-wrapping-paper-modern-print-tidy-vector-background_176411-9733.jpg");
box-shadow: 0px 0px 10px #d5bbcf;
max-width: 590px;
margin:20px 20px 5px 20px;
padding:30px;
}

.header {
background-color: rgb(0,0,0,0.9);
box-shadow: 0px 0px 10px rgb(0,0,0,0.9);
margin-bottom:30px;
padding:20px;
}

h2 {
color: #FFECEC;
margin: 0px;
font-style: italic;
font-family: "Poiret One", sans-serif;
font-weight: 600;
text-transform: uppercase;
font-size:24px
}

.textbox1 {
background-color: rgb(0,0,0,0.9);
box-shadow: 0px 0px 10px rgb(0,0,0,0.9);
color: white;
font-family: 'Montserrat', serif;
text-align: justify;
margin-bottom:30px;
padding:30px;
}

.divider {
border: 0.5px solid #FEE49A
}

.textbox2 {
background-color: rgb(0,0,0,0.9);
box-shadow: 0px 0px 10px rgb(0,0,0,0.9);
color: white;
font-family: 'Montserrat', serif;
text-align: justify;
padding:30px;
}

.cluebox {
margin: 5%;
width:350px;
max-width: 78%;
background-color: #c0ac74;
color: black;
background-size: cover;
padding:6%;
text-align: left;
}

b {
color: #FEE49A
}

</style>

<body>
<center>
<div class="background">
	<div class="header">

<!-- this is the font i used for this! i also applied a glow effect :3 https://fontmeme.com/fonts/iceland-winterstorm-font/ -->

		<img src="https://fontmeme.com/permalink/250617/5d4259504b09838a8d8eea2d2ecea99e.png" style="width:360px; max-width:100%">
		<h2>i couldn't be, i didn't need it, it needed me</h2>
	</div>
	<div class="textbox1">
Phasellus vel metus odio. Donec metus enim, tincidunt a sagittis quis, semper in purus. Suspendisse ullamcorper interdum quam, in consectetur libero scelerisque sed. Aenean sed nisl in risus porttitor aliquet. Morbi et viverra neque. Sed blandit, dui et imperdiet mollis, velit turpis facilisis quam, id ullamcorper turpis lectus ac quam. Curabitur rhoncus at diam sed lobortis. <b>Cras hendrerit congue turpis, ac lacinia ex vulputate sed.</b> Quisque interdum turpis sit amet elit dictum ullamcorper. Praesent quis purus condimentum, ultrices arcu ac, malesuada massa. Donec sed massa dignissim, pellentesque lacus id, pellentesque mi. Fusce ut congue ante, sed efficitur est.<br><br>

Ut vestibulum libero quis dapibus laoreet. Donec ut interdum est. Morbi nec magna dignissim, posuere nulla ut, porttitor magna. <b>Pellentesque urna risus, vestibulum a tempor eu, lacinia eu nibh. Nunc scelerisque ultricies tortor, et porta tortor.</b> Duis vitae purus at sem euismod porta id et tellus. Ut tincidunt blandit hendrerit. Proin tincidunt rhoncus sapien, in maximus arcu consequat eu. Aenean pretium tempus enim, eu porta lorem tempor non.
	</div>
	<div class="textbox2">
		<div style="height: 300px; overflow: auto">
Donec facilisis elit sit amet commodo hendrerit. Proin magna mi, molestie sit amet diam vitae, facilisis dignissim turpis. Nunc feugiat auctor quam at gravida. Sed leo mauris, dapibus tincidunt mi in, scelerisque fermentum velit. Nulla facilisi. Nunc nec quam vel purus consectetur volutpat non id purus. Donec accumsan tristique tellus, sit amet posuere purus efficitur eu. <br><br>Ut ullamcorper mattis nisl eget egestas. Phasellus blandit luctus bibendum. <b>Praesent aliquet lacus ut lacus volutpat semper.</b> Vestibulum luctus, nulla et venenatis iaculis, mauris ex pellentesque ligula, eu vestibulum ligula turpis congue nulla. Integer ultricies metus eu ornare finibus.<br><br>

Phasellus vel metus odio. Donec metus enim, tincidunt a sagittis quis, semper in purus. Suspendisse ullamcorper interdum quam, in consectetur libero scelerisque sed. Aenean sed nisl in risus porttitor aliquet. <br><br>Morbi et viverra neque. Sed blandit, dui et imperdiet mollis, velit turpis facilisis quam, id ullamcorper turpis lectus ac quam. Curabitur rhoncus at diam sed lobortis. <b>Cras hendrerit congue turpis, ac lacinia ex vulputate sed.</b> Quisque interdum turpis sit amet elit dictum ullamcorper. Praesent quis purus condimentum, ultrices arcu ac, malesuada massa. Donec sed massa dignissim, pellentesque lacus id, pellentesque mi. Fusce ut congue ante, sed efficitur est.
		</div>
			<center><div class="cluebox">
◆ Ut vestibulum libero quis dapibus laoreet. Donec ut interdum est. <br><br>
◆ Ut vestibulum libero quis dapibus laoreet. Donec ut interdum est. <br><br>
◆ Ut vestibulum libero quis dapibus laoreet. Donec ut interdum est.
			</div></center>
<div class="divider"></div><br>
<!-- your pfp here!!! -->
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" style="width: 100px; max-width: 40%; float: left; margin: 0px 5% 5% 0">
Phasellus vel metus odio. Donec metus enim, tincidunt a sagittis quis, semper in purus. Suspendisse ullamcorper interdum quam, in consectetur libero scelerisque sed. Aenean sed nisl in risus porttitor aliquet.
	</div>
</div></center>


<center><a href="https://kranae.tumblr.com/" target="_blank" style="font-size:12px;"><i>coded by kanae</i></a></center><br><br>
</body>