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


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

    flex: 1; /* Allow text to take remaining space */
    min-width: 0; /* Fix flex text overflow */
    font-size: 30px;
    text-shadow: 2px 2px 4px rgba(255, 158, 210, 0.759); /* Add shadow for better visibility */
    text-decoration: none; /* Remove underline */
    border-image: url(border-image.png) 30 round;
}

.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;
  align-content: center;
  gap: 20px; /* Adds space between flex items */
  overflow-y: auto; /* Allows vertical scrolling if content overflows */
}

.main-content{
    display: flex;
    flex-direction: row;
    align-items: center; /* Centers content horizontally */
    background-image: url(blue-background.png);
    background-size: cover; /* Cover the entire area */
    background-repeat: no-repeat; /* Prevents tiling */

}

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

.list-container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    gap: 20px; /* Adds space between flex items */

}

.gif-block video{
  width: 150px; /* Adjust as needed */
  height: auto; /* Maintain aspect ratio */
}

.gif-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.364);
  color: rgb(106, 69, 84); /* text color */
  border: solid;
  border-radius: 6px;
  border-image: url(border-image.png) 30 round;
  gap: 5px; /* Space between elements */
}



li a {
    color:rgb(97, 133, 159);
    text-shadow: 2px 2px 4px rgba(255, 146, 204, 0.759); /* Add shadow for better visibility */
}

.side-column {
    height:55vmax;
}

.gif-n-list-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap:7vh;
}

.gif-n-list-container .gif-block{
  align-items: center;
  display: flex;
  flex-direction: row;
  width: 80%;
}

.gif-n-list-container .gif-block video{
  width: 400px;
  height: 170px;
}