Stor8

<!---
==== Wintry
==== HTML by 8byte
----
==== Colors
---- For easier changes, use Ctrl F and then
---- click the plus icon at the bottom to 
---- replace all.
====
#aac4ff - main accent
#888888 - font
#ffffff - white
#d2daff - borders
--->
<div style="color: #888888;">
  <div class="row no-gutters">
    <div class="col-md-3 p-2 order-md-1 order-2">
      <div class="sticky-top flex-column justify-content-center" style="height: 100vh;">
        <!--- box --->
        <div class="card rounded-0 overflow-hidden p-4" style="border-color: #d2daff; position: relative;">
          <i class="fas fa-snowflake fa-4x" style="color: #aac4ff; position: absolute; top: -.5rem; left: -.5rem; opacity: .3;"></i>
          <i class="fas fa-snowflake fa-2x" style="color: #d2daff; position: absolute; top: 3.5rem; left: -.5rem; opacity: .3;"></i>
          <div style="position: relative; padding: 10px;">
            <!--- decor --->
            <div style="position: absolute; top: 0; left: 0; width: 75%; height: 75%; border: 2px solid #aac4ff;"></div>
            <div style="position: absolute; bottom: 0; right: 0; width: 75%; height: 75%; border: 2px solid #aac4ff;"></div>
            <!--- profile picture --->
            <div style="background-image: url('IMGURL'); background-size: cover; padding-top: 100%; position: relative; z-index: 99; border: 1px solid #d2daff;" class="bg-faded"></div>
          </div>
        </div>
        <!--- divider ---><div class="p-2"></div>
        <div class="p-2" style="border: 2px solid #aac4ff; position: relative;">
          <i class="fas fa-snowflake fa-4x" style="color: #aac4ff; position: absolute; bottom: -.5rem; right: -.5rem; opacity: .3;"></i>
          <i class="fas fa-snowflake fa-2x" style="color: #d2daff; position: absolute; bottom: 3.5rem; right: -.5rem; opacity: .3;"></i>          
          <!--- music box --->
          <div class="card rounded-0 p-3" style="border-color: #d2daff; position: relative;">
            <!--- song info --->
            <h5 class="text-uppercase text-center font-weight-bold mb-0" style="font-family: serif; color: #aac4ff;">Song Title</h5>
            <p class="text-center my-0">song artist(s)</span>
            <!--- divider ---><div class="p-1"></div>
            <!--- music section --->
            <div class="d-flex justify-content-around align-items-center">
              <i class="far fa-backward fa-2x" style="color: #d2daff;"></i>
              <div class="mx-4" style="position: relative;">
                <div class="w-100 h-100" style="position: absolute; top: 0; left: 0; z-index: 101;">
                  <!--- paste youtube code here, only the numbers after the watch?v= in the youtube link --->
                  <iframe class="flex-fill" style="height: 100%; width: 100%; opacity: 0.01;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen src="https://www.youtube.com/embed/YOUTUBECODE?modestbranding=1"></iframe>
                </div>
                <i class="fas fa-play fa-2x" style="color: #aac4ff;"></i>
              </div>
              <i class="far fa-forward fa-2x" style="color: #d2daff;"></i>
            </div>
          </div>
        </div>
        <div class="text-center">
          <small class="text-uppercase font-weight-bold" style="font-family: serif;"><a href="/8byte" style="color: #aac4ff;">code by 8byte</a></small>
        </div>
        <!--- divider ---><div class="d-block d-md-none p-2"></div>
        <!--- mobile only image --->
        <div style="background-image: url('IMGURL'); background-size: cover; border-color: #d2daff;" class="d-block d-md-none flex-fill card bg-faded rounded-0"></div>
      </div>
    </div>
    <div class="col-md-8 p-2 order-md-3 order-3">
      <!--- section ---><div id="ONE"></div>
      <div class="row no-gutters m-n2">
        <div class="col-md-6 p-2">
          <div class="card overflow-hidden rounded-0 p-2" style="border: 1px solid #d2daff; position: relative;">
            <i class="fas fa-snowflake fa-4x" style="color: #aac4ff; position: absolute; bottom: -.5rem; right: -.5rem; opacity: .3;"></i>
            <i class="fas fa-snowflake fa-2x" style="color: #d2daff; position: absolute; bottom: 3.5rem; right: -.5rem; opacity: .3;"></i>    
            <!--- content --->
            <div class="d-flex justify-content-between">
              <strong class="text-uppercase" style="color: #aac4ff; font-family: serif;">Name</strong>
              <span class="font-italic">full name</span>
            </div>
            <!--- content --->
            <div class="d-flex justify-content-between">
              <strong class="text-uppercase" style="color: #aac4ff; font-family: serif;">Age</strong>
              <span class="font-italic">00</span>
            </div>
            <!--- content --->
            <div class="d-flex justify-content-between">
              <strong class="text-uppercase" style="color: #aac4ff; font-family: serif;">Pronouns</strong>
              <span class="font-italic">prn/prn</span>
            </div>
            <!--- content --->
            <div class="d-flex justify-content-between">
              <strong class="text-uppercase" style="color: #aac4ff; font-family: serif;">Sexuality</strong>
              <span class="font-italic">content</span>
            </div>
            <!--- end of content --->
          </div>
        </div>
        <div class="col-md-6 p-2">
          <div class="card overflow-hidden rounded-0 p-2" style="border: 1px solid #d2daff; position: relative;">
            <i class="fas fa-snowflake fa-4x" style="color: #aac4ff; position: absolute; top: -.5rem; left: -.5rem; opacity: .3;"></i>
            <i class="fas fa-snowflake fa-2x" style="color: #d2daff; position: absolute; top: 3.5rem; left: -.5rem; opacity: .3;"></i>
            <!--- content --->
            <div class="d-flex justify-content-between">
              <strong class="text-uppercase" style="color: #aac4ff; font-family: serif;">Species</strong>
              <span class="font-italic">content</span>
            </div>
            <!--- content --->
            <div class="d-flex justify-content-between">
              <strong class="text-uppercase" style="color: #aac4ff; font-family: serif;">Occupation</strong>
              <span class="font-italic">content</span>
            </div>
            <!--- content --->
            <div class="d-flex justify-content-between">
              <strong class="text-uppercase" style="color: #aac4ff; font-family: serif;">Location</strong>
              <span class="font-italic">content</span>
            </div>
            <!--- content --->
            <div class="d-flex justify-content-between">
              <strong class="text-uppercase" style="color: #aac4ff; font-family: serif;">Status</strong>
              <span class="font-italic">content</span>
            </div>
            <!--- end of content --->
          </div>
        </div>
      </div>
      <!--- divider ---><div class="p-2"></div>
      <div class="p-2" style="border: 2px solid #aac4ff; position: relative;">
        <i class="fas fa-snowflake fa-4x" style="color: #aac4ff; position: absolute; bottom: -.5rem; right: -.5rem; opacity: .3;"></i>
        <i class="fas fa-snowflake fa-2x" style="color: #d2daff; position: absolute; bottom: 3.5rem; right: -.5rem; opacity: .3;"></i>
        <div class="card rounded-0 text-center text-uppercase p-md-4 p-3" style="color: #aac4ff; border-color: #d2daff;">
          <h5 class="mb-0">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </h5>
        </div>
      </div>
      <!--- moodboard ---><div class="p-2"></div>
      <div class="row no-gutters m-n2">
        <div class="col-4 p-2">
          <div style="background-image: url('IMGURL'); background-size: cover; height: 75px; border-color: #d2daff;" class="card rounded-0 bg-faded"></div>
        </div>
        <div class="col-4 p-2">
          <div style="background-image: url('IMGURL'); background-size: cover; height: 75px; border-color: #d2daff;" class="card rounded-0 bg-faded"></div>
        </div>
        <div class="col-4 p-2">
          <div style="background-image: url('IMGURL'); background-size: cover; height: 75px; border-color: #d2daff;" class="card rounded-0 bg-faded"></div>
        </div>
      </div>
      <!--- divider ---><div class="p-2"></div>
      <div class="row no-gutters m-n2">
        <div class="col-6 p-2">
          <div class="card rounded-0 p-2 overflow-hidden" style="border-color: #d2daff; position: relative;">
            <i class="fas fa-snowflake fa-4x" style="color: #aac4ff; position: absolute; bottom: -.5rem; left: -.5rem; opacity: .3;"></i>
            <i class="fas fa-snowflake fa-2x" style="color: #d2daff; position: absolute; bottom: 3.5rem; left: -.5rem; opacity: .3;"></i>    
            <h5 class="text-uppercase font-weight-bold" style="font-family: serif;">Likes</h5>
            <ul class="list-unstyled mb-0">
              <!--- likes --->
              <li><i class="far fa-plus mr-2" style="color: #aac4ff; font-size: .7rem;"></i> content</li>
              <li><i class="far fa-plus mr-2" style="color: #aac4ff; font-size: .7rem;"></i> content</li>
              <li><i class="far fa-plus mr-2" style="color: #aac4ff; font-size: .7rem;"></i> content</li>
              <li><i class="far fa-plus mr-2" style="color: #aac4ff; font-size: .7rem;"></i> content</li>
              <li><i class="far fa-plus mr-2" style="color: #aac4ff; font-size: .7rem;"></i> content</li>
            </ul>
          </div>
        </div>
        <div class="col-6 p-2">
          <div class="card rounded-0 p-2 overflow-hidden" style="border-color: #d2daff; position: relative;">
            <i class="fas fa-snowflake fa-4x" style="color: #aac4ff; position: absolute; top: -.5rem; right: -.5rem; opacity: .3;"></i>
            <i class="fas fa-snowflake fa-2x" style="color: #d2daff; position: absolute; top: 3.5rem; right: -.5rem; opacity: .3;"></i> 
            <h5 class="text-uppercase font-weight-bold" style="font-family: serif;">Dislikes</h5>
            <ul class="list-unstyled mb-0">
              <!--- dislikes --->
              <li><i class="far fa-times mr-2" style="color: #aac4ff; font-size: .7rem;"></i> content</li>
              <li><i class="far fa-times mr-2" style="color: #aac4ff; font-size: .7rem;"></i> content</li>
              <li><i class="far fa-times mr-2" style="color: #aac4ff; font-size: .7rem;"></i> content</li>
              <li><i class="far fa-times mr-2" style="color: #aac4ff; font-size: .7rem;"></i> content</li>
              <li><i class="far fa-times mr-2" style="color: #aac4ff; font-size: .7rem;"></i> content</li>
            </ul>
          </div>
        </div>
      </div>
      <!--- divider ---><div class="p-2"></div>
      <!--- section ---><div id="TWO"></div>
      <div class="row no-gutters m-n2">
        <div class="col-md-6 flex-column p-2">
          <h1 class="display-4 text-uppercase" style="font-family: serif; color: #ffffff; text-shadow: 1px 1px #aac4ff, 1px -1px #aac4ff, -1px 1px #aac4ff, -1px -1px #aac4ff; letter-spacing: 1px;">
            personality
          </h1>
          <div class="p-2" style="border: 2px solid #aac4ff; position: relative;">
            <i class="fas fa-snowflake fa-4x" style="color: #aac4ff; position: absolute; bottom: -.5rem; right: -.5rem; opacity: .3;"></i>
            <i class="fas fa-snowflake fa-2x" style="color: #d2daff; position: absolute; bottom: 3.5rem; right: -.5rem; opacity: .3;"></i>
            <div class="card rounded-0 p-2" style="border-color: #d2daff;">
              <p>
                Quisque interdum faucibus nisi. Pellentesque felis urna, dapibus a diam mollis, accumsan malesuada odio. Phasellus sapien arcu, pretium vitae ligula vel, efficitur mollis tortor.</p>
            </div>
          </div>
          <!--- divider ---><div class="p-2"></div>
          <!--- image --->
          <div style="background-image: url('IMGURL'); min-height: 75px; border-color: #d2daff;" class="card rounded-0 bg-faded h-100"></div>
        </div>
        <div class="col-md-6 p-2">
          <div class="card rounded-0 p-2" style="border-color: #d2daff;">
            <!--- stat --->
            <strong class="text-uppercase mb-1" style="font-family: serif; color: #aac4ff;">Stat Name</strong>
            <div class="card rounded-0" style="height: 12px; border-color: #d2daff; position: relative;">
              <!--- change stat width here --->
              <div class="progress-bar" style="width: 30%; background: #aac4ff; position: relative; top: -2px; left: 2px;"></div>
            </div>
            <div class="p-1"></div>
            <!--- stat --->
            <strong class="text-uppercase mb-1" style="font-family: serif; color: #aac4ff;">Stat Name</strong>
            <div class="card rounded-0" style="height: 12px; border-color: #d2daff; position: relative;">
              <!--- change stat width here --->
              <div class="progress-bar" style="width: 30%; background: #aac4ff; position: relative; top: -2px; left: 2px;"></div>
            </div>
            <div class="p-1"></div>
            <!--- stat --->
            <strong class="text-uppercase mb-1" style="font-family: serif; color: #aac4ff;">Stat Name</strong>
            <div class="card rounded-0" style="height: 12px; border-color: #d2daff; position: relative;">
              <!--- change stat width here --->
              <div class="progress-bar" style="width: 30%; background: #aac4ff; position: relative; top: -2px; left: 2px;"></div>
            </div>
            <div class="p-1"></div>
            <!--- stat --->
            <strong class="text-uppercase mb-1" style="font-family: serif; color: #aac4ff;">Stat Name</strong>
            <div class="card rounded-0" style="height: 12px; border-color: #d2daff; position: relative;">
              <!--- change stat width here --->
              <div class="progress-bar" style="width: 30%; background: #aac4ff; position: relative; top: -2px; left: 2px;"></div>
            </div>
            <div class="p-1"></div>
            <!--- stat --->
            <strong class="text-uppercase mb-1" style="font-family: serif; color: #aac4ff;">Stat Name</strong>
            <div class="card rounded-0" style="height: 12px; border-color: #d2daff; position: relative;">
              <!--- change stat width here --->
              <div class="progress-bar" style="width: 30%; background: #aac4ff; position: relative; top: -2px; left: 2px;"></div>
            </div>
            <div class="p-1"></div>
            <!--- stat --->
            <strong class="text-uppercase mb-1" style="font-family: serif; color: #aac4ff;">Stat Name</strong>
            <div class="card rounded-0" style="height: 12px; border-color: #d2daff; position: relative;">
              <!--- change stat width here --->
              <div class="progress-bar" style="width: 30%; background: #aac4ff; position: relative; top: -2px; left: 2px;"></div>
            </div>
            <div class="p-1"></div>
            <!--- end of stats --->
          </div>
        </div>
        <div class="col-md-7 p-2">
          <!--- stats continued --->
          <div class="card rounded-0 p-2" style="border-color: #d2daff;">
            <!--- stat --->
            <strong class="text-uppercase justify-content-between mb-1" style="font-family: serif; color: #aac4ff;">
              <span>Left Side</span>
              <span>Right Side</span>
            </strong>
            <div class="card rounded-0" style="height: 12px; border-color: #d2daff;">
              <!--- change stat width here --->
              <div class="progress-bar" style="width: 30%; background: transparent; border-right: 3px solid #aac4ff;"></div>
            </div>
            <div class="p-1"></div>
            <!--- stat --->
            <strong class="text-uppercase justify-content-between mb-1" style="font-family: serif; color: #aac4ff;">
              <span>Left Side</span>
              <span>Right Side</span>
            </strong>
            <div class="card rounded-0" style="height: 12px; border-color: #d2daff;">
              <!--- change stat width here --->
              <div class="progress-bar" style="width: 30%; background: transparent; border-right: 3px solid #aac4ff;"></div>
            </div>
            <div class="p-1"></div>
            <!--- stat --->
            <strong class="text-uppercase justify-content-between mb-1" style="font-family: serif; color: #aac4ff;">
              <span>Left Side</span>
              <span>Right Side</span>
            </strong>
            <div class="card rounded-0" style="height: 12px; border-color: #d2daff;">
              <!--- change stat width here --->
              <div class="progress-bar" style="width: 30%; background: transparent; border-right: 3px solid #aac4ff;"></div>
            </div>
            <div class="p-1"></div>
            <!--- stat --->
            <strong class="text-uppercase justify-content-between mb-1" style="font-family: serif; color: #aac4ff;">
              <span>Left Side</span>
              <span>Right Side</span>
            </strong>
            <div class="card rounded-0" style="height: 12px; border-color: #d2daff;">
              <!--- change stat width here --->
              <div class="progress-bar" style="width: 30%; background: transparent; border-right: 3px solid #aac4ff;"></div>
            </div>
            <div class="p-1"></div>
            <!--- stat --->
            <strong class="text-uppercase justify-content-between mb-1" style="font-family: serif; color: #aac4ff;">
              <span>Left Side</span>
              <span>Right Side</span>
            </strong>
            <div class="card rounded-0" style="height: 12px; border-color: #d2daff;">
              <!--- change stat width here --->
              <div class="progress-bar" style="width: 30%; background: transparent; border-right: 3px solid #aac4ff;"></div>
            </div>
            <div class="p-1"></div>
            <!--- stat --->
            <strong class="text-uppercase justify-content-between mb-1" style="font-family: serif; color: #aac4ff;">
              <span>Left Side</span>
              <span>Right Side</span>
            </strong>
            <div class="card rounded-0" style="height: 12px; border-color: #d2daff;">
              <!--- change stat width here --->
              <div class="progress-bar" style="width: 30%; background: transparent; border-right: 3px solid #aac4ff;"></div>
            </div>
            <div class="p-1"></div>
            <!--- end of stats --->
          </div>
        </div>
        <div class="col-md-5 p-2">
          <!--- image --->
          <div style="background-image: url('IMGURL'); min-height: 75px; border-color: #d2daff;" class="card rounded-0 bg-faded h-100"></div>
        </div>
      </div>
      <!--- divider ---><div class="p-2"></div>
      <div class="row no-gutters m-n2">
        <div class="col-md-6 p-2">
          <div class="p-2" style="border: 2px solid #aac4ff; position: relative;">
            <i class="fas fa-snowflake fa-4x" style="color: #aac4ff; position: absolute; bottom: -.5rem; right: -.5rem; opacity: .3;"></i>
            <i class="fas fa-snowflake fa-2x" style="color: #d2daff; position: absolute; bottom: 3.5rem; right: -.5rem; opacity: .3;"></i>
            <div class="card d-block rounded-0 p-2" style="border-color: #d2daff;">
              <!--- strengths --->
              <strong class="text-uppercase pull-left mr-2" style="font-family: serif;">Strengths</strong>
              <p>
                Integer ut enim et diam consequat pulvinar. In fringilla mattis congue. Proin sed magna quis mauris aliquam euismod at eu augue. Donec accumsan lacinia hendrerit. Donec ac elit tristique, faucibus tellus at, rhoncus enim. Proin vitae pulvinar lectus. Quisque vulputate enim sit amet mauris accumsan porta.</p>
            </div>
          </div>
          <!--- divider ---><div class="p-2"></div>
          <div class="card d-block rounded-0 p-2 overflow-hidden" style="border-color: #d2daff; position: relative;">
            <i class="fas fa-snowflake fa-4x" style="color: #aac4ff; position: absolute; bottom: -.5rem; left: -.5rem; opacity: .3;"></i>
            <i class="fas fa-snowflake fa-2x" style="color: #d2daff; position: absolute; bottom: 3.5rem; left: -.5rem; opacity: .3;"></i> 
            <!--- hobbies --->
            <strong class="text-uppercase pull-left mr-2" style="font-family: serif;">Hobbies</strong>
            <p>
              Integer ut enim et diam consequat pulvinar. In fringilla mattis congue. Proin sed magna quis mauris aliquam euismod at eu augue. Donec accumsan lacinia hendrerit. Donec ac elit tristique, faucibus tellus at, rhoncus enim. Proin vitae pulvinar lectus. Quisque vulputate enim sit amet mauris accumsan porta.</p>
          </div>
          <!--- divider ---><div class="p-2"></div>
          <div class="p-2" style="border: 2px solid #aac4ff; position: relative;">
            <i class="fas fa-snowflake fa-4x" style="color: #aac4ff; position: absolute; bottom: -.5rem; right: -.5rem; opacity: .3;"></i>
            <i class="fas fa-snowflake fa-2x" style="color: #d2daff; position: absolute; bottom: 3.5rem; right: -.5rem; opacity: .3;"></i>
            <div class="card d-block rounded-0 p-2" style="border-color: #d2daff;">
              <!--- wants --->
              <strong class="text-uppercase pull-left mr-2" style="font-family: serif;">Wants</strong>
              <p>
                Integer ut enim et diam consequat pulvinar. In fringilla mattis congue. Proin sed magna quis mauris aliquam euismod at eu augue. Donec accumsan lacinia hendrerit. Donec ac elit tristique, faucibus tellus at, rhoncus enim. Proin vitae pulvinar lectus. Quisque vulputate enim sit amet mauris accumsan porta.</p>
            </div>
          </div>
          <hr style="border-style: dashed; border-color: #d2daff;" class="d-none d-md-block">
        </div>
        <!--- second column --->
        <div class="col-md-6 p-2">
          <hr style="border-style: dashed; border-color: #d2daff;" class="mt-md-3 mt-0">
          <div class="card d-block rounded-0 p-2 overflow-hidden" style="border-color: #d2daff; position: relative;">
            <i class="fas fa-snowflake fa-4x" style="color: #aac4ff; position: absolute; top: -.5rem; right: -.5rem; opacity: .3;"></i>
            <i class="fas fa-snowflake fa-2x" style="color: #d2daff; position: absolute; top: 3.5rem; right: -.5rem; opacity: .3;"></i> 
            <!--- weaknesses --->
            <strong class="text-uppercase pull-left mr-2" style="font-family: serif;">Weaknesses</strong>
            <p>
              Integer ut enim et diam consequat pulvinar. In fringilla mattis congue. Proin sed magna quis mauris aliquam euismod at eu augue. Donec accumsan lacinia hendrerit. Donec ac elit tristique, faucibus tellus at, rhoncus enim. Proin vitae pulvinar lectus. Quisque vulputate enim sit amet mauris accumsan porta.</p>
          </div>
          <!--- divider ---><div class="p-2"></div>
          <div class="p-2" style="border: 2px solid #aac4ff; position: relative;">
            <i class="fas fa-snowflake fa-4x" style="color: #aac4ff; position: absolute; bottom: -.5rem; left: -.5rem; opacity: .3;"></i>
            <i class="fas fa-snowflake fa-2x" style="color: #d2daff; position: absolute; bottom: 3.5rem; left: -.5rem; opacity: .3;"></i>
            <div class="card d-block rounded-0 p-2" style="border-color: #d2daff;">
              <!--- habits --->
              <strong class="text-uppercase pull-left mr-2" style="font-family: serif;">Habits</strong>
              <p>
                Integer ut enim et diam consequat pulvinar. In fringilla mattis congue. Proin sed magna quis mauris aliquam euismod at eu augue. Donec accumsan lacinia hendrerit. Donec ac elit tristique, faucibus tellus at, rhoncus enim. Proin vitae pulvinar lectus. Quisque vulputate enim sit amet mauris accumsan porta.</p>
            </div>
          </div>
          <!--- divider ---><div class="p-2"></div>
          <div class="card d-block rounded-0 p-2 overflow-hidden" style="border-color: #d2daff; position: relative;">
            <i class="fas fa-snowflake fa-4x" style="color: #aac4ff; position: absolute; top: -.5rem; right: -.5rem; opacity: .3;"></i>
            <i class="fas fa-snowflake fa-2x" style="color: #d2daff; position: absolute; top: 3.5rem; right: -.5rem; opacity: .3;"></i> 
            <!--- fears --->
            <strong class="text-uppercase pull-left mr-2" style="font-family: serif;">Fears</strong>
            <p>
              Integer ut enim et diam consequat pulvinar. In fringilla mattis congue. Proin sed magna quis mauris aliquam euismod at eu augue. Donec accumsan lacinia hendrerit. Donec ac elit tristique, faucibus tellus at, rhoncus enim. Proin vitae pulvinar lectus. Quisque vulputate enim sit amet mauris accumsan porta.</p>
          </div>
          <!--- end of block --->
        </div>
      </div>
      <!--- section ---><div id="THREE"></div>
      <h1 class="display-4 text-uppercase text-center" style="font-family: serif; color: #ffffff; text-shadow: 1px 1px #aac4ff, 1px -1px #aac4ff, -1px 1px #aac4ff, -1px -1px #aac4ff; letter-spacing: 1px;">
        story
      </h1>
      <div class="row no-gutters m-n2">
        <div class="col-md-6 p-2">
          <div class="card d-block rounded-0 p-2" style="border-color: #d2daff;">
            <!--- first letter --->
            <span class="pull-left justify-content-center align-items-center mr-2" style="font-size: 1.3rem; height: 40px; width: 40px; background: #aac4ff; color: #ffffff; font-family: serif;">P</span>
            <p>raesent eget est ac orci ornare congue a ac ligula. Proin pellentesque ante ac orci accumsan, et venenatis sapien luctus. Morbi pulvinar neque blandit eros fermentum, eleifend tristique erat rutrum. Donec lorem tortor, eleifend non sapien id, volutpat ultrices augue. Nam at est ac magna aliquet laoreet. Mauris tortor libero, suscipit at fringilla vitae, imperdiet sed diam. Vivamus id pellentesque sem. Maecenas et tincidunt arcu.</p>
          </div>
          <!--- divider ---><hr style="border-color: #d2daff; border-style: dashed;">
          <div class="card d-block rounded-0 p-2" style="border-color: #d2daff;">
            <!--- first letter --->
            <span class="pull-left justify-content-center align-items-center mr-2" style="font-size: 1.3rem; height: 40px; width: 40px; background: #aac4ff; color: #ffffff; font-family: serif;">M</span>
            <p>aecenas fringilla sed lectus sodales elementum. Mauris porttitor hendrerit metus eu consectetur. Suspendisse iaculis purus id lacinia ornare. Pellentesque vehicula odio enim, ut luctus mi dignissim at. Etiam pellentesque enim ante, a accumsan enim ultrices vel.</p>
            <!--- mini quote --->
            <p class="font-weight-bold text-center text-uppercase mt-n2 mb-1">Vivamus vel libero dignissim.</p>
            <p>Consequat orci non, rhoncus diam. Fusce tristique neque quis nisi consectetur feugiat. Curabitur vulputate dapibus libero. Duis vitae finibus sapien.</p>
          </div>
        </div>
        <div class="col-md-6 p-2">
          <!--- divider ---><hr style="border-color: #d2daff; border-style: dashed;" class="mt-md-3 mt-0">
          <div class="p-2" style="border: 2px solid #aac4ff; position: relative;">
            <i class="fas fa-snowflake fa-4x" style="color: #aac4ff; position: absolute; bottom: -.5rem; right: -.5rem; opacity: .3;"></i>
            <i class="fas fa-snowflake fa-2x" style="color: #d2daff; position: absolute; bottom: 3.5rem; right: -.5rem; opacity: .3;"></i>
            <div class="card rounded-0 text-center text-uppercase p-3" style="color: #aac4ff; border-color: #d2daff;">
              <h5 class="mb-0">
                <!--- quote --->
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              </h5>
            </div>
          </div>
          <!--- divider ---><div class="p-2"></div>
          <div class="card d-block rounded-0 p-2" style="border-color: #d2daff;">
            <!--- first letter --->
            <span class="pull-left justify-content-center align-items-center mr-2" style="font-size: 1.3rem; height: 40px; width: 40px; background: #aac4ff; color: #ffffff; font-family: serif;">V</span>
            <p>estibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec accumsan, diam sit amet tempor feugiat, nulla risus varius eros, et finibus erat tellus id libero. Nulla id tempus tellus. Nam sit amet magna id sem tempus faucibus. Praesent varius et magna vel dictum.</p>
            <p>Fusce nulla leo, pretium quis libero dignissim, sodales euismod lorem. Cras vitae risus elit. Vestibulum at turpis justo. Quisque a dictum turpis, eu commodo diam. Integer sed fermentum mi. Suspendisse malesuada velit nunc, et ultricies magna pretium a. Sed accumsan ex vel lectus placerat dapibus.</p>
          </div>
          <!--- divider ---><hr style="border-color: #d2daff; border-style: dashed;">
        </div>
      </div>
      <!--- divider ---><div class="p-2"></div>
      <!--- section ---><div id="FOUR"></div>
      <div class="row no-gutters m-n2">
        <div class="col-md-7 p-2 order-md-1 order-2">
          <div style="background-image: url('IMGURL'); background-size: cover; border-color: #d2daff; height: 50px;" class="card bg-faded rounded-0 p-2"></div>
        </div>
        <div class="col-md-5 align-items-center p-2 order-md-2 order-1">
          <h1 class="display-4 text-uppercase mb-0" style="font-family: serif; color: #ffffff; text-shadow: 1px 1px #aac4ff, 1px -1px #aac4ff, -1px 1px #aac4ff, -1px -1px #aac4ff; letter-spacing: 1px;">
            appearance
          </h1>
        </div>
      </div>
      <div class="p-2"></div>
      <div class="row no-gutters m-n2">
        <div class="col-12 p-2">
          <!--- appearance basics --->
          <div class="p-2" style="border: 2px solid #aac4ff; position: relative;">
            <i class="fas fa-snowflake fa-4x" style="color: #aac4ff; position: absolute; bottom: -.5rem; right: -.5rem; opacity: .3;"></i>
            <i class="fas fa-snowflake fa-2x" style="color: #d2daff; position: absolute; bottom: 3.5rem; right: -.5rem; opacity: .3;"></i>
            <div class="card rounded-0 p-2" style="border-color: #d2daff;">
              <div class="row no-gutters mx-n2">
                <!--- content --->
                <div class="col-md-6 px-2 justify-content-between">
                  <strong class="text-uppercase" style="color: #aac4ff; font-family: serif;">Height</strong>
                  <span class="font-italic">content</span>
                </div>
                <!--- content --->
                <div class="col-md-6 px-2 justify-content-between">
                  <strong class="text-uppercase" style="color: #aac4ff; font-family: serif;">Weight</strong>
                  <span class="font-italic">content</span>
                </div>
                <!--- content --->
                <div class="col-md-6 px-2 justify-content-between">
                  <strong class="text-uppercase" style="color: #aac4ff; font-family: serif;">Build</strong>
                  <span class="font-italic">content</span>
                </div>
                <!--- content --->
                <div class="col-md-6 px-2 justify-content-between">
                  <strong class="text-uppercase" style="color: #aac4ff; font-family: serif;">Complexion</strong>
                  <span class="font-italic">content</span>
                </div>
                <!--- content --->
                <div class="col-md-6 px-2 justify-content-between">
                  <strong class="text-uppercase" style="color: #aac4ff; font-family: serif;">Hair Texture</strong>
                  <span class="font-italic">content</span>
                </div>
                <!--- content --->
                <div class="col-md-6 px-2 justify-content-between">
                  <strong class="text-uppercase" style="color: #aac4ff; font-family: serif;">Designer</strong>
                  <span class="font-italic">@ user</span>
                </div>
                <!--- end of content --->
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6 p-2">
          <!--- main reference --->
          <div style="background-image: url('IMGURL'); background-size: cover; height: 500px; border-color: #d2daff;" class="card rounded-0 bg-faded p-2"></div>
        </div>
        <div class="col-md-6 p-2">
          <div class="card rounded-0 h-100 p-2" style="border-color: #d2daff;">
            <!--- content --->
            <div class="d-flex justify-content-between">
              <strong class="text-uppercase" style="color: #aac4ff; font-family: serif;">Skin</strong>
              <div class="d-flex">
                <span class="font-italic mr-2">hex code</span>
                <span style="background: #000000; width: 20px;" class="h-100"></span>
              </div>
            </div>
            <div class="p-1"></div>
            <!--- content --->
            <div class="d-flex justify-content-between">
              <strong class="text-uppercase" style="color: #aac4ff; font-family: serif;">Hair</strong>
              <div class="d-flex">
                <span class="font-italic mr-2">hex code</span>
                <span style="background: #000000; width: 20px;" class="h-100"></span>
              </div>
            </div>
            <div class="p-1"></div>
            <!--- content --->
            <div class="d-flex justify-content-between">
              <strong class="text-uppercase" style="color: #aac4ff; font-family: serif;">Eyes</strong>
              <div class="d-flex">
                <span class="font-italic mr-2">hex code</span>
                <span style="background: #000000; width: 20px;" class="h-100"></span>
              </div>
            </div>
            <div class="p-1"></div>
            <!--- content --->
            <div class="d-flex justify-content-between">
              <strong class="text-uppercase" style="color: #aac4ff; font-family: serif;">Top</strong>
              <div class="d-flex">
                <span class="font-italic mr-2">hex code</span>
                <span style="background: #000000; width: 20px;" class="h-100"></span>
              </div>
            </div>
            <div class="p-1"></div>
            <!--- content --->
            <div class="d-flex justify-content-between">
              <strong class="text-uppercase" style="color: #aac4ff; font-family: serif;">Bottom</strong>
              <div class="d-flex">
                <span class="font-italic mr-2">hex code</span>
                <span style="background: #000000; width: 20px;" class="h-100"></span>
              </div>
            </div>
            <div class="p-1"></div>
            <!--- content --->
            <div class="d-flex justify-content-between">
              <strong class="text-uppercase" style="color: #aac4ff; font-family: serif;">Shoes</strong>
              <div class="d-flex">
                <span class="font-italic mr-2">hex code</span>
                <span style="background: #000000; width: 20px;" class="h-100"></span>
              </div>
            </div>
            <div class="p-1"></div>
            <!--- end of content ---><div class="p-1 mt-auto"></div>
            <h5 class="text-uppercase font-weight-bold" style="font-family: serif;">Alternate Palette</h5>
            <div class="d-flex">
              <!--- color palette --->
              <div style="background: #000000; height: 20px;" class="flex-fill"></div>
              <div style="background: #000000; height: 20px;" class="flex-fill"></div>
              <div style="background: #000000; height: 20px;" class="flex-fill"></div>
              <div style="background: #000000; height: 20px;" class="flex-fill"></div>
              <div style="background: #000000; height: 20px;" class="flex-fill"></div>
            </div>
          </div>
        </div>
        <!--- tattoos/scars --->
        <div class="col-md-7 p-2">
          <!--- image --->
          <div style="background-image: url('IMGURL'); background-size: cover; min-height: 150px; border-color: #d2daff;" class="card rounded-0 bg-faded h-100"></div>
        </div>
        <div class="col-md-5 p-2">
          <div class="card d-block overflow-hidden rounded-0 p-2" style="border: 1px solid #d2daff; position: relative;">
            <i class="fas fa-snowflake fa-4x" style="color: #aac4ff; position: absolute; bottom: -.5rem; right: -.5rem; opacity: .3;"></i>
            <i class="fas fa-snowflake fa-2x" style="color: #d2daff; position: absolute; bottom: 3.5rem; right: -.5rem; opacity: .3;"></i> 
            <!--- tattoos/scars --->
            <strong class="text-uppercase pull-left mr-2" style="font-family: serif;">Tattoos + Scars</strong>
            <p>
              Integer ut enim et diam consequat pulvinar. In fringilla mattis congue. Proin sed magna quis mauris aliquam euismod at eu augue. Donec accumsan lacinia hendrerit. Donec ac elit tristique, faucibus tellus at, rhoncus enim. Proin vitae pulvinar lectus. Quisque vulputate enim sit amet mauris accumsan porta.</p>
          </div>
        </div>
        <!--- accessories/jewelry/piercings --->
        <div class="col-md-5 p-2">
          <div class="card d-block overflow-hidden rounded-0 p-2" style="border: 1px solid #d2daff; position: relative;">
            <i class="fas fa-snowflake fa-4x" style="color: #aac4ff; position: absolute; bottom: -.5rem; left: -.5rem; opacity: .3;"></i>
            <i class="fas fa-snowflake fa-2x" style="color: #d2daff; position: absolute; bottom: 3.5rem; left: -.5rem; opacity: .3;"></i> 
            <!--- accessories/jewelery/piercing --->
            <strong class="text-uppercase pull-left mr-2" style="font-family: serif;">Jewelry + Piercings</strong>
            <p>
              Integer ut enim et diam consequat pulvinar. In fringilla mattis congue. Proin sed magna quis mauris aliquam euismod at eu augue. Donec accumsan lacinia hendrerit. Donec ac elit tristique, faucibus tellus at, rhoncus enim. Proin vitae pulvinar lectus. Quisque vulputate enim sit amet mauris accumsan porta.</p>
          </div>
        </div>
        <div class="col-md-7 p-2">
          <!--- image --->
          <div style="background-image: url('IMGURL'); background-size: cover; min-height: 150px; border-color: #d2daff;" class="card rounded-0 bg-faded h-100"></div>
        </div>
        <div class="col-12 p-2 d-md-none">
          <hr style="border-style: dashed; border-color: #d2daff;" class="my-0">
        </div>
        <!--- additional notes --->
        <div class="col-md-7 p-2">
          <!--- image --->
          <div style="background-image: url('IMGURL'); background-size: cover; min-height: 75px; border-color: #d2daff;" class="card rounded-0 bg-faded h-100"></div>
        </div>
        <div class="col-md-5 p-2">
          <div class="card d-block overflow-hidden rounded-0 p-2" style="border: 1px solid #d2daff; position: relative;">
            <i class="fas fa-snowflake fa-4x" style="color: #aac4ff; position: absolute; bottom: -.5rem; right: -.5rem; opacity: .3;"></i>
            <i class="fas fa-snowflake fa-2x" style="color: #d2daff; position: absolute; bottom: 3.5rem; right: -.5rem; opacity: .3;"></i> 
            <!--- additional notes --->
            <strong class="text-uppercase mr-2" style="font-family: serif;">Additional Notes</strong>
            <ul class="list-unstyled mb-0">
              <!--- likes --->
              <li><i class="far fa-minus mr-2" style="color: #aac4ff; font-size: .7rem;"></i> content</li>
              <li><i class="far fa-minus mr-2" style="color: #aac4ff; font-size: .7rem;"></i> content</li>
              <li><i class="far fa-minus mr-2" style="color: #aac4ff; font-size: .7rem;"></i> content</li>
              <li><i class="far fa-minus mr-2" style="color: #aac4ff; font-size: .7rem;"></i> content</li>
              <li><i class="far fa-minus mr-2" style="color: #aac4ff; font-size: .7rem;"></i> content</li>
            </ul>
          </div>
        </div>
      </div>
      <!--- section ---><div id="FIVE"></div>
      <!--- divider ---><div class="p-2"></div>
      <h1 class="display-4 text-center text-uppercase" style="font-family: serif; color: #ffffff; text-shadow: 1px 1px #aac4ff, 1px -1px #aac4ff, -1px 1px #aac4ff, -1px -1px #aac4ff; letter-spacing: 1px;">
        relationships
      </h1>
      <div class="row no-gutters m-n2">
        <!--- relationship --->
        <div class="col-md-4 p-2">
          <div class="card rounded-0 p-4 overflow-hidden" style="border-color: #d2daff;">
            <i class="fas fa-snowflake fa-4x" style="color: #aac4ff; position: absolute; top: -.5rem; left: -.5rem; opacity: .3;"></i>
            <i class="fas fa-snowflake fa-2x" style="color: #d2daff; position: absolute; top: 3.5rem; left: -.5rem; opacity: .3;"></i>
            <div style="position: relative; padding: 10px;">
              <!--- decor --->
              <div style="position: absolute; bottom: 0; right: 0; width: 85%; height: 85%; border: 2px solid #aac4ff;"></div>
              <!--- profile picture --->
              <div style="background-image: url('IMGURL'); background-size: cover; padding-top: 100%; position: relative; z-index: 99; border: 1px solid #d2daff;" class="bg-faded"></div>
            </div>
          </div>
          <!--- relationship info ---><div class="p-2"></div>
          <div class="card rounded-0 p-2" style="border-color: #d2daff;">
            <h5 class="text-uppercase font-weight-bold mb-0" style="font-family: serif;">
              <a href="LINK" style="color: #aac4ff;">Character Name</a>
            </h5>
            <span style="color: #d2daff;">[ relationship ]</span>
            <div class="p-1"></div>
            <!--- relationship stats --->
            <div class="d-flex align-items-center justify-content-between">
              <small class="font-weight-bold text-uppercase" style="font-family: serif;">Fondness</small>
              <div class="card rounded-0 col-7 p-0" style="height: 12px; border-color: #d2daff; position: relative;">
                <!--- change stat width here --->
                <div class="progress-bar" style="width: 30%; background: #aac4ff; position: relative; top: -2px; left: 2px;"></div>
              </div>
            </div>
            <div class="p-1"></div>
            <!--- relationship stats --->
            <div class="d-flex align-items-center justify-content-between">
              <small class="font-weight-bold text-uppercase" style="font-family: serif;">Trust</small>
              <div class="card rounded-0 col-7 p-0" style="height: 12px; border-color: #d2daff; position: relative;">
                <!--- change stat width here --->
                <div class="progress-bar" style="width: 30%; background: #aac4ff; position: relative; top: -2px; left: 2px;"></div>
              </div>
            </div>
            <div class="p-1"></div>
            <!--- relationship stats --->
            <div class="d-flex align-items-center justify-content-between">
              <small class="font-weight-bold text-uppercase" style="font-family: serif;">Respect</small>
              <div class="card rounded-0 col-7 p-0" style="height: 12px; border-color: #d2daff; position: relative;">
                <!--- change stat width here --->
                <div class="progress-bar" style="width: 30%; background: #aac4ff; position: relative; top: -2px; left: 2px;"></div>
              </div>
            </div>
            <div class="p-1"></div>
            <!--- end of stats --->
          </div>
        </div>
        <!--- relationship --->
        <div class="col-md-4 p-2">
          <hr style="border-style: dashed; border-color: #d2daff;" class="d-none d-md-block">
          <div class="card rounded-0 p-4 overflow-hidden" style="border-color: #d2daff;">
            <i class="fas fa-snowflake fa-4x" style="color: #aac4ff; position: absolute; bottom: -.5rem; right: -.5rem; opacity: .3;"></i>
            <i class="fas fa-snowflake fa-2x" style="color: #d2daff; position: absolute; bottom: 3.5rem; right: -.5rem; opacity: .3;"></i>
            <div style="position: relative; padding: 10px;">
              <!--- decor --->
              <div style="position: absolute; top: 0; left: 0; width: 85%; height: 85%; border: 2px solid #aac4ff;"></div>
              <!--- profile picture --->
              <div style="background-image: url('IMGURL'); background-size: cover; padding-top: 100%; position: relative; z-index: 99; border: 1px solid #d2daff;" class="bg-faded"></div>
            </div>
          </div>
          <!--- relationship info ---><div class="p-2"></div>
          <div class="card rounded-0 p-2" style="border-color: #d2daff;">
            <h5 class="text-uppercase font-weight-bold mb-0" style="font-family: serif;">
              <a href="LINK" style="color: #aac4ff;">Character Name</a>
            </h5>
            <span style="color: #d2daff;">[ relationship ]</span>
            <div class="p-1"></div>
            <!--- relationship stats --->
            <div class="d-flex align-items-center justify-content-between">
              <small class="font-weight-bold text-uppercase" style="font-family: serif;">Fondness</small>
              <div class="card rounded-0 col-7 p-0" style="height: 12px; border-color: #d2daff; position: relative;">
                <!--- change stat width here --->
                <div class="progress-bar" style="width: 30%; background: #aac4ff; position: relative; top: -2px; left: 2px;"></div>
              </div>
            </div>
            <div class="p-1"></div>
            <!--- relationship stats --->
            <div class="d-flex align-items-center justify-content-between">
              <small class="font-weight-bold text-uppercase" style="font-family: serif;">Trust</small>
              <div class="card rounded-0 col-7 p-0" style="height: 12px; border-color: #d2daff; position: relative;">
                <!--- change stat width here --->
                <div class="progress-bar" style="width: 30%; background: #aac4ff; position: relative; top: -2px; left: 2px;"></div>
              </div>
            </div>
            <div class="p-1"></div>
            <!--- relationship stats --->
            <div class="d-flex align-items-center justify-content-between">
              <small class="font-weight-bold text-uppercase" style="font-family: serif;">Respect</small>
              <div class="card rounded-0 col-7 p-0" style="height: 12px; border-color: #d2daff; position: relative;">
                <!--- change stat width here --->
                <div class="progress-bar" style="width: 30%; background: #aac4ff; position: relative; top: -2px; left: 2px;"></div>
              </div>
            </div>
            <div class="p-1"></div>
            <!--- end of stats --->
          </div>
        </div>
        <!--- relationship --->
        <div class="col-md-4 p-2">
          <div class="card rounded-0 p-4 overflow-hidden" style="border-color: #d2daff;">
            <i class="fas fa-snowflake fa-4x" style="color: #aac4ff; position: absolute; top: -.5rem; left: -.5rem; opacity: .3;"></i>
            <i class="fas fa-snowflake fa-2x" style="color: #d2daff; position: absolute; top: 3.5rem; left: -.5rem; opacity: .3;"></i>
            <div style="position: relative; padding: 10px;">
              <!--- decor --->
              <div style="position: absolute; bottom: 0; right: 0; width: 85%; height: 85%; border: 2px solid #aac4ff;"></div>
              <!--- profile picture --->
              <div style="background-image: url('IMGURL'); background-size: cover; padding-top: 100%; position: relative; z-index: 99; border: 1px solid #d2daff;" class="bg-faded"></div>
            </div>
          </div>
          <!--- relationship info ---><div class="p-2"></div>
          <div class="card rounded-0 p-2" style="border-color: #d2daff;">
            <h5 class="text-uppercase font-weight-bold mb-0" style="font-family: serif;">
              <a href="LINK" style="color: #aac4ff;">Character Name</a>
            </h5>
            <span style="color: #d2daff;">[ relationship ]</span>
            <div class="p-1"></div>
            <!--- relationship stats --->
            <div class="d-flex align-items-center justify-content-between">
              <small class="font-weight-bold text-uppercase" style="font-family: serif;">Fondness</small>
              <div class="card rounded-0 col-7 p-0" style="height: 12px; border-color: #d2daff; position: relative;">
                <!--- change stat width here --->
                <div class="progress-bar" style="width: 30%; background: #aac4ff; position: relative; top: -2px; left: 2px;"></div>
              </div>
            </div>
            <div class="p-1"></div>
            <!--- relationship stats --->
            <div class="d-flex align-items-center justify-content-between">
              <small class="font-weight-bold text-uppercase" style="font-family: serif;">Trust</small>
              <div class="card rounded-0 col-7 p-0" style="height: 12px; border-color: #d2daff; position: relative;">
                <!--- change stat width here --->
                <div class="progress-bar" style="width: 30%; background: #aac4ff; position: relative; top: -2px; left: 2px;"></div>
              </div>
            </div>
            <div class="p-1"></div>
            <!--- relationship stats --->
            <div class="d-flex align-items-center justify-content-between">
              <small class="font-weight-bold text-uppercase" style="font-family: serif;">Respect</small>
              <div class="card rounded-0 col-7 p-0" style="height: 12px; border-color: #d2daff; position: relative;">
                <!--- change stat width here --->
                <div class="progress-bar" style="width: 30%; background: #aac4ff; position: relative; top: -2px; left: 2px;"></div>
              </div>
            </div>
            <div class="p-1"></div>
            <!--- end of stats --->
          </div>
        </div>
      </div>
    </div>
    <!--- navigation --->
    <div class="col-md-1 p-2 order-1 order-md-2">
      <div class="d-flex d-md-none justify-content-center align-items-center">
        <ul class="nav flex-row" style="font-family: serif;">
          <li class="nav-item"><a href="#ONE" class="nav-link text-center" style="color: #ffffff; text-shadow: 1px 1px #aac4ff, 1px -1px #aac4ff, -1px 1px #aac4ff, -1px -1px #aac4ff;">I.</a></li>
          <li class="nav-item"><a href="#TWO" class="nav-link text-center" style="color: #ffffff; text-shadow: 1px 1px #aac4ff, 1px -1px #aac4ff, -1px 1px #aac4ff, -1px -1px #aac4ff;">II.</a></li>
          <li class="nav-item"><a href="#THREE" class="nav-link text-center" style="color: #ffffff; text-shadow: 1px 1px #aac4ff, 1px -1px #aac4ff, -1px 1px #aac4ff, -1px -1px #aac4ff;">III.</a></li>
          <li class="nav-item"><a href="#FOUR" class="nav-link text-center" style="color: #ffffff; text-shadow: 1px 1px #aac4ff, 1px -1px #aac4ff, -1px 1px #aac4ff, -1px -1px #aac4ff;">IV.</a></li>
          <li class="nav-item"><a href="#FIVE" class="nav-link text-center" style="color: #ffffff; text-shadow: 1px 1px #aac4ff, 1px -1px #aac4ff, -1px 1px #aac4ff, -1px -1px #aac4ff;">V.</a></li>
        </ul>
      </div>
      <div class="d-none d-md-flex sticky-top justify-content-center align-items-center" style="height: 100vh;">
        <ul class="nav flex-md-column flex-row" style="font-family: serif;">
          <li class="nav-item"><a href="#ONE" class="nav-link text-center" style="color: #ffffff; text-shadow: 1px 1px #aac4ff, 1px -1px #aac4ff, -1px 1px #aac4ff, -1px -1px #aac4ff;">I.</a></li>
          <li class="nav-item"><a href="#TWO" class="nav-link text-center" style="color: #ffffff; text-shadow: 1px 1px #aac4ff, 1px -1px #aac4ff, -1px 1px #aac4ff, -1px -1px #aac4ff;">II.</a></li>
          <li class="nav-item"><a href="#THREE" class="nav-link text-center" style="color: #ffffff; text-shadow: 1px 1px #aac4ff, 1px -1px #aac4ff, -1px 1px #aac4ff, -1px -1px #aac4ff;">III.</a></li>
          <li class="nav-item"><a href="#FOUR" class="nav-link text-center" style="color: #ffffff; text-shadow: 1px 1px #aac4ff, 1px -1px #aac4ff, -1px 1px #aac4ff, -1px -1px #aac4ff;">IV.</a></li>
          <li class="nav-item"><a href="#FIVE" class="nav-link text-center" style="color: #ffffff; text-shadow: 1px 1px #aac4ff, 1px -1px #aac4ff, -1px 1px #aac4ff, -1px -1px #aac4ff;">V.</a></li>
        </ul>
      </div>
    </div>
  </div>
  
</div>