.expand{
    --xy-padding: 14px; /* Re-usable properties declarations */
    --border-radius: 15px;
    --transition-ms: 0.4s;

    margin: 1em 0;
    font-size: 20px;
    font-family: 'Times New Roman', Times, serif;
}
.expand:hover{
    color: gold;
}
.expandable--open .expand_content-wrapper{
    grid-template-rows: 0fr; /* When the toggle bar is closed */
}

.expand_title_bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--xy-padding); /* This is a css property that allows us to use this padding across other sections in this css file so therefore it is reusable */
    user-select: none;
    background-color: #084202;
    color: lemonchiffon;
    border-radius: var(--border-radius); /* This is a css property that allows us to use this border radius across other sections in this css file */
    cursor: pointer;
}
.expand_title{
    font-weight: bold;
}

.comments_content{
    padding: 0 var(--xy-padding);
    line-height: 1.2;
    font-size: 0.85em;
    border: 1px solid #dddddd;
    border-top: none;
    overflow: hidden;
}
#commentsInput{
    width: 80%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid grey;
    border-radius: 5px;
    font-size: 22px;
}

#submitComment {
    padding: 10px 20px;
    background-color: forestgreen;
    color: lemonchiffon;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 22px;
}
#submitComment:hover{
    color: forestgreen;
    background-color: #084202;
}
.comment { /* the actual comment itself*/
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid grey;
    font-size: 22px;
    margin-bottom: 10px;
}

.comment button.deleteComment {
    background-color: forestgreen;
    border: none;
    padding: 5px 10px;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}
.expand_content-wrapper{
   display: grid;
   grid-template-rows: 1fr;  /* The first way of doing the toggle of the expandable section with css that sets the initial state of the toggle when it is opened */
   transition: grid-template-rows var(--transition-ms) ease-out;
}

/* Media query for mobile devices and tablets */
@media (max-width: 768px) {
    .expand {
        display: block; /* Show expandable sections on mobile devices and tablets */
    }

    .expand--open .expand_content-wrapper {
        grid-template-rows: 0fr; /* Set to closed initial on mobile devices */
    }
}
hr {
    border: 1px solid darkgray; /* Set a visible border color */
    margin: 20px 0; /* Add some margin to ensure it's not hidden by other elements */
    width: 100%; /* Make sure it spans the width of its container */
}