Personality Scale [Add-on]

<!--
   ╔═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╗
    Thank you for using my code!
   ╚═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╝
Rules to Follow:

✶ Do not EVER delete or remove the credits of the coder or claim this code as your own.
✶ Do not redistribute this code, no matter how much you edited it as a base or otherwise!
✶ If you need any help in fixing codes, contact me on Discord (Kawaii-lau#4770).
✶ If you like to share this code, send to your friends the link of my blog, kawaii-lau.tumblr.com , and support me!

If you like a custom code, check out my blog to see if requests are open!
XOXO, Lauren.
     ╔═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╗
       2020 © Coding by Kawaii-Lau
     ╚═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╝

HOW TO USE:
1.) Insert code anywhere in your code as it is.
2.) Use "Search" (Ctrl + F) and type "margin-left". You'll see that keyword along with a percent number after it (ex. "margin-left:0%")
3.) Change the percent with 0% being the lowest and 100% being the highest, until you get the desired position of the scale.
4.) Do the same for all other scales <3
OPTIONAL: Find :root to change colors of scale and words!
-->

<style>

/* Change Colors */

:root {
    --scale-line:black;
    --anchor:white;
    --text-color:black;
}


/* PERSONA SCALE  */
        .persona {
            width: 65%;
            margin: 0px auto;
            color:var(--text-color);
        }

        .per-scale {
            height: 5px;
            border-top: 3px solid var(--scale-line);
            margin: 10px 0px 30px 0px
        }

        .per-anchor {
            margin-top: -19px;
            width: 10px;
            height: 10px;
            border: 6px double var(--scale-line);
            background-color: var(--anchor);
            border-radius: 100%
        }

        .per-scale .per-before {
            position: relative;
            width:calc(100% + 184px);
            margin: -12px 0px 0px -75px;

        }

        .per-low {
            width:70px;
            text-align:right;
        }

        .per-after {
            float:right;
            margin-top:-18px;
        }

        .per-high {width:100px}


</style>

<div class="persona">
<br>
<!-- PERSONA SCALE #1 -->
<div class="per-scale">
<div class="per-before"><div class="per-low" >Introvert</div>
<div class="per-after"><div class="per-high">Extrovert</div></div></div>

<!-- SOCIAL ENERGY PERSONA SCALE ADJUST -->
<div class="per-anchor" style="margin-left:95%;"></div>
</div>

<!-- PERSONA SCALE #2 -->
<div class="per-scale">
<div class="per-before"><div class="per-low" >Honest</div>
   <div class="per-after"><div class="per-high">Deceptive</div></div></div>

<!-- TRUTHFULNESS PERSONA SCALE ADJUST -->
<div class="per-anchor" style="margin-left:0%;"></div>
</div>

<!-- PERSONA SCALE #3 -->
<div class="per-scale">
<div class="per-before"><div class="per-low">Meek</div>
   <div class="per-after"><div class="per-high">Confident
</div></div></div>

<!-- CONFIDENCE PERSONA SCALE ADJUST -->
<div class="per-anchor" style="margin-left:0%;"></div>
</div>

<!-- PERSONA SCALE #4 -->
<div class="per-scale">
<div class="per-before"><div class="per-low" >Chaste</div>
   <div class="per-after"><div class="per-high">Lustful
</div></div></div>

<!-- ABSTINENCE PERSONA SCALE ADJUST -->
<div class="per-anchor" style="margin-left:0%;"></div>
</div>

<!-- PERSONA SCALE #5 -->
<div class="per-scale">
<div class="per-before"><div class="per-low" >Selfless</div>
   <div class="per-after"><div class="per-high"><div class="per-high">Selfish</div></div></div></div>

<!-- SELFISHNESS PERSONA SCALE ADJUST -->
<div class="per-anchor" style="margin-left:0%;"></div>
</div>

<!-- PERSONA SCALE #6 -->
<div class="per-scale">
<div class="per-before"><div class="per-low" >Humorous</div>
   <div class="per-after"><div class="per-high">Serious</div></div></div>

<!-- SERIOUSNESS PERSONA SCALE ADJUST -->
<div class="per-anchor" style="margin-left:0%;"></div>
</div>

<!-- PERSONA SCALE #7 -->
<div class="per-scale">
<div class="per-before"><div class="per-low" >Logical</div>
   <div class="per-after"><div class="per-high">Irrational
</div></div></div>

<!-- ANALYTICAL PERSONA SCALE ADJUST -->
<div class="per-anchor" style="margin-left:0%;"></div>
</div>

<!-- PERSONA SCALE #8 -->
<div class="per-scale">
<div class="per-before"><div class="per-low" >Creative</div>
   <div class="per-after"><div class="per-high">Critical
</div></div></div>

<!-- CREATIVITY PERSONA SCALE ADJUST -->
<div class="per-anchor" style="margin-left:0%;"></div>
</div>

<!-- PERSONA SCALE #9 -->
<div class="per-scale">
<div class="per-before"><div class="per-low" >Optimist</div>
   <div class="per-after"><div class="per-high">Pessimist
</div></div></div>

<!-- OUTLOOK PERSONA SCALE ADJUST -->
<div class="per-anchor" style="margin-left:0%;"></div>
</div>

<!-- PERSONA SCALE #10 -->
<div class="per-scale">
<div class="per-before"><div class="per-low" >Patient</div>
   <div class="per-after"><div class="per-high">Short-tempered</div></div></div>

<!-- PATIENCE PERSONA SCALE ADJUST -->
<div class="per-anchor" style="margin-left:0%;"></div>
</div>

          <!-- END OF PERSONA // DO NOT REMOVE CREDITS!!-->
  <div style="text-align:center;font-size:10px;margin-top:-20px">2021 &copy; Coding by <a href="https://kawaii-lau.tumblr.com" style="color:inherit;text-decoration:none;">Kawaii-Lau</a></div>
          </div>