/* Card Hover Effects */
.card {
    transition: all 0.3s ease; /* Smooth transition for all properties */
}

.card:hover {
    transform: translateY(-5px); /* Slight lift effect on hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06); /* Soft shadow for hover effect */
}

/* Increase Font Size on Card Hover */
.card-body .display-4 {
    transition: all 0.3s ease; /* Smooth transition for scaling */
}

.card:hover .card-body .display-4 {
    transform: scale(1.1); /* Slightly increase font size on hover */
}

/* Footer Styling */
.footer {
    background-color: #5F61E8; /* Background color for footer */
    color: #fff; /* White text color */
    padding: 20px 0; /* Vertical padding for spacing */
}

.footer p {
    margin-bottom: 0; /* Remove margin from the bottom of footer paragraphs */
}

/* Article Styling */
article {
    margin-bottom: 3rem; /* Space below each article */
    position: relative; /* Allow for positioning of pseudo-elements */
}

/* Clear floats within articles */
article:before, article:after {
    content: "";
    display: table;
}

article:after {
    clear: both; /* Ensure content below clears floats */
}

/* Positioning first section to the right */
article section:first-of-type {
    float: right;
    width: 100%;
}

/* Hide last section by default */
article section:last-of-type {
    display: none;
    visibility: hidden;
}


/* Stijl voor de tekst in de textarea */
#comment {
    color: #333333; /* Donkere tekstkleur */
    background-color: #ffffff; /* Witte achtergrond */
    border: 1px solid #ccc; /* Lichte randkleur */
}

/* Stijl voor de placeholder tekst */
#comment::placeholder {
    color: #555555; /* Donkerder dan de standaardkleur */
}