:root {
    /* overlay color + opacity + blur amount */
    --overlay-toggle: flex;                         /* flex = click to enter | none = no click to enter */
    --overlay-color: #000000;                      /* #color */
    --overlay-opacity: 60%;                          /* 0% to 100% */
    --overlay-blur: 10px;                            /* 0px to 50px | 50% = 25px */

    /* overlay text color + glow */
    --overlay-text: #ffffff;                       /* #color */

    /* text selection color + background */
    --selected-text: #C18be0;                       /* #color */
    --selected-text-background: #C18be0;          /* #color */
    --selected-text-background-opacity: 10%;         /* 0% to 100% */

    /* background color (if there is no background provided) */
    --background-color: #000000;                   /* #color */

    /* main container color + opacity + blur amount + shadow color + shadow opacity */
    --maincontainer-color: #111111;                /* #color */
    --maincontainer-opacity: 65%;                    /* 0% to 100% */
    --maincontainer-blur: 5px;                      /* 0px to 50px | 50% = 25px */
    --maincontainer-shadow-color: #000000;         /* #color */
    --maincontainer-shadow-opacity: 50%;            /* 0% to 100% */

    /* profile picture shadow color + opacity */
    --profilepicture-shadow-color: #ffffff;        /* #color */
    --profilepicture-shadow-opacity: 50%;            /* 0% to 100% */

    /* username color */
    --username-color: #ffffff;                     /* #color */

    /* vanity badges color + glow */
    --badge-color: #C18be0;                        /* #color */

    /* custom badges glow color */
    --custombadge-glow-color: #C18be0;             /* #color */

    /* bio container color + opacity + blur amount + shadow color + shadow opacity */
    --biocontainer-color: #161616;                 /* #color */
    --biocontainer-opacity: 20%;                     /* 0% to 100% */
    --biocontainer-blur: 5px;                       /* 0px to 50px | 50% = 25px */
    --biocontainer-shadow-color: #000000;          /* #color */
    --biocontainer-shadow-opacity: 50%;             /* 0% to 100% */

    /* bio text color */
    --bio-color: #ffffff;                          /* #color */

    /* separation lines color + opacity + shadow color + shadow opacity */
    --separation-color: #0a0a0a;                  /* #color */
    --separation-opacity: 60%;                      /* 0% to 100% */
    --separation-shadow-color: #000000;           /* #color */
    --separation-shadow-opacity: 50%;              /* 0% to 100% */

    /* social boxes color + opacity + shadow color + shadow opacity */
    --social-color: #0a0a0a;                      /* #color */
    --social-opacity: 60%;                          /* 0% to 100% */
    --social-blur: 5px;                            /* 0px to 50px | 50% = 25px */
    --social-shadow-color: #000000;               /* #color */
    --social-shadow-opacity: 50%;                  /* 0% to 100% */

    /* social logos color + hover color + hover shadow color */
    --logo-color: #424242;                        /* #color */
    --hover-color: #380466;                       /* #color */
    --hover-shadow-color: #380466;                /* #color */
    --hover-shadow-opacity: 100%;                   /* 0% to 100% */
    
    /* volume slider color */
    --volumeslider-color: #C18be0;                /* #color */

    /* username effects */
    --breathing-color: #ffffff;                   /* #color */
    --pulsing-color: #C18be0;                     /* #color */
}