@charset "utf-8";

hr {
    height: 32px;
    width: calc(100% - 60px);
    border: none;
    margin: 20px auto;
    position: relative;
}

hr::before {
    background-color: rgb(0, 0, 0);
    position: absolute;
    content: " ";
    left: 50%;
    top: 50%;
    border-radius: 2px;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 2px;
}

html.dark hr::before { background-color: rgb(255, 255, 255); }

hr::after {
    position: absolute;
    content: " ";
    border-radius: 100%;

    background-image: url(../icons/hr.svg);
    background-size: 32px;
    background-repeat: no-repeat;
    background-position: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
}

html.dark hr,
html.dark hr::after,
html.dark hr::before{ filter: invert(100%); }