body {
  background-color: #F2F3D9;
  background-image: url('bg/bg.png');
}

h1, h2 {
  text-align: center;
}

h3 {
  text-align: center;
}

p {
  color: #25283D;
  font-size: large;
  font-family:Georgia, 'Times New Roman', Times, serif;
}

.spacer {
  height: 15px;
}

.header-container {
  width: 90%;
  margin: auto;
  background-image: url('bg/pink-stripes.png');
  justify-content: center; /* Center images horizontally */
  padding: 10px; /* Add padding around the container */
  display: flex;
  align-items: center; /* Align items vertically in the center */
  gap: 10px; /* Add space between the paragraph and the image */
}

.ramble-button {
  margin: auto;
  color: antiquewhite;
  background-image: url('bg/heart.gif');
  justify-content: center; /* Center images horizontally */
  padding: 10px; /* Add padding around the container */
  display: flex;
  align-items: center; /* Align items vertically in the center */
  gap: 10px; /* Add space between the paragraph and the image */
  border-radius: 12px; /* Optional: Add rounded corners */
}

.day {
  width: 90%;
  margin: auto;
  background-image: url('bg/clouds.png');
  padding: 10px; /* Add padding around the container */
  border-radius: 8px; /* Optional: Add rounded corners */  
  box-shadow: 0 4px 8px #25283D; /* Optional: Add a subtle shadow */
  gap: 10px; /* Add space between the paragraph and the image */
}
.day h3 {
  text-align: center;
}

.entry {
  padding: 10px; /* Add padding around the container */
}

.entry p {
  color: #25283D;
  text-align: center;
}

.entry img {
  text-align: center;
  border-radius: 4px; /* Optional: Add rounded corners */  
  transition: transform 0.3s; /* Optional: Add hover effect */
}

.entry video {
  max-width: 50%;
  display: block;
  margin: auto;
}

.entry img:hover {
  transform: scale(1.05); /* Slightly enlarge on hover */
}

.inline-container {
  justify-content: center; /* Center images horizontally */
  padding: 10px; /* Add padding around the container */
  display: flex;
  align-items: center; /* Align items vertically in the center */
  gap: 10px; /* Add space between the paragraph and the image */
}

.inline-container p {
  padding: 10px;
  color: #151E3F;
  flex: 1;
  max-width: 800px;
  text-align: justify;
}

.imagebox 
{
  display: grid;
  height: 100%;
}
.center-fit {
  display: block;
  margin: auto;
  max-width: 90%;
  max-height: 100vh;
  margin: auto;
}

.row {
  max-width: 50%;
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 50%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%; 
  border-radius: 4px; /* Optional: Add rounded corners */  
}

.removable-gif {
  border-radius: 0px; 
}


/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 1000px) {
  .inline-container {
    flex-direction: column;
  }
  .row {
    max-width: 100%;
  }
  .removable-gif {
    display: none;
  }
}