#comments
{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px 0px;
    margin-top: 50px;
    border-top: 1px solid black;

    position: relative;
    box-sizing: border-box;
}


#comments #comments-list, #comments #respond
{
    width: 100%;
    max-width: 600px;

    position: relative;
    box-sizing: border-box;
}



#comments-list .comments-title
{
    font-size: 30px;
    text-align: center;
    padding: 20px 10px;
    font-weight: bold;
    letter-spacing: 1px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    position: relative;
    box-sizing: border-box;
}

.comment-body
{
    width: 100%;
    padding: 30px 10px 20px 10px;

    position: relative;
    box-sizing: border-box;

    border-bottom: solid 1px rgb(241, 241, 241);
    
}
.children .comment-body
{
    padding: 30px 10px 20px 30px;
}

.comment-body p
{
    padding: 15px 10px 15px 80px;

    position: relative;
    box-sizing: border-box;

    font-size: 14px;
    font-weight: 400;
    color: rgb(19, 19, 19);
}

/* layout */
.comment-body .avatar
{
    width: 50px;
    height: 50px;
    border-radius: 50%;

    filter: drop-shadow(1px 1px 2px rgb(207, 207, 207));
    position: absolute;
    left: 0;
}

.children .comment-body .avatar
{
    width: 40px;
    height: 40px;
}


    .comment-author, .comment-meta
    {
        padding-left: 80px;
        position: relative;
    }

    .comment-author .fn
    {
        font-size: 18px;
        font-weight: 500;

    }

    .comment-meta a
    {
        font-size: 10px;
        color: rgb(87, 87, 87);
        text-decoration: none;

    }

        .comment-meta a.comment-edit-link
        {
            transition: 0.5s;
        }
            .comment-meta a.comment-edit-link:hover
            {
                color: rgb(0, 0, 0);
            }




/* reply */
.reply
{
    display: flex;
    justify-content: end;
}
    .reply a
    {
        color: rgb(201, 2, 2);
        text-decoration: none;
        transition: 0.5s;
    }
        .reply a:hover
        {
            color: rgb(116, 1, 1);
        }







/* comment depth changes */
.depth-2
{

}



/* response section */

.comment-respond
{
    width: 100%;
    height: auto;

    padding: 30px 20px;
    box-sizing: border-box;
    position: relative;
}

.comment-reply-title
{
    font-size: 16px;
    font-weight: 500;

    padding: 5px 0px 20px 0px;
    display: flex;
    gap: 10px 10px;
    width: 100%;
    height: auto;

    position: relative;
    width: 100%;
}
    .comment-reply-title small
    {
        justify-content: end;
        align-items: center;
        display: flex;
        flex-grow: 1;
        height: auto;
        right: 0;
        height: 100%;
    }

    .comment-reply-title small a
    {
        color: red;
        text-decoration: none;
        transition: 0.5s;

        font-size: 12px;
    }
        .comment-reply-title small a:hover
        {
            color: rgb(116, 1, 1);
        }

/* reply form */
#commentform .form-submit
{
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 20px;
    
}
#commentform .form-submit input
{
    background-color: transparent;
    color: black;
    border: solid black 1px;

    padding: 10px 40px;

    transition: 0.5s;
    cursor: pointer;
}

#commentform .form-submit input:hover
{
    background-color: black;
    color: white;
}



.comment-form-comment
{
    display: flex;
    flex-direction: column;
    
}

    .comment-form-comment label
    {
        font-size: 14px;
        color: rgb(26, 26, 26);
        padding: 5px 0px 5px 0px;
    }
    .comment-form-comment textarea
    {
        resize: vertical; 
        max-height: 200px;
    }

    .required
    {
        color: red;
        font-size: 10px;
    }



.required-field-message
{
    width: 100%;
    padding: 10px 0px 0px 0px;
    font-size: 12px;
    color: rgb(49, 49, 49);
    display: block;
}



.comment-awaiting-moderation
{
    font-size: 12px;
    color: red;
    padding: 1px 5px 1px 80px;
}

.logged-in-as
{
    width: 100%;
    font-size: 14px;
    color: black;
}
.logged-in-as a
{
    text-decoration: none;
    font-style: italic;
    transition: 0.4s;
    color: rgb(83, 83, 83);

    font-size: 10px;
    padding: 2px 4px;
}
.logged-in-as a:hover
{
    color: rgb(132, 170, 228);
}

#email-notes
{
    text-align: center;
    width: 100%;
    font-size: 14px;
    color: black;
}

/* form fill ins */
.comment-form-author, .comment-form-email, .comment-form-url
{
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    max-width: 400px;
    margin: auto auto;
}

.comment-form-author label, .comment-form-email label, .comment-form-url label
{
    font-size: 14px;
    color: rgb(14, 14, 14);
    font-weight: 400;
    width: 120px;
    padding-bottom: 5px;
}

/* cookie consent */
.comment-form-cookies-consent
{
    display: flex;
    align-items: center;
    padding: 20px 0px 0px 0px;
    max-width: 400px;
    margin: auto auto;

}
.comment-form-cookies-consent label
{
    font-size: 12px;
    color: rgb(26, 26, 26);
    padding: 0px 0px 0px 5px;
}