<!--------------------------- Remeber to Have WYSIWYG disabled!! --------------------------->
      <!--------------------------- You are using version 1.0.0 of AnimatedCritter's Code "Center Stage" --------------------------->
      
      <!--------------------------- Change the Header Colour: Press CTRL+F or Command+F and type #aff2ff into the search box. Click the "all" button and type in the new hex colour! (e.g. #ffccff)
                                    Here is a helpful resource to choose a hex colour: https://www.w3schools.com/colors/colors_picker.asp --------------------------->
      
      <div class="container text-light bg-secondary">
        <div class="row align-items-center">
          <div class="col-sm p-3 m-3 rounded bg-dark">
            
      <!--------------------------- About --------------------------->
            <h2 class="text-center text-uppercase" style="color: #aff2ff;"><i class="fal fa-address-card"></i> About</h2>
              <div class="d-flex justify-content-between">
                <span class="font-weight-bold">Name</span> <span class="text-secondary">[info]</span>
              </div>
              
              <br>
              <div class="d-flex justify-content-between">
                <span class="font-weight-bold">Species</span> <span class="text-secondary">[info]</span>
              </div>
              
              <br>
              <div class="d-flex justify-content-between">
                <span class="font-weight-bold">Pronouns</span> <span class="text-secondary">[info]</span>
              </div>
              
              <br>
              <div class="d-flex justify-content-between">
                <span class="font-weight-bold">Orientation</span> <span class="text-secondary">[info]</span>
              </div>
              <!--------------------------- You can add or remove catergories, but it's suggested that the catergory count here matches the one in the "Design" section
                        -New Catergory: (Paste above this line)
                              <br>
                              <div class="d-flex justify-content-between">
                                <span class="font-weight-bold">Title</span> <span class="text-secondary">[info]</span>
                              </div>
                              
                        -Remove a Catergory by Deleting:
                              <br>
                              <div class="d-flex justify-content-between">
                                <span class="font-weight-bold">Title</span> <span class="text-secondary">[info]</span>
                              </div>
              --------------------------->
              <!-- For those modifying the layout: it is ill-advised to add a paragraph section here. Instead, use the "Story" catergory, so the image doesn't overlay important text! -->
          </div>
          
      <!--------------------------- Center Image Section --------------------------->
          <div class="col-xl-6 mx-3">
            <!--------------------------- Main Profile Image: Replace # with image url. Transparent images will do best! --------------------------->
            <img src="#" style="position: absolute; max-height: 250px; top: -5rem; left: 35%;">
            <hr>
            <!--------------------------- Profile Gradient: Go here https://cssgradient.io/ and customzie the gradient, scroll down, and copy paste the code from the "CSS" box into the slot that says "Paste Here" below.  --------------------------->
            <div style="background: rgb(66,62,129); background: linear-gradient(0deg, rgba(66,62,129,1) 0%, rgba(121,121,223,1) 35%, rgba(200,246,255,1) 100%); text-align: center;">
              <!--------------------------- Name section: this may get wonky depending on name length. --------------------------->
              <div class="container">
                <div class="row">
                  <!--------------------------- The first half of their name replaces NA --------------------------->
                  <div class="col h1 text-left" style="font-size: 4rem; letter-spacing: 2rem; color: white;">NA</div>
                  <!--------------------------- The second half of their name replaces ME --------------------------->
                  <div class="col h1 text-right" style="font-size: 4rem; letter-spacing: 2rem; color: white;">ME</div>
                </div>
              </div>
              <!--------------------------- End Name section --------------------------->
            </div>
            <hr>
          </div>
          
      <!--------------------------- Design --------------------------->
          <div class="col-sm p-3 m-3 rounded bg-dark">
            <h2 class="text-center text-uppercase" style="color: #aff2ff;"><i class="fal fa-palette"></i> Design</h2>
              <div class="d-flex justify-content-between">
                <span class="font-weight-bold">Species</span> <span class="text-secondary">[info]</span>
              </div>
              
              <br>
              <div class="d-flex justify-content-between">
                <span class="font-weight-bold">Designer</span> <span class="text-secondary">[info]</span>
              </div>
              
              <br>
              <div class="d-flex justify-content-between">
                <span class="font-weight-bold">Value</span> <span class="text-secondary">[$00]</span>
              </div>
              
              <br>
              <div class="d-flex justify-content-between">
                <span class="font-weight-bold">Status</span> <span class="text-secondary">[NFS/T]</span>
              </div>
              <!--------------------------- You can add or remove catergories, but it's suggested that the catergory count here matches the one in the "About" section
                        -New Catergory: (Paste above this line)
                              <br>
                              <div class="d-flex justify-content-between">
                                <span class="font-weight-bold">Title</span> <span class="text-secondary">[info]</span>
                              </div>
                              
                        -Remove a Catergory by Deleting:
                              <br>
                              <div class="d-flex justify-content-between">
                                <span class="font-weight-bold">Title</span> <span class="text-secondary">[info]</span>
                              </div>
              --------------------------->
          </div>
        </div>
        
      <!--------------------------- Story --------------------------->
        <div class="row">
          <div class="col-lg p-3 mx-3 mb-3 rounded bg-dark" style="max-height: 330px; overflow: auto; overflow-x: hidden;">
            <h2 class="text-center text-uppercase" style="color: #aff2ff;"><i class="fal fa-book"></i> Story</h2>
              <!--------------------------- Customize this section by pasting the following below when desired:
                        -New Paragraph:
                              <p>Text Here</p>
                              
                        -New Character Relation on the Left: (Paste above the section you want it to sit beside. Remember to replace # with the character image URL!)
                              <div class="float-left bg-secondary text-dark text-center p-2 mr-2 rounded" style="max-width: 10rem;">
                                <a href="CHARACTER URL HERE"><img src="#" style="max-height: 100px;"></a>
                                <p><b class="text-light">[Name]</b> A short blurb on the characters' relationship.</p>
                              </div>
                              
                        -New Character Relation on the right: (Paste above the section you want it to sit beside.)
                              <div class="float-right bg-secondary text-dark text-center p-2 ml-2 rounded" style="max-width: 10rem;">
                                <a href="CHARACTER URL HERE"><img src="#" style="max-height: 100px;"></a>
                                <p><b class="text-light">[Name]</b> A short blurb on the characters' relationship.</p>
                              </div>
              --------------------------->
              
              
              <p>Add as much text as you want! This box will scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempor tincidunt metus ac sollicitudin. Nullam eu congue sapien, dictum sagittis velit. Sed nec luctus urna. Fusce in urna mi. Fusce quis volutpat velit. Nullam et ultricies leo. Pellentesque id fringilla leo. Maecenas scelerisque, lacus ut tincidunt semper.</p>
              
          </div>
        </div>
        
          <!--------------------------- Credit - Do *Not* Remove --------------------------->  
          <p class="float-right lowercase text-faded">
            <a href="https://toyhou.se/13661495" class="text-muted" data-toggle="tooltip" data-placement="bottom" title="Code by AnimatedCritter"><i class="fal fa-code"></i></a>
          </p>
      <!--------------------------- End Credits ---------------------------> 
        
      </div>
      <br>