:root {
    /* old default: #171A1D; */
    /* new default: #131415; */
    /* red: #2e1313;*/
    /* green: #171e08;*/
    /* cyan: #012724;*/
    /* purple: #1d1635;*/
    --main: #131415;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: hsl(from var(--main) h s calc(l * 1));
    color: hsl(from var(--main) h s calc(l * 12));
    overflow: hidden;
}

*{
    box-sizing: border-box;

    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: hsl(from var(--main) h s calc(l * 3)) transparent;
    font-family: 'Roboto', sans-serif;
    overflow-anchor: none;
}

 a {
    color: hsl(from var(--main) h s calc(l * 12));
    font-style: italic;
}

.message-container .content:hover{
    background-color: hsl(from var(--main) h s calc(l * 2.25))
}

/* Main Server Chat */
#header,
#serverlist {
    background: var(--main);
}

#context-menu{
    background: hsl(from var(--main) h s calc(l * 1) / 60%);
}

.audio-player{
    /* multi color gradient !!!!! */
    background: linear-gradient(90deg, hsl(from var(--main) h s calc(l * 2.25)), hsl(from var(--main) h s calc(l * 3)), hsl(from var(--main) h s calc(l * 2.75)) );
    border: 2px solid  hsl(from var(--main) h s calc(l * 1.9))
}

#content-container,
#channelname-bar {
    background-color: hsl(from var(--main) h s calc(l * 1.9));
}
#channeltree ul.participants li:hover {
    background-color: hsl(from var(--main) h s calc(l * 2));
}
#channeltree ul.participants li:not(:hover) {
    background-color: transparent;
}

#infolist,
.systemAnnouncementChat,
#channellist {
    background-color: hsl(from var(--main) h s calc(l * 1.61));
}

#profile-qa {
    background-color: hsl(from var(--main) h s calc(l * 1.3));
}

.editor-container,
.ql-container,
.ql-editor{
    background-color: hsl(from var(--main) h s calc(l * 1.5));
}

.ql-editor * {
    cursor: text !important;
}

.ql-toolbar{
    background-color: hsl(from var(--main) h calc(s * 0.5) calc(l * 3));
}

.activeUserEntry{
    background-color: hsl(from var(--main) h s calc(l * 1.5));
}

#emoji-box-header-container, .emoji-box-header {
    background-color: hsl(from var(--main) h s calc(l * 2.5));
}

#emoji-box-container{
    background-color: hsl(from var(--main) h s calc(l * 2));
    border: 2px solid hsl(from var(--main) h s calc(l * 2));
    box-shadow: 4px 4px 14px 0.5px hsl(from var(--main) h s calc(l * 0.5));
}

.emoji-box-header:hover, .emoji-box-header.SelectedTab{
    background-color: hsl(from var(--main) h s calc(l * 2));
}

/* Server Home Page */
#ticketIdentity option,
.panel,
.homeCard,
.modalCard,
.searchCard {
    background-color: hsl(from var(--main) h s calc(l * 1.7));
}

.statusDot{
    border: 2px solid hsl(from var(--main) h s calc(l * 1.7));
}

#ticketIdentity option {
    border: 2px solid  hsl(from var(--main) h s calc(l * 1.7));
}

body{
    background: linear-gradient(180deg, hsl(from var(--main) h s calc(l * 0.8)), hsl(from var(--main) h s calc(l * 1.4)));
}

.appHeader{
    background-color: hsl(from var(--main) h s calc(l * 1.7));
}

.hero{
    background: hsl(from var(--main) h s calc(l * 1.7)) center/cover no-repeat;
}

blockquote {
    border-left: 3px solid hsl(from var(--main) h s calc(l * 9));
    color: hsl(from var(--main) h s calc(l * 9));
    background-color: hsla(from var(--main) h s calc(l * 6) / 10%);
}

.video-embed {
    /*
        Man i love css sometimes. the following two lines are just
        so amazing to me. works perfectly
     */
    width: 100%;
    max-width: 500px;
    outline: none;
}

.homeDivider{
    border: 1px solid hsl(from var(--main) h s calc(l * 5) / 50%);
}

p.note{
    font-size: 12px;
    color: hsl(from var(--main) h s calc(l * 10));
    font-style: italic;
}

/* msg replies */
.message-container .row.reply .box{
    border-left: 2px solid  hsl(from var(--main) h s calc(l * 8));
    border-top: 2px solid  hsl(from var(--main) h s calc(l * 8));
}

.message-container .row.reply .content:hover{
    background-color: transparent;
}

.message-container .row.reply .content{
    color: hsl(from var(--main) h s calc(l * 10));
}

.message-container .content.highlight{
    background-color: hsl(from var(--main) h s calc(l * 3))
}