#sporocila {
    text-align: center; /* Aligns the content to the left */
    margin: 0; /* Removes any extra margin */
    padding: 0; /* Removes any extra padding */
}

.sporocilo, #dodaj_sporocilo {
    position: relative; /* Ensure the pseudo-element is positioned relative to this element */
    padding: 10px; /* Space between content and border */
    margin: 3px; /* Space outside the element */
    display: inline-block; /* Shrinks the div to fit the text content */
    min-width: 30%; /* Sets the minimum width */
    max-width: 100%; /* Ensures it doesn't exceed the container width */
    border-radius: 10px; /* Rounds the corners */
    z-index: 1; /* Ensure the content is above the pseudo-element */
}

.sporocilo::before, #dodaj_sporocilo::before {
    content: ""; /* Required for pseudo-elements */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 10px; /* Match the border-radius of the parent */
    padding: 2px; /* Thickness of the gradient border */
    background: linear-gradient(
        to right,
        red,
        orange,
        yellow,
        green,
        blue,
        indigo,
        violet
    ); /* Gradient border */
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0); /* Mask to create the border effect */
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out; /* Ensures the inner part is transparent */
    mask-composite: exclude;
    z-index: -1; /* Place the pseudo-element behind the content */
}

.sporocilo {
    word-wrap: break-word; /* Ensures long words break to fit within the div */
    background-color: #ebb7e9; /* Optional: Adds a white background color */

}

.sporocilo .date {
    font-size: 0.9em; /* Make the date slightly smaller */
    color: gray; /* Use a lighter color for the date */
    padding-top: 15px;
}

ul, li {
    list-style-type: none;
    padding: 0;
}

.annon {
    color: green;
    font-family: cursive;
    font-weight: bold;
    font-size: small;
}

textarea, input[type="text"] {
    width: 100%; /* Makes the input take the full width of its container */
    font-size: 1.2em; /* Increases the font size for better readability */
    padding: 10px; /* Adds space inside the input */
    margin: 10px 0; /* Adds space above and below the input */
    border: 2px solid #ccc; /* Adds a border */
    border-radius: 5px; /* Optional: Rounds the corners */
    box-sizing: border-box; /* Ensures padding is included in the width */
}

textarea {
    height: 150px; /* Makes the textarea taller */
    resize: vertical; /* Allows users to resize the textarea vertically */
}