.comment { margin: 0 auto; padding: 3em 2em; max-width: 960px; }  .comments-wrap { position: relative; margin: 0 auto; max-width: 1170px; }  .comments-wrap h3 { margin: 0; padding: 0 1em; font-size: var(--font-size-xxl); font-weight: normal; color: var(--color-comments-tips); }  .comments-wrap .counting { text-align: right; }  .comment-list { margin: 0; padding-left: 32px; }  .comment-list>.comment-body { list-style: none; margin-top: 3em; padding-left: 48px; }  .comment-author { height: 32px; }  .comment-author span { position: absolute; left: 0; width: 32px; height: 32px; opacity: .7; }  .comment-author span:hover { opacity: 1; }  .comment-children .comment-author .avatar { display: none; }  .comment-author span img { border-radius: 50%; -webkit-transform: scale(.98); -moz-transform: scale(.98); -ms-transform: scale(.98); -o-transform: scale(.98); transform: scale(.98); }  .comment-author .fn { font-size: var(--font-size-l); line-height: 32px; font-style: normal; color: var(--color-comments-author); }  .comment-author .fn a { color: var(--color-comments-author); }  .comment-author .fn a:hover { color: var(--color-comments-author-hover); line-height: 32px; }  .comment-meta { margin-top: 0.5em; font-size: var(--font-size-s); } .comment-meta, .comment-meta a { color: var(--color-comments-meta); }  .comment-meta a:hover { color: var(--color-comments-meta-hover); margin-top: 0.5em; }  .comment-awaiting-moderation { margin-left: 1em; color: var(--color-comments-awaiting); }  .comment-content { display: inline-block; margin-top: 1em; padding: 1em 2em; font-size: var(--font-size-xl); line-height: 1.4; color: var(--color-comments-content); word-break: break-all; background-color: var(--color-comments-content-background); border-radius: 0.25em 2em 2em 2em; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }  .comment-content:hover { color: var(--color-comments-content-hover); line-height: 1.4; background-color: var(--color-comments-content-background-hover); }  .comment-body .comment-children { margin: 0; padding: 0; }  .comment-body .comment-children li { padding-left: 10px; border-left: 0.01em solid var(--color-comments-content-boder); }  .comments-wrap .cancelreply, .comments-wrap .logout { margin: 1em auto; padding-left: 2em; }  .comments-wrap .cancelreply a, .comments-wrap .logout a { font-size: var(--font-size-l); color: var(--color-comments-tips); }  .comments-wrap .cancelreply a:hover, .comments-wrap .logout a:hover { margin: 1em auto; color: var(--color-comments-tips-hover); }  .comment-body .comment-reply { margin: 0.5em 0; }  .comment-body .comment-reply a { font-size: var(--font-size-m); color: var(--color-comments-tips); }  .comment-body .comment-reply a:hover { color: var(--color-comments-tips-hover); }  .comments-wrap .respond { margin-top: 3em; }  .respond form { padding: 1em 0; }  .comments-wrap .closing { margin: 5em auto 2em auto; text-align: center; }  input[type="email"], input[type="text"], input[type="url"], button[type="submit"], textarea { padding: 1em; width: calc(100% - 2em); height: 2em; font-family: sans-serif; font-size: var(--font-size-xl); line-height: 1.4; color: var(--color-comments-input); background-color: var(--color-comments-input-background); border-radius: 5px; border: 0; outline: none !important; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }  input[type="email"]:focus, input[type="text"]:focus, input[type="url"]:focus, button[type="submit"]:focus, textarea:focus { color: var(--color-comments-input-focus); border: none; background-color: var(--color-comments-input-background-focus); }  #response button { width: 100%; height: 4em; color: var(--color-comments-button); }  #response button:hover { color: var(--color-comments-button-hover); background-color: var(--color-comments-button-background-hover); cursor: pointer; }  #response textarea { height: 5em; }  fieldset { border: 0; margin: 1em 0; padding: 0; }  .grid-url, .grid-text { float: left; margin: 1em 0.5em 0 0.5em; width: calc(100% - 1em); }  .grid-author, .grid-mail { float: left; margin: 1em 0.5em 0 0.5em; width: calc(50% - 1em); }  .grid-submit { float: left; margin: 1em 0.5em 0 0.5em; width: calc(100% - 1em); }  @media screen and (max-width: 640px) {  .comments-wrap h3 { padding-left: 32px; }  .comment-list>.comment-body { padding-left: 32px; }  }  @media screen and (max-width: 480px) {  :root { --font-size-s:		0.8em; --font-size-m:		1.0em; --font-size-l:		1.2em; --font-size-xl:		1.4em; --font-size-xxl:	1.6em; }  .comment { padding: 3em 1em 1em 1em; }  .comments-wrap h3 { padding-left: 16px; }  .comment-list>.comment-body { padding-left: 16px; }  .comment-body .comment-children ol { padding-left: 8px; }  .comment-body .comment-children li { padding-left: 8px; }  .grid-author, .grid-mail { width: calc(100% - 1em); }  }  @media screen and (max-width: 320px) {  .comment { padding: 3em 0.5em 0.5em 0.5em; }  .comments-wrap h3 { padding-left: 8px; }  .comment-list>.comment-body { padding-left: 8px; }  .comment-body .comment-children ol { padding-left: 4px; }  .comment-body .comment-children li { padding-left: 4px; }  }