@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 */
    flex: 1;
}


.list-container{
  width: 100%;
}

.list-container .block{
    padding: 5%;
}

.block img{
  width: 200px; /* Adjust as needed */
  height: auto; /* Maintain aspect ratio */
  margin-right: 20px; /* Space between image and text */
  align-self: center;
  border: solid;
  border-image: url(../border-image2.png) 30 round;
}

.block {
  display: flex;
  align-items: baseline;

  background-color: rgba(225, 246, 255, 0.8);
  margin: 60px;
  padding: 20px;
  border: solid;
  border-radius: 30px;
    border-color: rgb(215, 244, 255);
    color:rgb(97, 159, 99);
    text-shadow: 2px 2px 4px rgba(251, 204, 229, 0.759) ; /* Add shadow for better visibility */ 
}

.list-container .block{
    flex-direction: column;
}

.blok-container .block{
    flex-direction: row;
}

.list-n-gif{
    display: flex;
    flex-direction: row;
    gap:20px;
    align-items: center;
}

.list-n-gif video{
    border: 10px solid transparent; /* Required for border-image to work */
    border-radius: 10px;
    border-image: url(../border-image2.png) 30 round;
    max-width: 200px;
    height: auto;
}


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

.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 */ 
}

.block a{
    color: rgb(159, 179, 238);
    font-size: 20px;
    text-decoration: none; /* Remove underline */
}

.list-container li {
  flex: 1; /* Allow text to take remaining space */
  min-width: 0; /* Fix flex text overflow */
  font-size: 21px;

  text-decoration: none; /* Remove underline */
  border-image: url(../border-image2.png) 30 round;
}


.list-container li a {
    color:rgb(228, 171, 207);
    text-shadow: 2px 2px 4px rgba(255, 182, 221, 0.759); /* Add shadow for better visibility */
}

.main-content{
  background-image: url(../pink-background.jpg);
    background-size: cover; /* Cover the entire area */
    background-repeat: no-repeat; /* Prevents tiling */
}

.side-column{
    height: 150vh;
}

.blocks-n-pagination{
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers content horizontally */
    width: 100%;
    height: 100%;
    gap: 30px;
}

#pagination button {
  margin: 0 5px;
  padding: 5px 10px;
  cursor: pointer;
  background: #bae4f2;
  width:100px;
  border-radius: 30px;
  border-color: #bae4f2;
  color:rgb(137, 77, 101)
}
#pagination button:hover {
  background: #f2badb;
}