
.body-container {
  display: flex;
  margin: center; /* Add margin to the body-container for additional spacing */
  padding: 2% 10%; /* Reduce padding to make it shorter */
}

.box {
  border: 4px solid #ff75a8;
  border-radius: 30px;
  background-color: #ffddee;
  margin: 0 20px; /* Add margin to create space between the boxes */

}

h1 {
  text-align: center;
  border: 4px solid #ff75a8;
  padding: 0.6% 10%; /* Reduce padding to make them narrower */
  margin: 20px 12% 0; /* Add margin to the top and adjust left and right sides */
  border-radius: 30px;
  background-color: #ffddee; 
}

.box-left {
  text-align: center;
  flex: 1; /* Set flex to 1 for equal distribution */
  padding: 1% 1%;
  margin: 1px 1% 0; /* Add margin to the left and right sides to maintain their height */
  border-radius: 30px;
  height: 330px;
  width: 50%;
  background-color: #8595C6;
}

.box-left img {
  max-width: 100%;
  height: auto%;
  }

.box-right {
  text-align: center;
  flex: 1; /* Set flex to 1 for equal distribution */
  padding: 1% 1%;
  margin: 1px 1% 0; /* Add margin to the left and right sides to maintain their height */
  border-radius: 30px;
  height: 330px;
  width: 50%;
  background-color: #FCF0E4;
}

.box-right img {
  max-width: 100%;
  height: auto%;
  }
  
.box-middle {
  flex: 1.5; /* Set flex to 2 to make it bigger than the left and right boxes */
  padding: 1% 1%; /* Reduce padding to make it shorter */
  margin: 1px 1% 0; /* Add margin to the left and right sides to maintain their height */
  text-align: center;
  height: 330px;
  width: 100%;
}

/* Your existing CSS remains unchanged */

/* CSS for comment form */
form {
  text-align: center;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type="text"],
textarea {
  width: 80%;
  padding: 5px;
  margin-bottom: 10px;
  border: 2px solid #ff75a8;
  border-radius: 5px;
}

input[type="submit"] {
  background: #ffddee;
  border: 2px solid #ff75a8;
  border-radius: 5px;
  padding: 5px 10px;
  color: #627af5;
  font-size: 16px;
  cursor: pointer;
}

input[type="submit"]:hover {
  background: #ff75a8;
  color: #ffddee;
}

/* CSS for comments section */
.comments {
  margin-top: 20px;
}

.comment {
  background: #ffddee;
  border: 2px solid #ff75a8;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
}

.comment-date {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}

  
  
  .custom-button {
    background-image: url('https://64.media.tumblr.com/b38baf9b52e6691787951994e4ab1ca4/654852b246e07a68-b2/s250x400/8e972880e5af7c6b1d60d6fdf4381c2dfa2280f9.pnj'); /* Replace 'button.png' with the filename of your button image */
background:    #ffddee;
background:    linear-gradient(#a4c1f0, #ffddee 50%, #a4c1f0);
border:        2px solid #ff75a8;
border-radius: 1000px;
box-shadow:    0 2px #ffc1d8;
width:         100px;
height:        40px;
color:         #627af5;
display:       inline-block;
font:          italic bold 33px/40px "Open Sans", sans-serif;
text-align:    center;
text-shadow:   2px 2px #ffffff;
/* Other button styles */
    text-decoration: none; /* Remove underline */
}


h2 {
  text-align: center;
  border: 4px solid #ff75a8;
  padding: 0.5% 0%; /* Reduce padding to make them narrower */
  margin: 1px 12% 0; /* Add margin to the left and right sides to maintain their height */
  border-radius: 30px;
 
  background-color: #ffddee;
}

.box-bottom {
  padding: 1% 1%; /* Reduce padding to make it shorter */
  margin: 4px 16% 40px; /* Add margin to the left and right sides to maintain their height */
  text-align: center;
  height: 4000px;
  width: auto;
  background-color: #ffddee;
  font-size: 12pt
}

/* Your existing CSS starts here */

body {
  background: url(https://64.media.tumblr.com/ca77fb6a0d2f051a3a95cf8d1dd5cf13/03a8eda33af4a8ad-14/s250x400/616e81622342758fb5ae2eb694b92cbf285022ee.pnj);
  color: #627AF5;
  font-family: "Consolas", monospace;
  font-size: 15pt;
  padding: 0;
  margin: center;

}

a {
  color: #ff1493
}

/* CSS to style only italicized and bold text */
i b {
  color: #8A5CD8; /* Change this to your desired color */
}

H1, H2 {
	color: #FF007F;
}

small {
  font-size: 10pt;
	
}

h4,
h5,
center {
  text-align: center;
}