/* --------- VARIABLES ---------*/




@font-face {
  font-family: PCFONT;
  /*src: url("PCFONT/TTF/AcPlus_IBM_VGA_9x16.ttf");*/
  src: url("PCFONT/AcPlus_ToshibaSat_8x14.ttf");
}


:root{

    /*constants*/

    --border-thickness: 2px;
    --shadow-depth: 8px;

    --accent-color-transition-speed: 0.2s;
    --accent-color-transition-delay: 0.3s;
    --fills-color-transition-speed: 0.2s;

    --grey: rgba(128,128,128,0.3);

    --left-column-width: 8;
    --right-column-width: 0; /* closed by default, see open sidebar settings somewhere below */

    --max-page-width: 60;
    --min-page-width: 40; /* not in use */

    /*light mode settings*/
    --accent-color-light: hotpink;
    --secondary-color-light: lime;
    --tertiary-color-light: orange;
    --fills-color-light: white;
    --text-color-light: black;
    --background-color-light: color-mix(in srgb, var(--fills-color-light), grey);
    --shadow-color-light: rgba(0,0,0,0.5);

    /*dark mode settings*/
    --accent-color-dark: teal; /*rgb(120, 0, 255)*/
    --secondary-color-dark: yellow;
    --tertiary-color-dark: hotpink;
    --fills-color-dark: rgb(30,30,30);
    --text-color-dark: white;
    --background-color-dark: black;
    --shadow-color-dark: rgba(222,200,255,.25);

    image-rendering: pixelated;
}


    /*applying color modes
    I did it this way because then color modes can be applied in multiple ways
    and the colors are still defined at a single place.*/


body{
    --accent-color: var(--accent-color-light);
    --secondary-color: var(--secondary-color-light);
    --tertiary-color: var(--tertiary-color-light);
    --fills-color: var(--fills-color-light);
    --text-color: var(--text-color-light);
    --background-color: var(--background-color-light);
    --shadow-color: var(--shadow-color-light);

    --secondary-color-bg: color-mix(in srgb, var(--secondary-color) 30%, var(--fills-color));

    --text-size: 14px;
    --grid-size: 24px;

    --window-sp-factor: 1;


}


body:has(#darkmode:checked){

    --accent-color: var(--accent-color-dark);
    --secondary-color: var(--secondary-color-dark);
    --tertiary-color: var(--tertiary-color-dark);
    --fills-color: var(--fills-color-dark);
    --text-color: var(--text-color-dark);
    --background-color: var(--background-color-dark);
    --shadow-color: var(--shadow-color-dark);

    --secondary-color-bg: color-mix(in srgb, var(--secondary-color) 30%, var(--fills-color));


}


/*  sidebar toggle */

#rightcolumn{
    visibility: hidden;
    opacity: 0.0;
    pointer-events: none;
}



body:has(#sidebar:checked){
    --right-column-width: 12;

    #rightcolumn{
        visibility: visible;
        opacity: 1.0;
        pointer-events: unset;
    }
}



body:has(#gr1:checked){     --text-size: 16px;  --grid-size: 20px;  }
body:has(#gr2:checked){     --text-size: 18px;  --grid-size: 22px;  }
body:has(#gr3:checked){     --text-size: 20px;  --grid-size: 24px;  }
body:has(#gr4:checked){     --text-size: 24px;  --grid-size: 28px;  }
body:has(#gr5:checked){     --text-size: 28px;  --grid-size: 32px;  }


body:has(#sp1:checked){     --window-sp-factor: 0;  }
body:has(#sp2:checked){     --window-sp-factor: 0.5;  }
body:has(#sp3:checked){     --window-sp-factor: 1;  }
body:has(#sp4:checked){     --window-sp-factor: 1.5;  }
body:has(#sp5:checked){     --window-sp-factor: 2;  }


/*------- calculated values -------*/

body{

    --window-spacing: calc(var(--grid-size) * var(--window-sp-factor));

    --grid-size-dbl: calc(var(--grid-size) * 2);
    --grid-size-trpl: calc(var(--grid-size) * 3);
    --grid-size-qpl: calc(var(--grid-size) * 4);

    --grid-size-half: calc(var(--grid-size) / 2);
    --grid-size-fourth: calc(var(--grid-size) / 4);

    background: var(--background-color);

    display: flex;
    flex-direction: column;
    align-items: center;
}



/* --------- PAGE LAYOUT ---------*/

.everything{
    position: absolute;
    top: 0px;
    width: min(100%, calc(var(--max-page-width) * var(--grid-size)) ) ;
    min-width: calc(var(--min-page-width) * var(--grid-size));

    transition: background-color var(--fills-color-transition-speed) steps(2);

    height: 3400px;

    background: url("aqua.gif") 0 0 / calc(var(--grid-size) * 80) calc(var(--grid-size) * 70),
                color-mix(in srgb, var(--accent-color), rgb(20,20,20));
    background-repeat: repeat-y;
    background-blend-mode: overlay;
    transition: background-color var(--fills-color-transition-speed) steps(2);


    outline: solid black 10000px;  /*blacking the rest of the screen */
}

.windowflex{
    display: flex;
    flex-direction: column;
    gap: var(--window-spacing);

    transition: width 0.2s steps(10), opacity 0.01s linear 0.22s;
    padding-bottom: var(--grid-size-qpl);
}


#leftcolumn{
    position: absolute;
    top: var(--window-spacing);
    left: var(--window-spacing);
    width: calc(var(--grid-size) * var(--left-column-width));
}

#middlecolumn{
    position: absolute;
    top: var(--window-spacing);
    left: calc(var(--grid-size) * calc(var(--left-column-width) + calc(var(--window-sp-factor) * 2)));
    width:  round(
            calc(100% - calc( calc( calc( var(--right-column-width) + var(--left-column-width)) + calc(var(--window-sp-factor) * 4)) * var(--grid-size) ) )
            , var(--grid-size-half));
    margin-bottom: var(--grid-size-dbl);
    

}

#rightcolumn{
    position: absolute;
    top: var(--window-spacing);
    left: round(
            calc(100% - calc( calc( var(--right-column-width) + var(--window-sp-factor)) * var(--grid-size) ) )
            , var(--grid-size-half));
    width: calc(var(--grid-size) * var(--right-column-width));
}





/* --------- CURSORS ---------*/


*{
    cursor: url("CURSOR.GIF") 6 12, auto;
    &:active{
        cursor: url("CURSORSM.GIF") 6 6, auto;
    }
}

p:active, pre:active, li:active, mark:active{
    cursor: url("CURSORTXT.GIF") 3 12, auto;
}

a, input:not(:disabled), label:has(input:not(:disabled)), summary, button{
    cursor: url("CURSOR2.GIF") 6 12, auto;
    &:active{
        cursor: url("CURSORSM.GIF") 6 6, auto;
    }
}

/* --------- TEXT STYLES ---------*/


p, a, h1, h2, h3, h4, h5, h6, li, pre, code, label, a, details, summary{
    color: var(--text-color);
    margin: 0;
    
}

p, a, h1, h2, h3, h4, h5, h6, pre, code, menu{
    margin-bottom: var(--grid-size) !important;

    &:last-child{   /*no bottom margin if the element is the last within its box */
        margin-bottom: 0 !important;
    }
    
}

p, li, a, details, summary{
    hyphens: manual;
}

p, a, label, pre, code, li, ::before, ::after, details, summary, button{
    font-family: PCFONT, monospace;
    line-height: var(--grid-size);
    font-size: var(--text-size);
    font-weight: medium;
}


label, summary, summary::marker, li:has(a){
    user-select: none;
    &:hover{
        background-color: var(--grey);
    }
}




h1{
    font-family: sans-serif;
    font-style: italic;
    text-transform: uppercase;
    transform-origin: top left;
    transform: scaleX(75%); 
    font-size: 64px;
    line-height: var(--grid-size-dbl);
    margin-bottom: var(--grid-size-dbl);
    letter-spacing: 5px;

    text-shadow: 6px 0px 0px color-mix(in srgb, var(--accent-color), transparent);
}


p, pre{
    text-align: justify;
    text-justify: inter-word;
}


pre{
    margin: 0;
    white-space: pre-wrap;   
    word-wrap: break-word;  
}




/* --------- bubble help --------- */


[data-bubblehelp]{
    position: relative;
    text-decoration: underline;
    text-decoration-color: var(--tertiary-color);
    transition: text-decoration-color var(--accent-color-transition-speed) steps(2) var(--accent-color-transition-delay);
    text-decoration-thickness: var(--border-thickness);
    text-decoration-style: dashed;



    &:hover{

        
        background: var(--background-color);

        border-color: transparent;
        border-width: calc(calc(var(--grid-size) - var(--text-size)) * 0.9) 0px;
        border-style: solid;
        
        &::after{
            content: attr(data-bubblehelp);
            position: absolute;
            bottom: calc(var(--grid-size) * 0.82);
            right: calc(-2 * var(--grid-size));
            background: var(--text-color);
            color: var(--fills-color);
            min-width: fit-content;
            max-width: calc(30 * var(--grid-size));

            text-align: left;
            box-shadow: var(--grid-size-half) var(--grid-size-half) 0px var(--shadow-color);

            z-index: 100000;
        }
    }
}



a{  /*should be higher priority than bubblehelp */
    text-decoration: underline;
    text-decoration-color: var(--accent-color) !important;
    transition: text-decoration-color var(--accent-color-transition-speed) steps(2) var(--accent-color-transition-delay);
    text-decoration-style: solid !important;
    text-decoration-thickness: var(--border-thickness);

    &:hover{
        text-decoration-style: wavy !important;
    }
}



span.negative{
    background-color: var(--text-color);
    border-color: var(--text-color);
    border-width: calc(calc(var(--grid-size) - var(--text-size)) * 0.9) 0px;
    border-style: solid;
    transition: background-color var(--fills-color-transition-speed) steps(2),
                border-color var(--fills-color-transition-speed) steps(2);
    color: var(--fills-color);
}


span.colortext{
    color: var(--secondary-color);
}

span.colortext2{
    color: var(--tertiary-color);
}

span.date{
    color: var(--shadow-color);
}

mark{    
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    border-width: calc(calc(var(--grid-size) - var(--text-size)) * 0.9) 0px;
    border-style: solid;
    color: var(--fills-color);
}



::selection{
    background-color: var(--accent-color);
    color: var(--fills-color);
    text-decoration-color: var(--fills-color) !important;
    transition: text-decoration-color var(--fills-color-transition-speed) steps(2);

}

.floatright{
    float: right;
    margin-left: var(--grid-size-half);
}


.floatleft{
    float: left;
    margin-right: var(--grid-size-half);
}


/* --------- WINDOW BACKGROUND ---------*/


body{   
    height: 100vh;
}


body .contentbox{
    background-color: var(--fills-color);
}

body:has(#showgrid:checked){ 
    .contentbox{

        background: repeating-linear-gradient(to right, rgba(128, 128, 128, 0.1) 0 2px, transparent 2px var(--grid-size-half)),
                    repeating-linear-gradient(to bottom, rgba(128, 128, 128, 0.1) 0 2px, transparent 2px var(--grid-size)),
        var(--fills-color);
    }
}




/* --------- COMPONENT STYLES ---------*/


button{
    background: unset;
    border: unset;
    border-radius: unset;
    padding: unset;
    margin: unset;

    background-color: var(--fills-color);
    color: var(--text-color);

    outline: 2px solid var(--text-color);
    outline-offset: calc(-1 * var(--grid-size-fourth));

    box-shadow: var(--grid-size-half) var(--grid-size-half) 0px var(--shadow-color);

    height: var(--grid-size-dbl);
    margin-right: var(--grid-size-half);
    margin-bottom: var(--grid-size);
    padding: 0 1.5em;

    &:hover{

        background-color: var(--accent-color);
        outline-color: var(--fills-color);
        color: var(--fills-color);

    }

    &:active:hover{
        box-shadow: none;
        transform: translate(var(--grid-size-half), var(--grid-size-half));
        
    }
}


details details{
    margin-left: 1.5em
}

details flex-v{
    padding-left: 1.5em;
}

details > summary::marker{
    content: '[+] ';
}


details[open] > summary::marker{
    content: '[-] ';
}



summary{
    text-decoration: underline;
    text-decoration-color: var(--accent-color);
    transition: text-decoration-color var(--accent-color-transition-speed) steps(2) var(--accent-color-transition-delay);
    text-decoration-thickness: var(--border-thickness);

}


details.infobox{
    padding: var(--grid-size-half);
    outline: 2px solid var(--secondary-color);
    outline-offset: calc(-1 * var(--grid-size-fourth));
    background-color: var(--secondary-color-bg);
    padding-left: 2.5em;

    summary{
        
        transition: none;
        margin-left: -1.5em;
    }

    *{
        text-decoration-color: var(--secondary-color);
    }
}





menu, ul{
    padding-left: 0;
    margin: 0;
}

li{
    list-style-type: none;
    padding-left: 1.5em;
    position: relative;
    &::before{
        content: "";
        position: absolute;
        height: 1em;
        width: 1em;
        background-color: var(--accent-color);
        transition: background-color var(--accent-color-transition-speed) steps(2) var(--accent-color-transition-delay);
        clip-path: polygon(38% 19%, 44% 19%, 44% 81%, 38% 81%, 38% 19%, 44% 13%, 50% 13%, 50% 19%, 44% 19%, 44% 13%, 44% 81%, 50% 81%, 50% 88%, 44% 88%, 44% 81%, 50% 6%, 56% 6%, 56% 13%, 50% 13%, 50% 6%, 50% 31%, 56% 31%, 56% 38%, 50% 38%, 50% 31%, 50% 56%, 56% 56%, 56% 69%, 50% 69%, 50% 56%, 50% 88%, 56% 88%, 56% 94%, 50% 94%, 50% 88%, 56% 6%, 63% 6%, 63% 13%, 56% 13%, 56% 6%, 56% 31%, 63% 31%, 63% 38%, 56% 38%, 56% 31%, 56% 69%, 63% 69%, 63% 75%, 56% 75%, 56% 69%, 56% 88%, 63% 88%, 63% 94%, 56% 94%, 56% 88%, 63% 6%, 69% 6%, 69% 13%, 63% 13%, 63% 6%, 63% 44%, 69% 44%, 69% 56%, 63% 56%, 63% 44%, 63% 69%, 69% 69%, 69% 75%, 63% 75%, 63% 69%, 63% 88%, 69% 88%, 69% 94%, 63% 94%, 63% 88%, 69% 6%, 75% 6%, 75% 13%, 69% 13%, 69% 6%, 69% 31%, 75% 31%, 75% 38%, 69% 38%, 69% 31%, 69% 69%, 75% 69%, 75% 75%, 69% 75%, 69% 69%, 69% 88%, 75% 88%, 75% 94%, 69% 94%, 69% 88%, 75% 6%, 81% 6%, 81% 13%, 75% 13%, 75% 6%, 75% 31%, 81% 31%, 81% 38%, 75% 38%, 75% 31%, 75% 56%, 81% 56%, 81% 69%, 75% 69%, 75% 56%, 75% 88%, 81% 88%, 81% 94%, 75% 94%, 75% 88%, 81% 13%, 88% 13%, 88% 19%, 81% 19%, 81% 13%, 81% 81%, 88% 81%, 88% 88%, 81% 88%, 81% 81%, 88% 19%, 94% 19%, 94% 81%, 88% 81%, 88% 19%, 88% 19%, 81% 81%, 81% 13%, 75% 88%, 75% 56%, 75% 31%, 75% 6%, 69% 88%, 69% 69%, 69% 31%, 69% 6%, 63% 88%, 63% 69%, 63% 44%, 63% 6%, 56% 88%, 56% 69%, 56% 31%, 56% 6%, 50% 88%, 50% 56%, 50% 31%, 50% 6%, 44% 81%, 44% 13%, 38% 19%);
        left: 0;
        top: 4px;
    }
}

li.sad::before{
    clip-path: polygon(38% 19%, 44% 19%, 44% 81%, 38% 81%, 38% 19%, 44% 13%, 50% 13%, 50% 19%, 44% 19%, 44% 13%, 44% 81%, 50% 81%, 50% 88%, 44% 88%, 44% 81%, 50% 6%, 56% 6%, 56% 13%, 50% 13%, 50% 6%, 50% 31%, 56% 31%, 56% 38%, 50% 38%, 50% 31%, 50% 69%, 56% 69%, 56% 75%, 50% 75%, 50% 69%, 50% 88%, 56% 88%, 56% 94%, 50% 94%, 50% 88%, 56% 6%, 63% 6%, 63% 13%, 56% 13%, 56% 6%, 56% 31%, 63% 31%, 63% 38%, 56% 38%, 56% 31%, 56% 63%, 63% 63%, 63% 69%, 56% 69%, 56% 63%, 56% 88%, 63% 88%, 63% 94%, 56% 94%, 56% 88%, 63% 6%, 69% 6%, 69% 13%, 63% 13%, 63% 6%, 63% 44%, 69% 44%, 69% 56%, 63% 56%, 63% 44%, 63% 63%, 69% 63%, 69% 69%, 63% 69%, 63% 63%, 63% 88%, 69% 88%, 69% 94%, 63% 94%, 63% 88%, 69% 6%, 75% 6%, 75% 13%, 69% 13%, 69% 6%, 69% 31%, 75% 31%, 75% 38%, 69% 38%, 69% 31%, 69% 63%, 75% 63%, 75% 69%, 69% 69%, 69% 63%, 69% 88%, 75% 88%, 75% 94%, 69% 94%, 69% 88%, 75% 6%, 81% 6%, 81% 13%, 75% 13%, 75% 6%, 75% 31%, 81% 31%, 81% 38%, 75% 38%, 75% 31%, 75% 69%, 81% 69%, 81% 75%, 75% 75%, 75% 69%, 75% 88%, 81% 88%, 81% 94%, 75% 94%, 75% 88%, 81% 13%, 88% 13%, 88% 19%, 81% 19%, 81% 13%, 81% 81%, 88% 81%, 88% 88%, 81% 88%, 81% 81%, 88% 19%, 94% 19%, 94% 81%, 88% 81%, 88% 19%, 88% 19%, 81% 81%, 81% 13%, 75% 88%, 75% 69%, 75% 31%, 75% 6%, 69% 88%, 69% 63%, 69% 31%, 69% 6%, 63% 88%, 63% 63%, 63% 44%, 63% 6%, 56% 88%, 56% 63%, 56% 31%, 56% 6%, 50% 88%, 50% 69%, 50% 31%, 50% 6%, 44% 81%, 44% 13%, 38% 19%);
}


img{

    float: right;
}

hr{
    border-width: 0;
    border-top: var(--border-thickness) var(--text-color) solid;
    transition: border-color var(--fills-color-transition-speed) steps(2);
    border-bottom: none;
    margin: calc( var(--grid-size-half) - calc( var(--border-thickness) / 4) ) 0;    
    height: 0;
}




input[type="radio"]{
    appearance: none;

    height: 1em;
    width: 0.5em;
    min-height: 1em;
    min-width: 0.5em;
    margin: 0;
    border-radius: 10px;

    background: radial-gradient(circle at center, var(--grey) 40%, transparent 40%);

    &:active:hover{
        background: var(--accent-color);
    }
   
    &:checked{
        background: radial-gradient(circle at center, var(--accent-color) 40%, transparent 40%);
    }

}





input[type="checkbox"]{

    appearance: none;

    height: 0.5em;
    width: 1em;
    margin: 0.25em 0 0 0 ;
    border-radius: 10px;
    background: radial-gradient(circle at 25% 50%, var(--grey) 25%, transparent 25%);
    transform: translateY(-0.2em);

    &:active:hover{
        background: var(--accent-color);
    }
  
    &:checked{
        background: radial-gradient(circle at 75% 50%, var(--accent-color) 25%, transparent 25%);
    }

    
}



/* --------- CUSTOM ELEMENTS UX ---------*/


flex-h, flex-v{
    display: flex;
    >*{
        display: block;
    }
}

flex-v{  
    flex-direction: column;
    >*{
        max-height: var(--grid-size);
        overflow: hidden;
    }
}

flex-h{  
    flex-direction: row;
    >*{
        flex: 1;
    }
    gap: 5px;
}



.contentbox{
    position: relative;
    box-sizing: border-box;
    padding: var(--grid-size-dbl) var(--grid-size) var(--grid-size) var(--grid-size);
    &.sticky{
        position: fixed;
        width: inherit;
    }
}




.contentbox[data-box-title]::after{
    content: attr(data-box-title);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--grid-size);
    background: transparent;
    color: var(--text-color) ;
    transition: color var(--fills-color-transition-speed) steps(2);
    text-align: center;
    z-index: 1002;
    pointer-events: none;
}


.contentbox[data-ghost-title]::before{
    content: attr(data-ghost-title);
    position: absolute;
    top: 0;
    right: 0;
    width: fit-content;
    height: var(--grid-size);
    color: var(--shadow-color) ;
    transition: color var(--fills-color-transition-speed) steps(2);
    text-align: right;
    z-index: 1001;
    pointer-events: none;
}


.contentbox label.minimize{
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--accent-color);
    input{
        visibility: hidden;
    }
}

.contentbox:has(label.minimize input:checked){
    max-height: var(--grid-size);
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
}

.contentbox:has(label.minimize:hover) label.minimize{
    transition: none;
    background-color: var(--secondary-color);
    
}






.contentbox{
    box-shadow: var(--grid-size-half) var(--grid-size-half) 0px var(--shadow-color);
    outline: 2px solid var(--text-color);
    outline-offset: calc(-1 * var(--grid-size-fourth));
    transition: outline-color var(--fills-color-transition-speed) steps(2);
}



div.checkmark{
    display: inline-block;
    height: 1em;
    width: 1em;
    background-color: var(--accent-color);
    transition: background-color var(--accent-color-transition-speed) steps(2) var(--accent-color-transition-delay);
    clip-path: polygon(25% 56%, 31% 56%, 31% 63%, 25% 63%, 25% 56%, 31% 50%, 38% 50%, 38% 69%, 31% 69%, 31% 50%, 38% 56%, 44% 56%, 44% 75%, 38% 75%, 38% 56%, 44% 63%, 50% 63%, 50% 81%, 44% 81%, 44% 63%, 50% 69%, 56% 69%, 56% 88%, 50% 88%, 50% 69%, 56% 63%, 63% 63%, 63% 88%, 56% 88%, 56% 63%, 63% 50%, 69% 50%, 69% 75%, 63% 75%, 63% 50%, 69% 38%, 75% 38%, 75% 63%, 69% 63%, 69% 38%, 75% 25%, 81% 25%, 81% 50%, 75% 50%, 75% 25%, 81% 13%, 88% 13%, 88% 38%, 81% 38%, 81% 13%, 88% 13%, 94% 13%, 94% 25%, 88% 25%, 88% 13%, 88% 13%, 81% 13%, 75% 25%, 69% 38%, 63% 50%, 56% 63%, 50% 69%, 44% 63%, 38% 56%, 31% 50%, 25% 56%);
}





[hidden]{
    display: none;
}




/* --------- special characters --------- */


char{
    width: 1em;
    height: 0px;
    display: inline-block;
    position: relative;

    &::after{
        content: '';
        width: 1em;
        height: 1em;
        position: absolute;
        bottom: calc(1em * -0.2);
        left: 0;

        background-color: var(--tertiary-color);
        clip-path: polygon(19% 19%, 25% 19%, 25% 81%, 19% 81%, 19% 19%, 25% 13%, 31% 13%, 31% 19%, 25% 19%, 25% 13%, 25% 81%, 31% 81%, 31% 88%, 25% 88%, 25% 81%, 31% 6%, 38% 6%, 38% 13%, 31% 13%, 31% 6%, 31% 31%, 38% 31%, 38% 38%, 31% 38%, 31% 31%, 31% 69%, 38% 69%, 38% 75%, 31% 75%, 31% 69%, 31% 88%, 38% 88%, 38% 94%, 31% 94%, 31% 88%, 38% 6%, 44% 6%, 44% 13%, 38% 13%, 38% 6%, 38% 31%, 44% 31%, 44% 38%, 38% 38%, 38% 31%, 38% 63%, 44% 63%, 44% 69%, 38% 69%, 38% 63%, 38% 88%, 44% 88%, 44% 94%, 38% 94%, 38% 88%, 44% 6%, 50% 6%, 50% 13%, 44% 13%, 44% 6%, 44% 44%, 50% 44%, 50% 56%, 44% 56%, 44% 44%, 44% 63%, 50% 63%, 50% 69%, 44% 69%, 44% 63%, 44% 88%, 50% 88%, 50% 94%, 44% 94%, 44% 88%, 50% 6%, 56% 6%, 56% 13%, 50% 13%, 50% 6%, 50% 31%, 56% 31%, 56% 38%, 50% 38%, 50% 31%, 50% 63%, 56% 63%, 56% 69%, 50% 69%, 50% 63%, 50% 88%, 56% 88%, 56% 94%, 50% 94%, 50% 88%, 56% 6%, 63% 6%, 63% 13%, 56% 13%, 56% 6%, 56% 31%, 63% 31%, 63% 38%, 56% 38%, 56% 31%, 56% 69%, 63% 69%, 63% 75%, 56% 75%, 56% 69%, 56% 88%, 63% 88%, 63% 94%, 56% 94%, 56% 88%, 63% 13%, 69% 13%, 69% 19%, 63% 19%, 63% 13%, 63% 81%, 69% 81%, 69% 88%, 63% 88%, 63% 81%, 69% 19%, 75% 19%, 75% 81%, 69% 81%, 69% 19%, 69% 19%, 63% 81%, 63% 13%, 56% 88%, 56% 69%, 56% 31%, 56% 6%, 50% 88%, 50% 63%, 50% 31%, 50% 6%, 44% 88%, 44% 63%, 44% 44%, 44% 6%, 38% 88%, 38% 63%, 38% 31%, 38% 6%, 31% 88%, 31% 69%, 31% 31%, 31% 6%, 25% 81%, 25% 13%, 19% 19%);
    }


    &[smile]::after{

        clip-path: polygon(19% 19%, 25% 19%, 25% 81%, 19% 81%, 19% 19%, 25% 13%, 31% 13%, 31% 19%, 25% 19%, 25% 13%, 25% 81%, 31% 81%, 31% 88%, 25% 88%, 25% 81%, 31% 6%, 38% 6%, 38% 13%, 31% 13%, 31% 6%, 31% 31%, 38% 31%, 38% 38%, 31% 38%, 31% 31%, 31% 56%, 38% 56%, 38% 69%, 31% 69%, 31% 56%, 31% 88%, 38% 88%, 38% 94%, 31% 94%, 31% 88%, 38% 6%, 44% 6%, 44% 13%, 38% 13%, 38% 6%, 38% 31%, 44% 31%, 44% 38%, 38% 38%, 38% 31%, 38% 69%, 44% 69%, 44% 75%, 38% 75%, 38% 69%, 38% 88%, 44% 88%, 44% 94%, 38% 94%, 38% 88%, 44% 6%, 50% 6%, 50% 13%, 44% 13%, 44% 6%, 44% 44%, 50% 44%, 50% 56%, 44% 56%, 44% 44%, 44% 69%, 50% 69%, 50% 75%, 44% 75%, 44% 69%, 44% 88%, 50% 88%, 50% 94%, 44% 94%, 44% 88%, 50% 6%, 56% 6%, 56% 13%, 50% 13%, 50% 6%, 50% 31%, 56% 31%, 56% 38%, 50% 38%, 50% 31%, 50% 69%, 56% 69%, 56% 75%, 50% 75%, 50% 69%, 50% 88%, 56% 88%, 56% 94%, 50% 94%, 50% 88%, 56% 6%, 63% 6%, 63% 13%, 56% 13%, 56% 6%, 56% 31%, 63% 31%, 63% 38%, 56% 38%, 56% 31%, 56% 56%, 63% 56%, 63% 69%, 56% 69%, 56% 56%, 56% 88%, 63% 88%, 63% 94%, 56% 94%, 56% 88%, 63% 13%, 69% 13%, 69% 19%, 63% 19%, 63% 13%, 63% 81%, 69% 81%, 69% 88%, 63% 88%, 63% 81%, 69% 19%, 75% 19%, 75% 81%, 69% 81%, 69% 19%, 69% 19%, 63% 81%, 63% 13%, 56% 88%, 56% 56%, 56% 31%, 56% 6%, 50% 88%, 50% 69%, 50% 31%, 50% 6%, 44% 88%, 44% 69%, 44% 44%, 44% 6%, 38% 88%, 38% 69%, 38% 31%, 38% 6%, 31% 88%, 31% 56%, 31% 31%, 31% 6%, 25% 81%, 25% 13%, 19% 19%);
    }


    &[sparkle]::after{

        clip-path: polygon(13% 44%, 19% 44%, 19% 50%, 13% 50%, 13% 44%, 19% 44%, 25% 44%, 25% 50%, 19% 50%, 19% 44%, 25% 38%, 31% 38%, 31% 56%, 25% 56%, 25% 38%, 31% 31%, 38% 31%, 38% 63%, 31% 63%, 31% 31%, 38% 19%, 44% 19%, 44% 75%, 38% 75%, 38% 19%, 44% 31%, 50% 31%, 50% 63%, 44% 63%, 44% 31%, 50% 38%, 56% 38%, 56% 56%, 50% 56%, 50% 38%, 56% 44%, 63% 44%, 63% 50%, 56% 50%, 56% 44%, 56% 75%, 63% 75%, 63% 81%, 56% 81%, 56% 75%, 63% 13%, 69% 13%, 69% 19%, 63% 19%, 63% 13%, 63% 44%, 69% 44%, 69% 50%, 63% 50%, 63% 44%, 63% 69%, 69% 69%, 69% 88%, 63% 88%, 63% 69%, 69% 6%, 75% 6%, 75% 25%, 69% 25%, 69% 6%, 69% 75%, 75% 75%, 75% 81%, 69% 81%, 69% 75%, 75% 13%, 81% 13%, 81% 19%, 75% 19%, 75% 13%, 75% 13%, 69% 75%, 69% 6%, 63% 69%, 63% 44%, 63% 13%, 56% 75%, 56% 44%, 50% 38%, 44% 31%, 38% 19%, 31% 31%, 25% 38%, 19% 44%, 13% 44%);
    }


    &[minidisc]::after{

        clip-path: polygon(6% 6%, 94% 6%, 94% 13%, 6% 13%, 6% 6%, 6% 13%, 31% 13%, 31% 19%, 6% 19%, 6% 13%, 69% 13%, 94% 13%, 94% 19%, 69% 19%, 69% 13%, 6% 19%, 25% 19%, 25% 25%, 6% 25%, 6% 19%, 75% 19%, 94% 19%, 94% 25%, 75% 25%, 75% 19%, 6% 25%, 19% 25%, 19% 31%, 6% 31%, 6% 25%, 81% 25%, 94% 25%, 94% 31%, 81% 31%, 81% 25%, 6% 31%, 13% 31%, 13% 38%, 6% 38%, 6% 31%, 88% 31%, 94% 31%, 94% 38%, 88% 38%, 88% 31%, 6% 38%, 13% 38%, 13% 44%, 6% 44%, 6% 38%, 44% 38%, 94% 38%, 94% 44%, 44% 44%, 44% 38%, 6% 44%, 13% 44%, 13% 50%, 6% 50%, 6% 44%, 38% 44%, 44% 44%, 44% 50%, 38% 50%, 38% 44%, 56% 44%, 94% 44%, 94% 50%, 56% 50%, 56% 44%, 6% 50%, 13% 50%, 13% 56%, 6% 56%, 6% 50%, 38% 50%, 44% 50%, 44% 56%, 38% 56%, 38% 50%, 56% 50%, 94% 50%, 94% 56%, 56% 56%, 56% 50%, 6% 56%, 13% 56%, 13% 63%, 6% 63%, 6% 56%, 44% 56%, 94% 56%, 94% 63%, 44% 63%, 44% 56%, 6% 63%, 13% 63%, 13% 69%, 6% 69%, 6% 63%, 56% 63%, 63% 63%, 63% 69%, 56% 69%, 56% 63%, 88% 63%, 94% 63%, 94% 69%, 88% 69%, 88% 63%, 6% 69%, 19% 69%, 19% 75%, 6% 75%, 6% 69%, 56% 69%, 63% 69%, 63% 75%, 56% 75%, 56% 69%, 88% 69%, 94% 69%, 94% 75%, 88% 75%, 88% 69%, 6% 75%, 25% 75%, 25% 81%, 6% 81%, 6% 75%, 56% 75%, 94% 75%, 94% 81%, 56% 81%, 56% 75%, 6% 81%, 31% 81%, 31% 88%, 6% 88%, 6% 81%, 69% 81%, 94% 81%, 94% 88%, 69% 88%, 69% 81%, 6% 88%, 94% 88%, 94% 94%, 6% 94%, 6% 88%, 6% 88%, 69% 81%, 6% 81%, 56% 75%, 6% 75%, 88% 69%, 56% 69%, 6% 69%, 88% 63%, 56% 63%, 6% 63%, 44% 56%, 6% 56%, 56% 50%, 38% 50%, 6% 50%, 56% 44%, 38% 44%, 6% 44%, 44% 38%, 6% 38%, 88% 31%, 6% 31%, 81% 25%, 6% 25%, 75% 19%, 6% 19%, 69% 13%, 6% 13%, 6% 6%)
    }



}