@import url('style.css');

.center-area{
    display: flex;
    flex-direction: row;
    align-items: center; /* Centers content horizontally */
    justify-content: center; /* Centers content vertically */
    width: 100%;
    height: 100vh; /* Full viewport height */
}

.main-content ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px; /* Adds space between flex items */
}

.text-block img{
  width: 150px; /* Adjust as needed */
  height: 150px; /* Maintain aspect ratio */
  border: solid;
  border-width: 7px;
    border-image: url(border-image2.png) 30 round;
}
.text-block {
  display: flex;
  flex-direction: column;
  background-color: rgba(225, 246, 255, 0.8);
  justify-content: center;

  margin: 60px;
  padding: 20px;
  color: rgb(106, 69, 84); /* text color */
  border: solid;
  border-radius: 6px;
  border-image: url(border-image.png) 30 round;
}

.text-block p{
    flex: 1; /* Allow text to take remaining space */
    min-width: 0; /* Fix flex text overflow */
    font-size: 21px;
    color:rgb(97, 133, 159);
    text-shadow: 2px 2px 4px rgba(251, 204, 229, 0.759); /* Add shadow for better visibility */
}

.side-column {
    height: 100vh;
}

.numbered-list li{
    flex: 1; /* Allow text to take remaining space */
    min-width: 0; /* Fix flex text overflow */
    font-size: 21px;
    color:rgb(97, 133, 159);
    margin-bottom: 1em; /* Adjust the value as needed (1em ≈ 16px) */
    padding-left: 1em; /* Indent the list item */
    position: relative; /* Position relative for pseudo-element */
    text-shadow: 2px 2px 4px rgba(255, 200, 226, 0.759); /* Add shadow for better visibility */
}

.text-block h1{
    flex: 1; /* Allow text to take remaining space */
    min-width: 0; /* Fix flex text overflow */
    font-size: 34px;
    color:rgb(255, 185, 215);
    text-shadow: 2px 2px 4px rgba(255, 200, 226, 0.759); /* Add shadow for better visibility */
}

.text-block a{
    color: rgb(160, 147, 207);
    font-size: 21px;
    text-decoration: none; /* Remove underline */
}


.image-container {
    display: flex;
    flex-direction: row;
    align-items: center; /* Centers content horizontally */
    justify-content: center; /* Centers content vertically */
    gap: 20px; /* Space between images */
    margin: 20px 0; /* Margin for spacing */
}

.text-block ul{
    list-style: none;
}