: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 * 3) / 60%);
    border: 1.5px solid hsl(from var(--main) h s calc(l * 10) / 20%);
}

.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_content #dm_action{
    color: hsl(from var(--main) h s calc(l * 10) / 100%);
}

#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.ql-blank::before{
    color: hsl(from var(--main) h s calc(l * 8)) !important;
}

.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{
    background-color: hsl(from var(--main) h s calc(l * 2.5));
}

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

#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 * 1)) !important;
}

/* 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: fit-content;
    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;
}

.message-container .meta .timestamp{
    color: hsl(from var(--main) h s calc(l * 12));
}

/* 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 * 12));
}

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

/* inbox */
.headerIcon.inbox .inbox-container{
    background-color: hsl(from var(--main) h s calc(l * 2.5) / 100%);
    border-bottom: 1px solid hsl(from var(--main) h s calc(l * 10) / 20%);
    border-left: 1px solid hsl(from var(--main) h s calc(l * 10) / 20%);
}

.headerIcon.inbox .inbox-container .entry{
    background: linear-gradient(
            90deg,
            hsl(from var(--main) h s calc(l * 1.75) / 80%),
            hsl(from var(--main) h s calc(l * 2) / 100%),
            hsl(from var(--main) h s calc(l * 1.75) / 80%)
    );
}

.headerIcon.inbox .inbox-content .entry .content .headline *{
    color: hsl(from var(--main) h s calc(l * 12) / 100%);
}
.headerIcon.inbox .inbox-content .entry .content .headline .avatar{
    border: 1px solid hsl(from var(--main) h s calc(l * 10) / 40%);
}
.headerIcon.inbox .inbox-content .entry p{
    color: hsl(from var(--main) h s calc(l * 10));
}

#profile_content #dm_action{
    background-color: hsl(from var(--main) h s calc(l * 5));
}

/* json editor */
.json-editor-setting {
    background-color: hsl(from var(--main) h s calc(l * 3));
    padding: 8px;
    border-radius: 6px;
    border: 0.5px solid hsl(from var(--main) h s calc(l * 10) / 20%);
}
.json-editor-setting hr{
    display: none;
}
.json-editor-setting .json-editor-setting-headline{
    color: hsl(from var(--main) h s calc(l * 10) / 100%);
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 4px;
}
.json-editor-setting .json-editor-setting-description{
    color: hsl(from var(--main) h s calc(l * 8) / 100%);
    font-size: 12px;
}

.json-editor-setting input,
.json-editor-setting button{
    outline: none;
    padding: 4px;
    border-radius: 4px;
    background-color: hsl(from var(--main) h s calc(l * 4) / 100%);
    color: hsl(from var(--main) h s calc(l * 10) / 100%);
    border: 2px solid hsl(from var(--main) h s calc(l * 10) / 20%);
    cursor: pointer;
}


/* settings popup helper */
.settings-save-container.shown {
    opacity: 1;
}
.settings-save-container {
    opacity: 0;
    position: absolute;
    z-index: 10;
    width: 80%;
    height: fit-content;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);

    background-color: hsl(from var(--main) h s calc(l * 6) / 40%);
    border: 0.5px solid hsl(from var(--main) h s calc(l * 10) / 20%);
    backdrop-filter: blur(10px);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin: auto;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;

    box-shadow: 0 0 20px 10px hsl(from var(--main) h s calc(l * 6) / 10%);
    font-weight: bold;
    color: hsl(from var(--main) h s calc(l * 10) / 100%);
}

.settings-save-container:hover {
    background-color: hsl(from var(--main) h s calc(l * 6) / 55%);
}