.comments-area ul {
    list-style: none;
}

.comment-list {
    margin: 0;
    padding: 0 .5em;
    border-radius: 5px;  
}

.comment.comment.depth-1:first-of-type {
    padding-top: 0;
}

.comment {
    margin: 1.5em 0 0 1.5em;
}

.comment .children {
    border-left: 2px dotted steelblue;
}
    
.comment > div {
    display: flex;
 }

.comment-meta-wrapper {
    margin-bottom: .75em;
}
  
.comment .comment-action-links {
    display: flex;
    gap: 1em;
}

.user-comment > p {
    margin: 0;
}

.comment-author {
    font-weight: bold;
}
.comment-form-comment {
    display: flex;
    flex-direction: column;
    gap: .25em;
}
  
.comment-form input[type="text"]{
    width: max(200px, 50%);
}

.appearance-animation-fade {
    transition: opacity .1s ease-in, height .5s ease-out;
}

.comment-form-hidden {
  opacity: 0;  
  height: 0;
  margin: 0;
} 

.comment-form-hidden input, .comment-form-hidden label, .comment-form-hidden textarea {
    height: 0;
}

.comment-form-visible {
    opacity: 1;
    height: max(25vh, 250px);
    margin: 2em 0;
}

.comment-form-switch {
    font-size: 1.25rem;
}

.comment-form-switch .status {
    font-size: .65em;
    font-weight: lighter;
}

.comment .avatar {
    border-radius: 50%;
    padding: .5em;
    margin-right: .5em;
    margin-left: calc(-32px - .5em - 3px);
    background: white;
}

@media screen and (max-width: 600px) {
    .comment .children {
        border-left: none;
        margin: 0;
        padding: 0;
    }
    
    .comment {
        margin-left: 0;
    }

    .comment.depth-1 {
        margin-left: 32px;
    }
}