@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');

body {
  text-align: center;
  background-color: dimgray;
  color: antiquewhite;  
  letter-spacing: 1px;
  font-family: Verdana;
}

h1 {
  font-family: "Luckiest Guy", cursive;
  font-weight: 400;
  letter-spacing: 5px;
  padding-top: 30px;
  padding-bottom: 40px;
}

h2 {
  font-family: "Bangers", system-ui;
  letter-spacing: 5px;
}
/*this shit ugly find a new font*/

h5 {
  padding-top: 1%;
  padding-right: 5%;
  text-align: right;
}

p {
  padding-top: 3%;
  padding-bottom: 3%;
}

.quote {
  width: 43%;
  margin: auto;
  margin-top: 5%;
  margin-bottom: 5%;
  padding-top: 2%;
  border: .2rem solid #C92432;
  border-radius: 12px;
  background-color: #E6E6E6;
  color: #212121;
}

.ItsyBitsy {
  padding-top: 4%;
}

.Thwip {
  background-color: #000000;
  border-radius: 50px;
}

/*<div class="smdp">
    <img class="smdp1" width="21.35%" src="/smdp1.png" alt="Spider-man & Deadpool 1" style="border: .1rem solid black">
    <img class="smdp2" width="20%" src="/smdp2.png" alt="Spider-man & Deadpool 2" style="border: .1rem solid black">
    <img class="smdp3" width="25%" src="/smdp3.png" alt="Spider-man & Deadpool 3" style="border: .1rem solid black">
    <img class="smdpchat" width="20%" src="/smdpchat.png" alt="Spider-man & Deadpool textbox">
    
.smdp1 {
  box-sizing: content-box;
  width: 21.35%;
  border: .2rem solid 212121;
}

.smdp2 {
  position: relative;
}

.smdpchat {
  box-sizing: content-box;
  width: 20%;
  margin-left: 90%;
}

    .smdp {
      margin: 20%;
    }
    
    .smdpone {
      margin: 20%;
    }

</div>

saving this for later when I figure out how to format it the way I want. Had to put this in CSS cause idk how to hide stuff in html*/