#comments h2 { margin-top: 80px; position: relative; }
#comments h2::before { content: ""; display: block; position: absolute; width: 100px; height: 5px; background: black; top: -35px; left: -58px; }

#comments .comments__list h2 { margin-top: 16px; }

.js-comment { padding-bottom: 30px; max-width: var(--maxwidth);  margin: 0 auto 30px; }
.js-comment footer { background-color: white; }

.comment_author { display: flex; gap: 16px; z-index: 1; }
.comment_author img { flex: 0 0 60px; height: 60px; margin: 0 0 0 24px; padding: 2px; border: 1px solid #999; background: white; position: relative; top: 4px; }
.comment_author p { font-size: 2rem; line-height: 2.4rem; margin-bottom: 10px; }
.comment__website { margin-left: 16px; }
.comment__website svg { width: 1.6rem; height: 1.6rem; }

.comment_content { border: 1px solid #999; padding: 24px; margin-top: -4px; margin-bottom: 8px; }
.comment_content ul, .comment_content ol { margin-left: 24px; }
.comment__hints { color: #999; margin-bottom: 48px; }

.comment_links { list-style: none; display: flex; gap: 20px; justify-content: flex-end; }
.comment_links a { display: block; width: 32px; height: 32px; border: 1px solid white; padding: 0 7px; }
.comment_links a:hover, .comment_links a:focus { border: 1px solid #666; }
.comment_links svg { width: 16px; height: 16px; }

#comment-form { max-width: var(--maxwidth); margin: 0 auto 30px; }

/* details + summary */
details { position: relative; }
summary { position: relative; list-style: none; padding: 25px 0 20px 48px; }
summary:hover { cursor: pointer; }
details[open] summary { padding: 25px 0 35px 48px; }
summary::-webkit-details-marker,
details > summary::marker { display: none; }
/* Next two lines just address a Chrome/Linux bug */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

.accordion__plus, .accordion__minus { display: block; width: 28px; height: 28px; position: absolute; top: 114px; left: 0px; transition: opacity 0.3s, transform 0.3s; padding: 5px; border: 1px solid white; }
.comments__list .accordion__plus, .comments__list .accordion__minus { top: 50px; }
.accordion__minus { opacity: 0; transform: rotate(90deg); }
details[open] .accordion__plus { opacity: 0; transform: rotate(-90deg); }
details[open] .accordion__minus { opacity: 1.0; transform: rotate(0deg); }

summary:hover .accordion__plus, 
summary:focus .accordion__plus, 
summary:hover .accordion__minus,
summary:focus .accordion__minus { border: 1px solid black; border-radius: 20px; background: black; }
summary:hover .accordion__plus polygon, 
summary:focus .accordion__plus polygon { fill: white; }
summary:hover .accordion__minus rect, 
summary:focus .accordion__minus rect { fill: white; }