:root {
    --purple-bg-text: 18, 17, 23;
    --purple-bg2-text: 45, 43, 58;
    --purple-fg-text: 106,101,137;
    --purple-ml-text: 150, 141, 199;
    --purple-hl-text: 198,194,253;
    --purple-sh-text: 117,68,196;
    --blue-accent-text: 104,179,221;
    --purple-font-text: 255, 255, 255;

    --purple-background: rgb(18, 17, 23);
    --purple-background2: rgb(45, 43, 58);
    --purple-foreground: rgb(106,101,137);
    --purple-midlight: rgb(150, 141, 199);
    --purple-highlight: rgb(198,194,253);
    --purple-shadow: rgb(117,68,196);
    --blue-accent: rgb(104,179,221);
    --purple-font: rgb(255, 255, 255);

    --blue-bg-text: 9, 16, 21;
    --blue-bg2-text: 37, 64, 85;
    --blue-fg-text: 15, 78, 114;
    --blue-ml-text: 69, 121, 152;
    --blue-hl-text: 104,179,221;
    --blue-sh-text: 32, 87, 226;
    --purple-accent-text: 198,194,253;
    --blue-font-text: 230, 227, 225;
    
    --blue-background: rgb(9, 16, 21);
    --blue-background2: rgb(37, 64, 85);
    --blue-foreground: rgb(15, 78, 114);
    --blue-midlight: rgb(69, 121, 152);
    --blue-highlight: rgb(104,179,221);
    --blue-shadow: rgb(32, 87, 226);
    --purple-accent: rgb(198,194,253);
    --blue-font: rgb(230, 227, 225);

    --red-bg-text: 21, 9, 13;
    --red-bg2-text: 63, 26, 38;
    --red-fg-text: 114, 15, 60;
    --red-ml-text: 152, 69, 105;
    --red-hl-text: 221, 104, 151;
    --red-sh-text: 226, 32, 55;
    --yellow-accent-text: 253, 238, 194;
    --red-font-text: 243, 231, 217;

    --red-background: rgb(21, 9, 13);
    --red-background2: rgb(63, 26, 38);
    --red-foreground: rgb(114, 15, 60);
    --red-midlight: rgb(152, 69, 105);
    --red-highlight: rgb(221, 104, 151);
    --red-shadow: rgb(226, 32, 55);
    --yellow-accent: rgb(253, 238, 194);
    --red-font: rgb(243, 231, 217);

    --yellow-bg-text: 21, 21, 9;
    --yellow-bg2-text: 71, 71, 30;
    --yellow-fg-text: 111, 114, 15;
    --yellow-ml-text: 152, 152, 69;
    --yellow-hl-text: 253, 238, 194;
    --yellow-sh-text: 213, 226, 32;
    --red-accent-text: 221, 104, 151;
    --yellow-font-text: 255, 248, 248;

    --yellow-background: rgb(21, 21, 9);
    --yellow-background2: rgb(71, 71, 30);
    --yellow-foreground: rgb(111, 114, 15);
    --yellow-midlight: rgb(152, 152, 69);
    --yellow-highlight: rgba(253, 238, 194);
    --yellow-shadow: rgb(213, 226, 32);
    --red-accent: rgb(221, 104, 151);
    --yellow-font: rgb(255, 248, 248);
    
    --radial-gradient: radial-gradient( rgba(var(--purple-ml-text), 0.5) 0%, rgba(var(--purple-hl-text), 0.3) 30%, rgba(var(--purple-bg-text), 0.5) );

    box-sizing: border-box;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    background-color: var(--purple-background);
    color: var(--purple-font);
}
.body {
    padding: 0;
    height: 100vh;
    width: 100vw;
    background-image: var(--radial-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
}
#developer-icon {
    display: block;
    background: url("https://www.dgwebllc.com/img/icon/ico.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 65px;
    width: 65px;
    position: absolute;
    top: 20px;
    left: 20px;
}
#site-title {
    padding: 1.25em;
    display: block;
    font-size: 2em;
}
dg-bubble {
    background-image: var(--radial-gradient);
}