MED'S AWESOME PAGE CODE 2

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="{FAVICON GOES HERE}">
    <title>MED'S AWESOME PAGE CODE 2</title>

<!--Hiya! This quick page theme was by me, Med! You can find me at tsuinosora.neocities.com. This is just a quick layout I made for personal use, credit is appreciated but not needed since this was mostly made in one day. Some general information:
  * The font used for the body is Fira Sans and the font used for links, h1, and h2 is Pangolin, you may want to change it! I used google fonts but I'm sure there's other ways to do so.
  * Feel free to edit to hell and back!
  * You could probaby add a scrollbar for the text box! I chose not to because I am on Firefox and it looks ugly but feel free to add it in yourself!
  * This page is VERY MUCH not mobile friendly, sorry OTL
  * The div id for the transparent corner image is "animetransparenthere", if you don't want an image in the corner of the screen.
  * Wow this looks a lot like those redux edit themes, huh. That wasn't intentional, I just wanted a quick page theme I could fit a ton of text on easily, I promise! It's not my fault I joined kinblr in 2014 and still have brainrot :(
  * I have a 1280x1024 monitor! It may look different on yours :3-->

<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=Fira+Sans&family=Pangolin&display=swap" rel="stylesheet">

<style>

body{
  background-color:#FFDAEA;
  background-image:url("{BACKGROUND IMAGE URL GOES HERE");
  font-family: 'Fira Sans', sans-serif;
}

#containment{
  margin:auto;
  width:900px;
  position:relative;
  top:0px;
  }

#textbox{
  margin:auto;
  padding:3px;
  font-size:16px;
  width:600px;
  background-color:#fff;
  color:#000;
  border:2px solid #FFBBD6;
  border-radius:10px;
  position:absolute;
  left:25px;
  box-shadow: 2px 2px 2px #aaaaaabf;
}

#links{
  text-align:left;
  padding:3px;
  margin:auto;
  font-size:16px;
  width:200px;;
  background-color:#fff;
  color:#000;
  border:2px solid #FFBBD6;
  border-radius:10px;
  position: absolute;
  right:25px;
  box-shadow: 2px 2px 2px #aaaaaabf;}

h1{
  text-align:left;
  text-shadow: 2px 2px 2px #aaaaaabf;
  font-size:50px;
  font-family: 'Pangolin', cursive;
  color:#432824;
}

h2{
  font-size:25px;
  font-family: 'Pangolin', cursive;
  color:#99D785;}

a{
  font-family: 'Pangolin', cursive;
  color:#E5819B;
}

a:hover{
  color:#99D785;
}

#animetransparenthere{
  position:fixed;
  right:0px;
  bottom:0px;}

</style>

</head>

  <body>
  <div id="containment"><h1>TESTING . . .</h1>
  <div id="textbox"><p><h2>cool title brah</h2>
  <p>This is a test box to show how much text I can fit on this text box! Wowie! SO many words! I love typing and the feeling of keyboard keys clicking under my fingers as I type a lot of text.</p>
  <p>Everyone loves how good at typing I am, and I am a very special internet user! Yippie!!</p>
  <p>Words! Girls love them!!!</p>
  <p>So anyways, this text box can hold a lot of text! Yay! You could probably use it to make blog posts or something and have the links on the side lead to next or previous or archive or home something like that? Could also use it for a button wall or a blinkie wall or something. The world is your burrito! Live dangerously! Whatever that dude from The World Ends With You said!</p></div>
  <div id="links"><center>Woah, some more text! Maybe you could put a short description here? Or an icon above this?</center>
  <a href="#">test text</a><br>
  <a href="#">test text</a><br>
  <a href="#">test text</a><br>
  <a href="#">test text</a><br></div></div>
  <div id="animetransparenthere"><img src="{CORNER IMAGE GOES HERE}"></div>
  </body>
</html>