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

.link-list-element{
    display: flex;
    justify-content: center; /* Centers text horizontally */
    width: 100%;
    background-color: rgba(205, 243, 255, 0.8);  /* using rgba is clearer */
    padding: 4px 8px;       /* optional: to give it some space around the text */
    border-radius: 4px;     /* optional: rounded corners */
    border: solid;
    border-width: 2px;
    list-style: none; /* remove default list styling */
    text-align: center;

}

.link-list-element:hover {
    background-color: rgba(255, 222, 241, 0.8); /* Change background color on hover */
}

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


.list-container ul {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  padding-left: 0; /* Remove default <ul> padding */
  margin: 15%; /* Remove default margins */
}

.list-container{
  width: 100%;
}

.text-block img{
  width: 100px; /* Adjust as needed */
  height: 100px; /* Maintain aspect ratio */
  margin-right: 20px; /* Space between image and text */
}

.text-block {
  display: flex;
  flex-direction: column;
  background-color: rgba(225, 246, 255, 0.8);

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

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

.text-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-background2.png);
    background-size: cover; /* Cover the entire area */
    background-repeat: no-repeat; /* Prevents tiling */
}


#csvTableContainer table {
  width: 90%;
  margin: 20px auto;
  border-collapse: collapse;
  background-color: rgba(255, 255, 255, 0.7); /* soft white with transparency */
  font-size: 16px;
  border: 2px solid #f7b2cb;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

#csvTableContainer th,
#csvTableContainer td {
  border: 1px solid #b2def7;
  padding: 10px 12px;
  text-align: left;
}

#csvTableContainer th {
  background-color: #fce0ec;
  color: #77495d;
  font-weight: bold;
}

#csvTableContainer tr:nth-child(even) {
  background-color: #ffe9f5;
}

#csvTableContainer tr:hover {
  background-color: #ffd8eb;
  transition: 0.2s;
}