:root {
    --background-color: #1A1A1E;
    font-family: sans-serif;
    color: EAEFEF;
}

body {
    background-color: var(--background-color);
    padding: 0;
    max-width: 800px;
    margin: auto;
    margin-top: 25%
}


.message {
    display: flex;
    align-items: top;
    gap: 12px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 12px
}


.message:hover {
    background-color: #242428
}

.message-solo {
    padding-left: 64px;
    height: fit-content;
    padding-top: 2px;
    padding-bottom: 2px;
}

.message-solo .contents {
    height: fit-content;
    margin: 0;
}

.message-solo:hover {
    background-color: #242428;
}

.mention {
    background-color: #2B251C;
    border-style: solid;
    border-width: 0 0 0 2px;
    border-color: #DC8D00;
}

.mention:hover {
    background-color: #231F1D;
}

.mention .message:hover {
    background-color: #231F1D;
}

.spacer {
    margin-bottom: 10px;
}

img {
    max-width: 40;
    max-height: 40;
    border-radius: 100%;
    display: block;
    margin-bottom: auto;
    cursor: pointer;
}

.cont {
    display: flex;
    flex-direction: column;
    gap: 0px;
    padding: 0;
}

.topcont {
    display: flex;
    column-gap: 8px;
    text-anchor: end;
}

.name {
    font-size: small;
    font-weight: 550;
    margin-top: 4px;
    margin-right: 0;
    height: fit-content;
}

.name:hover {
    text-decoration: underline;
    cursor: pointer
}

.date {
    font-size: xx-small;
    margin-top: 8px;
    margin-bottom: 0;
    margin-left: 0;
    height: fit-content;
    color: #81828a;
    cursor:default;
}

.contents {
    display: flex;
    flex-direction: column;
    row-gap: 4px;
    margin: 0;
    margin-top: -10;
    padding: 0;
}

.contents p {
    font-size: small;
    margin: 0px;
    line-height: 18px
}

.ping {
    background-color: #292c51;
    color: #A9B9EA;
    font-weight: 560;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-radius: 3px;
    cursor: pointer;
}

.ping:hover {
    background-color: #5865F2;
    color: #FEFFFF;
}

.reply-cont {
    max-height: 18px;
    display: flex;
    padding-left: 28px;
    padding-top: 6px;
}

.arrow {
    min-width: 28px;
    height: 10px;
    margin-top: 4px;
    border-style: solid;
    border-width: 2 0 0 2;
    border-color: #474851;
    border-radius: 6px 0;
}

.arrow:hover {
    border-color: #ABACB2;
}

.reply-cont img {
    width: 16px;
    margin-left: 6px;
    margin-right: 3px;
}

.reply-cont p {
    font-size: x-small;
    margin-top: 2px;
    margin-bottom: 0px;
    margin-right: 4px;
    color: #EFEFF1;
    text-wrap-mode: nowrap;
}

.reply-cont .googi {
    color: #4C2C6C;
}




.googi {
    color: blueviolet;
}