<div class="comment-thread">
    <!-- Comment 1 start -->
    <div class="comment" id="comment-1">
        <a href="#comment-1" class="comment-border-link">
            <span class="sr-only">Jump to comment-1</span>
        </a>
        <div class="comment-heading">
            <div class="comment-voting">
                <button type="button">
                    <span aria-hidden="true">&#9650;</span>
                    <span class="sr-only">Vote up</span>
                </button>
                <button type="button">
                    <span aria-hidden="true">&#9660;</span>
                    <span class="sr-only">Vote down</span>
                </button>
            </div>
            <div class="comment-info">
                <a href="#" class="comment-author">someguy14</a>
                <p class="m-0">
                    22 points &bull; 4 days ago
                </p>
            </div>
        </div>

        <div class="comment-body">
            <p>
                This is really great! I fully agree with what you wrote, and this is sure to help me out in the future. Thank you for posting this.
            </p>
            <button type="button">Reply</button>
            <button type="button">Flag</button>
        </div>

        <div class="replies">
            <!-- Comment 2 start -->
            <div class="comment" id="comment-2">
                <a href="#comment-2" class="comment-border-link">
                    <span class="sr-only">Jump to comment-2</span>
                </a>
                <div class="comment-heading">
                    <div class="comment-voting">
                        <button type="button">
                            <span aria-hidden="true">&#9650;</span>
                            <span class="sr-only">Vote up</span>
                        </button>
                        <button type="button">
                            <span aria-hidden="true">&#9660;</span>
                            <span class="sr-only">Vote down</span>
                        </button>
                    </div>
                    <div class="comment-info">
                        <a href="#" class="comment-author">randomperson81</a>
                        <p class="m-0">
                            4 points &bull; 3 days ago
                        </p>
                    </div>
                </div>

                <div class="comment-body">
                    <p>
                        Took the words right out of my mouth!
                    </p>
                    <button type="button">Reply</button>
                    <button type="button">Flag</button>
                </div>
            </div>
            <!-- Comment 2 end -->

            <!-- Comment 3 start -->
            <div class="comment" id="comment-3">
                <a href="#comment-3" class="comment-border-link">
                    <span class="sr-only">Jump to comment-3</span>
                </a>
                <div class="comment-heading">
                    <div class="comment-voting">
                        <button type="button">
                            <span aria-hidden="true">&#9650;</span>
                            <span class="sr-only">Vote up</span>
                        </button>
                        <button type="button">
                            <span aria-hidden="true">&#9660;</span>
                            <span class="sr-only">Vote down</span>
                        </button>
                    </div>
                    <div class="comment-info">
                        <a href="#" class="comment-author">2edgy4u</a>
                        <p class="m-0">
                            -19 points &bull; 3 days ago
                        </p>
                    </div>
                </div>

                <div class="comment-body">
                    <p>
                        Wow, are you serious? You have some pretty low standards to be able to enjoy this. Good for you I guess, but you should honestly stop making these embarrassing comments.
                    </p>
                    <button type="button">Reply</button>
                    <button type="button">Flag</button>
                </div>

                <div class="replies">
                    <!-- Comment 4 start -->
                    <div class="comment" id="comment-4">
                        <a href="#comment-4" class="comment-border-link">
                            <span class="sr-only">Jump to comment-4</span>
                        </a>
                        <div class="comment-heading">
                            <div class="comment-voting">
                                <button type="button">
                                    <span aria-hidden="true">&#9650;</span>
                                    <span class="sr-only">Vote up</span>
                                </button>
                                <button type="button">
                                    <span aria-hidden="true">&#9660;</span>
                                    <span class="sr-only">Vote down</span>
                                </button>
                            </div>
                            <div class="comment-info">
                                <a href="#" class="comment-author">modpowertrip</a>
                                <p class="m-0">
                                    9 points &bull; 2 days ago
                                </p>
                            </div>
                        </div>

                        <div class="comment-body">
                            <p>
                                You are breaking <a href="#rule-687">Rule #687</a> with that comment. Please avoid posting like this in the future, or I will ban you.
                            </p>
                            <button type="button">Reply</button>
                            <button type="button">Flag</button>
                        </div>
                    </div>
                    <!-- Comment 4 end -->

                    <!-- Comment 5 start -->
                    <div class="comment" id="comment-5">
                        <a href="#comment-5" class="comment-border-link">
                            <span class="sr-only">Jump to comment-5</span>
                        </a>
                        <div class="comment-heading">
                            <div class="comment-voting">
                                <button type="button">
                                    <span aria-hidden="true">&#9650;</span>
                                    <span class="sr-only">Vote up</span>
                                </button>
                                <button type="button">
                                    <span aria-hidden="true">&#9660;</span>
                                    <span class="sr-only">Vote down</span>
                                </button>
                            </div>
                            <div class="comment-info">
                                <a href="#" class="comment-author">imemespam</a>
                                <p class="m-0">
                                    3 points &bull; 2 days ago
                                </p>
                            </div>
                        </div>

                        <div class="comment-body">
                            <p>
                                Well, that's just like your opinion man.
                            </p>
                            <button type="button">Reply</button>
                            <button type="button">Flag</button>
                        </div>
                    </div>
                    <!-- Comment 5 end -->

                    <!-- Comment 6 start -->
                    <div class="comment" id="comment-6">
                        <a href="#comment-6" class="comment-border-link">
                            <span class="sr-only">Jump to comment-6</span>
                        </a>
                        <div class="comment-heading">
                            <div class="comment-voting">
                                <button type="button">
                                    <span aria-hidden="true">&#9650;</span>
                                    <span class="sr-only">Vote up</span>
                                </button>
                                <button type="button">
                                    <span aria-hidden="true">&#9660;</span>
                                    <span class="sr-only">Vote down</span>
                                </button>
                            </div>
                            <div class="comment-info">
                                <a href="#" class="comment-author">lukerbro57</a>
                                <p class="m-0">
                                    0 points &bull; 2 days ago
                                </p>
                            </div>
                        </div>

                        <div class="comment-body">
                            <p>
                                Lol I agree with you.
                            </p>
                            <button type="button">Reply</button>
                            <button type="button">Flag</button>
                        </div>
                    </div>
                    <!-- Comment 6 end -->

                    <a href="#load-more">Load more replies</a>
                </div>
            </div>
            <!-- Comment 3 end -->
        </div>
    </div>
    <!-- Comment 1 end -->
</div>

/* 
    Body, button, comment-thread, and utilities

    Notes:
        - This section sets some basic styles. You can ignore this part and 
        go directly to the comment styles.
*/

* {
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1.4;
    color: rgba(0, 0, 0, 0.85);
    background-color: #f9f9f9;

}
button {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    font-size: 14px;
    padding: 4px 8px;
    color: rgba(0, 0, 0, 0.85);
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}
button:hover,
button:focus,
button:active {
    cursor: pointer;
    background-color: #ecf0f1;
}
.comment-thread {
    width: 700px;
    max-width: 100%;
    margin: auto;
    padding: 0 30px;
    background-color: #fff;
    border: 1px solid transparent; /* Removes margin collapse */
}
.m-0 {
    margin: 0;
}
.sr-only {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Comment */

.comment {
    position: relative;
    margin: 20px auto;
}
.comment-heading {
    display: flex;
    align-items: center;
    height: 50px;
    font-size: 14px;
}
.comment-voting {
    width: 20px;
    height: 32px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}
.comment-voting button {
    display: block;
    width: 100%;
    height: 50%;
    padding: 0;
    border: 0;
    font-size: 10px;
}
.comment-info {
    color: rgba(0, 0, 0, 0.5);
    margin-left: 10px;
}
.comment-author {
    color: rgba(0, 0, 0, 0.85);
    font-weight: bold;
    text-decoration: none;
}
.comment-author:hover {
    text-decoration: underline;
}
.replies {
    margin-left: 20px;
}

/* Adjustments for the comment border links */

.comment-border-link {
    display: block;
    position: absolute;
    top: 50px;
    left: 0;
    width: 12px;
    height: calc(100% - 50px);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    background-color: rgba(0, 0, 0, 0.1);
    background-clip: padding-box;
}
.comment-border-link:hover {
    background-color: rgba(0, 0, 0, 0.3);
}
.comment-body {
    padding: 0 20px;
    padding-left: 28px;
}
.replies {
    margin-left: 28px;
}