:root {

    --a1: #8CC2D0;
    /*--a2: #FCBBC1;*/
    --a2: #ec949d;

    --b1: #3d2c3e;



    --fg: #1e1321;
    --bg: #eeeeee;

    --h1-color: #90caf9;
    --h1-gradient: var(--h1-color), #80deea, #80cbc4;
    --h2-color: #ce93d8;
    --h2-gradient: var(--h2-color), #b39ddb, #f8bbd0;
    --h5-color: #ef5350;
    --h5-gradient: var(--h5-color), #e57373, #f06292;
    --h6-color: #ffa726;
    --h6-gradient: var(--h6-color), #ffb74d, #ffcc80;
    --h3-color: #ffd54f;
    --h3-gradient: var(--h3-color), #ffd54f, #ffe082;
    --h4-color: #a5d6a7;
    --h4-gradient: var(--h4-color), #aed581, #e6ee9c;


    font-size: large;
    font-family: 'Inter', 'Times New Roman';
    --bold-modifier: 300;
}


/** Gradient Headers **/

/* Fix formatting symbol colors */
.cm-formatting-header {
    color: inherit;
}

/* Add text-clipped background gradients */
.cm-header:not(.cm-formatting),
:is(h1, h2, h3, h4, h5, h6, .inline-title) {
    background: linear-gradient(to right, var(--gradient-header));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: fit-content;

    position: relative;
}

/* Apply the gradient variables */
.cm-header-1,
h1 {
    --gradient-header: var(--h1-gradient);
}

.cm-header-2,
h2 {
    --gradient-header: var(--h2-gradient);
}

.cm-header-3,
h3 {
    --gradient-header: var(--h3-gradient);
}

.cm-header-4,
h4 {
    --gradient-header: var(--h4-gradient);
}

.cm-header-5,
h5 {
    --gradient-header: var(--h5-gradient);
}

.cm-header-6,
h6 {
    --gradient-header: var(--h6-gradient);
}

.inline-title {
    --gradient-header: var(--h6-gradient);
}

/* For Fancy Text */

.bold {
    color: var(--a1);
}
.italic {
    color: var(--a2);
}

.italic.bold {
    color:#1e1321
}


body {
    background-color: var(--b1);
    color: var(--fg);

    height: 1000px;
}

.center {
    width: 100%;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 50px;
}

.grid {
    position: relative;

    width: 30%;

    display: grid;
    align-self: center;

    grid-template-columns: repeat(5, 1fr);

    gap: 40px;
}


.title {
    --title-border-px: 15px;

    position: relative;

    width: 100%;
    height: 100%;


    background-color: transparent;
    border: transparent;
    aspect-ratio: 1;

    border-radius: 10px;
}

.title-border {
    /* Normal border */
    &::before {
        top: 0px;
        left: 0px;

        content: "";
        position: absolute;

        width: 100%;
        height: 100%;

        outline: var(--title-border-px) solid var(--a1);
        border-radius: inherit;
    }
}

.title-topbar {
    
}

.special-title {
    background-color: #b3d3ed;

    /* Cartrige border */
    &::before {
        content: "";
        position: absolute;

        width: 120%;
        height: 120%;

        top: -10%;
        left: -7.5%;

        background-color: green;

        z-index: -1;
        mask: url("src/lib/assets/mask/temp.png");
        mask-size: 100% 100%;
        mask-mode: luminance;

    }
    
}

.cursor {
    position: absolute;
    display: block;

    top: 0;
    bottom: 0;


    border: 10px solid red;
    border-radius: 30px;

    /* TODO make dynamic */
    width: 10px;
    height: 10px;

    z-index: 2;

    inset: -30px;

    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!--%20Created%20with%20Inkscape%20(http://www.inkscape.org/)%20--%3e%3csvg%20width='100mm'%20height='100mm'%20viewBox='0%200%20100%2099.999997'%20version='1.1'%20id='svg5'%20inkscape:version='1.1.2%20(0a00cf5339,%202022-02-04)'%20sodipodi:docname='drawing.svg'%20xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape'%20xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:svg='http://www.w3.org/2000/svg'%3e%3csodipodi:namedview%20id='namedview7'%20pagecolor='%23ffffff'%20bordercolor='%23666666'%20borderopacity='1.0'%20inkscape:pageshadow='2'%20inkscape:pageopacity='0.0'%20inkscape:pagecheckerboard='0'%20inkscape:document-units='mm'%20showgrid='false'%20inkscape:zoom='1.5518659'%20inkscape:cx='244.54433'%20inkscape:cy='194.92664'%20inkscape:window-width='1888'%20inkscape:window-height='1000'%20inkscape:window-x='16'%20inkscape:window-y='64'%20inkscape:window-maximized='0'%20inkscape:current-layer='layer1'%20units='mm'%20fit-margin-top='0'%20fit-margin-left='0'%20fit-margin-right='0'%20fit-margin-bottom='0'%20/%3e%3cdefs%20id='defs2'%20/%3e%3cg%20inkscape:label='Layer%201'%20inkscape:groupmode='layer'%20id='layer1'%20transform='translate(-39.725029,-49.272678)'%3e%3crect%20style='fill:%23000000;stroke-width:0.264583'%20id='rect554'%20width='30.177383'%20height='30.177383'%20x='109.79793'%20y='119.43083'%20/%3e%3crect%20style='fill:%23000000;stroke-width:0.264583'%20id='rect556'%20width='4.4328356'%20height='0.68197471'%20x='120.19804'%20y='127.78502'%20/%3e%3crect%20style='fill:%23000000;stroke-width:0.264583'%20id='rect638'%20width='30.177383'%20height='30.177383'%20x='39.725021'%20y='119.43083'%20/%3e%3crect%20style='fill:%23000000;stroke-width:0.264583'%20id='rect640'%20width='30.177383'%20height='30.177383'%20x='109.62744'%20y='49.187431'%20/%3e%3crect%20style='fill:%23000000;stroke-width:0.264583'%20id='rect642'%20width='30.177383'%20height='30.177383'%20x='39.554527'%20y='49.187431'%20/%3e%3c/g%3e%3c/svg%3e");
    mask-size: 100%;
    
    transition: transform linear 0.1s;

    pointer-events: none;
}


/* The header for friends and online */
.top-header {
    position: relative;

    height: 100px;
    width: 30%;

    display: grid;
    align-self: center;

    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.top-app {
    position: relative;

    /* Temporary color */
    background-color: red;

    aspect-ratio: 1;
}

.info-side-bar {
    background-color: var(--bg);
    width: 100%;

    border-radius: 4px;
    padding: 40px 20px 10px 10px;
}
    button.svelte-1b6jnno {
        background-size: 100%;
    }