/* #region common */
*{
    font-family: "Mochiy Pop One",'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-color);
    paint-order: stroke fill;
    -webkit-text-stroke: 5px var(--text-shadow);
    --emoji-shadow: var(--text-shadow) 0px 0px 5px; 
    
}
*::selection {
  background: var(--panel-color-shadow);
  color: var(--text-color);
}

:root{
    --bg-size: 120px;

    --panel-color-base: #a652bc;
    --panel-color-border: #913ca8;
    --panel-color-shadow: #8938A6;

    --background-light: #24043d;
    --background-dark: #1d0231;


    --text-color: #ead8dc;
    --text-shadow: var(--panel-color-shadow)
}
.base{
    background: var(--panel-color-base);
    border-radius: 48px;
    border: 8px solid var(--panel-color-border);
    &.BLUE{
        background: #5369cc;
        border: 8px solid #3d53b8;
        -webkit-text-stroke: 5px #3450b2;
    }
    &.GREEN{
        background: #198a34;
        border: 8px solid #02741d;
        -webkit-text-stroke: 5px #007015;
    }
    &.ORANGE{
        background: #c55540;
        border: 8px solid #b13f2a;
        -webkit-text-stroke: 5px #ae3a29;
    }
    &.PURPLE{
        background: #9756c5;
        border: 8px solid #8240b1;
        -webkit-text-stroke: 5px #793cae;
    }
}

.shadow{
    box-shadow: 0 11px 0 -3px var(--panel-color-shadow);
    &.BLUE{
        box-shadow: 0 11px 0 -3px #3450b2;
    }
    &.GREEN{
        box-shadow: 0 11px 0 -3px #007015;
    }
    &.ORANGE{
        box-shadow: 0 11px 0 -3px #ae3a29;
    }
    &.PURPLE{
        box-shadow: 0 11px 0 -3px #793cae;
    }
}

.inverted-base{
    background: var(--panel-color-border);
    border-radius: 48px;
    border: 8px solid var(--panel-color-base);
}


/* #endregion */

/* #region background */
body{
    background-color: var(--background-dark);
    background-size: var(--bg-size) var(--bg-size);
    background-image: linear-gradient(
        /* #region bg color */
        to bottom right,
        var(--background-dark) 12.5%,
        var(--background-light) 12.5%,
        var(--background-light) 37.5%,
        var(--background-dark) 37.5%,
        var(--background-dark) 62.5%,
        var(--background-light) 62.5%,
        var(--background-light) 87.5%,
        var(--background-dark) 87.5%
        /* #endregion */
    );
    animation: scroll 2s infinite linear;
}
/* #endregion */

@keyframes scroll {
    from {
        background-position-x: var(--bg-size);
    }
    to {
        background-position-x: 0;
    }
}