Update style.css

style.css

@@ -1,7 +1,8 @@
 @import url('https://fonts.googleapis.com/css2?family=Zeyada&display=swap');
 
-
-
+*{
+  box-sizing: border-box;
+}
 
 body {
   height: 100vh;
@@ -10,21 +11,24 @@ body {
   justify-content: center;
 
   background-size: 1000px;
-  background-image: url("https://www.psdgraphics.com/wp-content/uploads/2022/01/white-math-paper-texture.jpg");
+  background-image: url("images/bg.jpeg");
   background-position: center center;
 }
 
 .paper {
-  background-image: url("https://i0.wp.com/textures.world/wp-content/uploads/2018/10/2-Millimeter-Paper-Background-copy.jpg?ssl=1");
+  background-image: url("images/paper.jpg");
   background-size: 500px;
   background-position: center center;
   padding: 20px 100px;
-/*  min-width: 800px; */
+  /* min-width: 800px; */
 
   transform: rotateZ(-5deg);
   box-shadow: 1px 15px 20px 0px rgba(0,0,0,0.5);
-
   position: absolute;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .paper.heart {
@@ -38,19 +42,47 @@ body {
 .paper.image {
   padding: 10px;
 }
+
 .paper.image p {
   font-size: 30px;
 }
 
 img {
-  max-height: 200px;
-  width: 100%;
   user-select: none;
+  object-fit: cover;
+  object-position: top;
+  width: 100%;
+}
+
+.img-1 {
+  max-height: 280px;
+}
+
+.img-2 {
+  max-height: 300px;
+}
+
+.img-3 {
+  max-height: 320px;
+}
+
+.normal-text {
+  margin: 15px;
+  background-color: rgba(0, 200, 255, 0.1);
+  padding: 0px 10px;
+  line-height: 40px;
+  border-radius: 10px;
+}
+
+.important-text {
+  background-color: rgba(0, 200, 255, 0.1);
+  padding: 0px 15px;
+  border-radius: 20px;
 }
 
 .paper.heart::after {
   content: "";
-  background-image: url('https://cdn.pixabay.com/photo/2016/03/31/19/25/cartoon-1294994__340.png');
+  background-image: url("images/heart.webp");
   width: 100%;
   height: 100%;
   position: absolute;
@@ -69,4 +101,5 @@ p {
   opacity: 0.75;
   user-select: none;
   filter: drop-shadow(2px 1.5px 1px rgba(0,0,105,0.9));
+  text-align: center;
 }