* {
    box-sizing: border-box; /* Make padding and border part of the element's total width and height */
}

#watchlistContainer {
    overflow-x: auto; /* Enable horizontal scrolling */
    scroll-behavior: smooth; /* Smooth scrolling effect */
    padding: 10px; /* Optional padding */
    width: 100%; /* Full width of the parent container */
    white-space: nowrap; /* Prevent wrapping in the container */
}

.watchlist-anime-card {
    position: relative; /* Positioning for absolute elements inside */
    display: inline-block; /* Make the cards inline */  
    width: 150px; /* Set a fixed width for cards */
    margin-right: 10px; /* Space between cards */
    border: 1px solid #ccc; /* Optional border */
    border-radius: 5px; /* Optional rounded corners */
    height: 150px;
}

.watchlist-anime-card img {
    width: 100%; /* Make image fill the card */
    height: 100%; /* Fixed height for uniformity */
    object-fit: cover; /* Maintain aspect ratio and fill the space */
    display: block; /* Remove bottom space from image */
}

.watchlist-anime-card h3 {
    position: absolute; /* Position title absolutely */
    top: 10px; /* Distance from the top */
    left: 10px; /* Align with the left */
    margin: 0; /* Remove margin */
    color: white; /* Text color */
    overflow: hidden; /* Hide overflow for title */
    text-overflow: ellipsis; /* Ellipsis for overflow text */
    white-space:nowrap; /* Prevent wrapping */
    z-index: 2; /* Ensure text is above the image */
    background-color: rgba(0, 0, 0, 0.553);
    font-size: 0.8rem;
    border-radius: 10px;
    text-align: center;
    width: 100px;
}

.watchlist-anime-card h3:hover{
    white-space:initial; 
    cursor: pointer;
}


.watchlist-anime-card a {
    position: absolute; /* Position continue button absolutely */
    bottom: 10px; /* Distance from the bottom */
    left: 10px; /* Align with the left */
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    color: white; /* Text color */
    padding: 5px 10px; /* Padding for buttons */
    border: none; /* Remove border */
    border-radius: 3px; /* Rounded corners */
    cursor: pointer; /* Pointer on hover */
    transition: background-color 0.3s; /* Smooth background transition */
    z-index: 2; /* Ensure button is above the image */
    border-radius: 100px;
}

.watchlist-anime-card button {
    position: absolute; /* Position delete icon absolutely */
    bottom: 10px; /* Distance from the bottom */
    right: 10px; /* Align with the right */
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    color: white; /* Text color */
    border: none; /* Remove border */
    border-radius: 3px; /* Rounded corners */
    cursor: pointer; /* Pointer on hover */
    transition: background-color 0.3s; /* Smooth background transition */
    z-index: 2; /* Ensure button is above the image */
}

.watchlist-anime-card a:hover,
.watchlist-anime-card button:hover {
    background-color: rgba(0, 0, 0, 0.9); /* Darker on hover */
}


.watchlist{
    width: 100%;
    margin: 0;
    margin-bottom: 10px;
    font-size: 2em;
    color: white;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    margin-left : 10px;
    box-shadow : 0 4px 10px rgb(0, 0, 0); /* Adds depth with a shadow */
    background-color: rgba(26, 163, 194, 0.133);
    border-radius: 50px;
    text-align: center;
    margin-top: 10px;
}