Input Template

[nobr]
[div=
  position: relative;
  overflow: hidden;]

[comment]
    Designed and coded by [USER=20950]@Nano[/USER].

Please do not remove the credits or claim the code as your own work.

If you found this code outside of my public workshop, please don't use it.
    I'd greatly appreciate it if you used the version of the code in that thread.

[font=Playfair Display SC]serif[/font]
    [font=Dosis]sans-serif[/font]
  [/comment]

[div=
&Sheet Colors \ group&
  --Color01: &Tab Cover and Header Color \ text&;
  --Color02: &Secondary Color \ text&;
  --Color03: &Body Text Color \ text&;
  --bgColor: &Main Background Color \ text&;
  --White: &Text Color \ text \ #fefefe&;
&end&

--HeaderFont: 'Playfair Display SC', serif;
  --HeaderSize: 1.1em;
  --NumSize: 4.5em; /* size of the numbers next to each section header */
  --BodyFont: 'Dosis', sans-serif;
  --BodySize: calc(.9em + 1px);

&Background Images \ group&
  --backgroundIMG: url(&Background Pattern \ text \ https://i.imgur.com/xnAuGrK.png&) repeat;
  --photoMain: url(&Main Photo Reel Image URL \ text&) top center/cover no-repeat;
  --photoBlur: url(&Blurred Photo Reel Images URL \ text&) center/cover no-repeat;
&end&

/* <--------------------------------- shell (don't touch) ---------------------------------> */

margin: 0 auto;
  padding: 0;
  width: 100%;
  min-width: 300px;
  height: 70vh;
  max-height: 750px;
  min-height: 500px;
  font-size: initial;
  overflow: hidden;
  position: relative;]

[div=/* background */
    background: var(--backgroundIMG), var(--bgColor);
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;]
    [/div]

[div=/* right-hand image reel */
    width: 60%;
    min-width: 300px;
    position: absolute;
    transform: rotate(-10deg);
    top: -27%;
    right: -100px;
    z-index: 2;]
      [div=width: 100%;
      height: 275px;
      background: var(--photoBlur);
      filter: blur(3px);]
      [/div]
      [div=margin-top: 25px;
      width: 100%;
      height: 275px;
      background: var(--photoMain);]
      [/div]
      [div=margin-top: 25px;
      width: 100%;
      height: 275px;
      background: var(--photoBlur);
      filter: blur(3px);]
      [/div]
      [div=margin-top: 25px;
      width: 100%;
      height: 275px;
      background: var(--photoBlur);
      filter: blur(3px);]
      [/div]
    [/div]

[div=/* main tab cover */
    width: 100px;
    height: 700px;
    background: var(--Color01);
    position: absolute;
    transform: rotate(-10deg);
    left: -90px;
    bottom: -50px;
    z-index: 3;
    pointer-events: none;]
      [div=/* tab labels wrapper */
      font-family: var(--HeaderFont);
      font-size: 17px;
      line-height: 100%;
      color: var(--White);
      text-align: right;
      position: absolute;
      bottom: 60px;
      right: 10px;]
        [div=/* 01 */
        display: block;]
          01
        [/div]
        [div=/* 02 */
        display: block;
        margin-top: 15px;]
          02
        [/div]
        [div=/* 03 */
        display: block;
        margin-top: 15px;]
          03
        [/div]
        [div=/* 04 */
        display: block;
        margin-top: 15px;]
          04
        [/div]
        [div=/* 05 */
        display: block;
        margin-top: 15px;]
          05
        [/div]
      [/div]
    [/div]

[div=/* tab wrapper */
    width: 100%;
    line-height: 27px;
    position: absolute;
    left: -20px;
    bottom: -33px;]
      [tabs]

[tab=010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101]&Tab One \ group&
          [div=/* tab content wrapper */
          width: calc(100% - 60px);
          height: 70vh;
          max-height: 750px;
          min-height: 500px;
          position: absolute;
          right: -20px;
          bottom: 33px;
          z-index: 3;]
            [div=/* scrollbox wrapper */
            width: 100%;
            max-width: 900px;
            height: 100%;
            overflow: hidden;]
              [div=/* scrollbox */
              padding-right: 30px;
              width: 100%;
              height: 100%;
              overflow-x: hidden;
              overflow-y: scroll;]

[comment] --- start of basic information section --- [/comment]
                [div=/* flexbox */
                margin-left: -25px;
                display: flex;
                flex-flow: row wrap;
                justify-content: center;
                width: calc(100% + 25px);
                position: relative;
                top: 50px;]

[div=/* flexbox LEFT */
                  margin-left: 25px;
                  margin-bottom: 25px;
                  flex: 1;
                  max-width: 400px;
                  min-width: 200px;]
                    [div=/* colored tilted box */
                    padding-top: 90%;
                    width: 90%;
                    background: var(--Color02);
                    transform: rotate(-10deg) translate(10%);
                    position: relative;]
                      [div=/* box with image */
                      background: url(&Profile Icon Image URL \ text&) center/cover no-repeat;
                      transform: rotate(10deg);
                      position: absolute;
                      inset: 0;]
                      [/div]
                    [/div]
                  [/div]

[div=/* flexbox RIGHT */
                  margin-left: 25px;
                  flex: 3;
                  max-width: 600px;
                  min-width: 250px;]

[comment] --- start of basic info --- [/comment]
                    [div=/* basics subheader */
                    margin-left: 15px;
                    font-family: var(--HeaderFont);
                    font-size: var(--HeaderSize);
                    line-height: 100%;
                    color: var(--Color01);
                    font-weight: 700;]
                      &Header Title \ text \ Basic Info&
                    [/div]

[div=/* basic attributes flexbox */
                    margin-left: -10px;
                    display: flex;
                    flex-flow: row wrap;
                    width: calc(100% + 10px);
                    overflow: hidden;]

&Basic Information \ group&&Basic Info Q/A \ group \ repeat&[comment] --- start of basic info tag --- [/comment]
                      [div=/* name box */
                      border-radius: 15px; margin-top: 10px; margin-left: 10px; display: flex; font-family: var(--BodyFont); font-size: var(--BodySize); line-height: 100%; background: var(--Color02); text-transform: capitalize;]
                        [div=/* question */
                        border-radius: 15px; box-sizing: border-box; padding: 6px 10px; color: var(--Color02); background: var(--Color01);]
                          &Basic Info Question (e.g. Name) \ text&
                        [/div]
                        [div=/* answer */
                        box-sizing: border-box; padding: 5px 10px; color: var(--Color01);]
                          &Basic Info Answer (e.g. Thomas) \ text&
                        [/div]
                      [/div]
                      [comment] --- end of basic info tag --- [/comment]&end&&end&

[/div]
                    [comment] --- end of basic info --- [/comment]

[/div]
                [/div]
                [comment] --- end of basic information section --- [/comment]

&Appearance \ group&[comment] --- start of appearance section --- [/comment]
                [div=/* header wrapper */
                display: flex;
                margin-top: 75px;
                margin-bottom: 5px;
                width: 100%;
                font-family: var(--HeaderFont);
                line-height: 100%;
                color: var(--Color01);
                font-weight: 700;
                position: relative;
                z-index: 3;]
                  [div=/* number */
                  display: block;
                  font-size: var(--NumSize);
                  letter-spacing: -3px;]
                    01
                  [/div]
                  [div=/* header title */
                  display: block;
                  margin-left: 5px;
                  font-size: var(--HeaderSize);]
                    &Header Title \ text \ Appearance&
                  [/div]
                [/div]

[div=/* content box */
                box-sizing: border-box;
                padding: max(20px, 5%);
                width: calc(100% - 25px);
                background: var(--White);
                font-family: var(--BodyFont);
                font-size: var(--BodySize);
                line-height: 135%;
                color: var(--Color03);
                text-align: justify;
                position: relative;
                left: 25px;]
                  [div=white-space: pre-line;]&Body Text \ text&[/div]

[comment] --- start of appearance tags wrapper --- [/comment]
                  [div=/* appearance tags wrapper */
                  margin-top: 20px;
                  margin-left: -7px;
                  display: flex;
                  flex-flow: row wrap;
                  justify-content: flex-end;
                  color: var(--White);
                  text-transform: lowercase;]

&Appearance Tags \ group \ repeat&[comment] --- start of appearance tag --- [/comment]
                    [div=/* appearance tag */
                    margin-left: 7px; margin-bottom: 7px; padding: 2px 8px; box-sizing: border-box; display: block; background: var(--Color01);]
                      &Appearance Tag (e.g. Brown Hair) \ text&
                    [/div]
                    [comment] --- end of appearance tag --- [/comment]&end&

[/div]
                  [comment] --- end of appearance tags wrapper --- [/comment]

[/div]
                [comment] --- end of appearance section --- [/comment]&end&

&Personality \ group&[comment] --- start of personality section --- [/comment]
                [div=/* header wrapper */
                display: flex;
                margin-top: 50px;
                margin-bottom: 5px;
                width: 100%;
                font-family: var(--HeaderFont);
                line-height: 100%;
                color: var(--Color01);
                font-weight: 700;
                position: relative;
                z-index: 3;]
                  [div=/* number */
                  display: block;
                  font-size: var(--NumSize);
                  letter-spacing: -3px;]
                    02
                  [/div]
                  [div=/* header title */
                  display: block;
                  margin-left: 5px;
                  font-size: var(--HeaderSize);]
                    &Header Title \ text \ Personality&
                  [/div]
                [/div]

[div=/* spacer */
                height: 50px;]
                [/div]

[div=/* tab cover pt.I - DON'T TOUCH */
                border-radius: 50%;
                padding-bottom: 5px;
                height: 25px;
                width: 30px;
                background: var(--Color02);
                font-family: var(--HeaderFont);
                font-size: 17px;
                line-height: 0;
                color: var(--Color01);
                position: absolute;
                bottom: 136px;
                left: -57px;
                display: flex;
                justify-content: center;
                align-items: center;
                transform: rotate(-10deg);]
                  01
                [/div]

[div=/* tab cover pt.II */
                border-radius: 50px;
                padding: 5px 15px 6px;
                background: var(--Color02);
                font-family: var(--BodyFont);
                font-size: 13px;
                line-height: 100%;
                color: var(--Color01);
                text-transform: uppercase;
                position: absolute;
                bottom: 149px;
                left: -21px;
                display: flex;
                justify-content: center;
                align-items: center;
                transform: rotate(-10deg);
                z-index: 5;]
                  Basics
                [/div]

[/div]
            [/div]
          [/div]
        &end&[/tab]

[tab=020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202]&Tab Two \ group&
          [div=/* tab content wrapper */
          width: calc(100% - 60px);
          height: 70vh;
          max-height: 750px;
          min-height: 500px;
          position: absolute;
          right: -20px;
          bottom: 33px;
          z-index: 3;]
            [div=/* scrollbox wrapper */
            width: 100%;
            max-width: 900px;
            height: 100%;
            overflow: hidden;]
              [div=/* scrollbox */
              padding-right: 30px;
              width: 100%;
              height: 100%;
              overflow-x: hidden;
              overflow-y: scroll;]

[div=visibility: hidden;
                width: calc(100% - 20px);
                position: relative;
                left: 20px;]
                  [accordion=100%]

&Backstory Accordions \ group \ repeat&[comment] --- start of slide --- [/comment]
                    {slide=&Select "open" if first accordion or "closed" if second \ select \ open \ closed&|[nobr]
                      [div=/* slide title wrapper */
                      margin-top: 50px;
                      visibility: visible;
                      background: var(--White);
                      font-size: initial;
                      box-sizing: border-box;
                      padding: max(20px, 3%);
                      position: relative;]

[div=/* slide title */
                        display: flex;
                        width: 100%;
                        font-family: var(--HeaderFont);
                        line-height: 100%;
                        color: var(--Color01);
                        font-weight: 700;
                        position: absolute;
                        top: -20px;
                        left: -25px;]
                          [div=/* number */
                          display: block;
                          font-size: var(--NumSize);
                          letter-spacing: -3px;]
                            0&Backstory Part Number (e.g. 1, 2, 3, etc) (note: writing 1 in the field will generate 01 in the actual sheet and so on) \ number&
                          [/div]
                          [div=/* header title */
                          display: block;
                          margin-left: 5px;
                          font-size: var(--HeaderSize);]
                            &Backstory Accordion Header \ text&
                          [/div]
                        [/div]

[div=/* slide image */
                        width: 100%;
                        height: 200px;
                        background: url(&Backstory Slide Image URL \ text&) center/cover no-repeat;]
                        [/div]

[/div]
                    [/nobr]}[nobr]
                      [div=/* slide contents */
                      visibility: visible;
                      box-sizing: border-box;
                      padding: max(20px, 3%);
                      background: var(--White);
                      width: 100%;
                      font-family: var(--BodyFont);
                      font-size: var(--BodySize);
                      line-height: 135%;
                      color: var(--Color03);
                      text-align: justify;
                      position: relative;
                      top: 0;]
                        [div=white-space: pre-line;]&Backstory Body Text \ text&[/div]
                      [/div]
                    [/nobr]{/slide}
                    [comment] --- end of slide --- [/comment]&end&

[/accordion]
                [/div]

[div=/* spacer */
                height: 50px;]
                [/div]

[div=/* tab cover pt.I - DON'T TOUCH */
                border-radius: 50%;
                padding-bottom: 5px;
                height: 25px;
                width: 30px;
                background: var(--Color02);
                font-family: var(--HeaderFont);
                font-size: 17px;
                line-height: 0;
                color: var(--Color01);
                position: absolute;
                bottom: 105px;
                left: -52px;
                display: flex;
                justify-content: center;
                align-items: center;
                transform: rotate(-10deg);]
                  02
                [/div]

[div=/* tab cover pt.II */
                border-radius: 50px;
                padding: 5px 15px 6px;
                background: var(--Color02);
                font-family: var(--BodyFont);
                font-size: 13px;
                line-height: 100%;
                color: var(--Color01);
                text-transform: uppercase;
                position: absolute;
                bottom: 119px;
                left: -16px;
                display: flex;
                justify-content: center;
                align-items: center;
                transform: rotate(-10deg);
                z-index: 5;]
                  Backstory
                [/div]

[/div]
            [/div]
          [/div]
        &end&[/tab]

[tab=030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303]&Tab Three \ group&
          [div=/* tab content wrapper */
          width: calc(100% - 60px);
          height: 70vh;
          max-height: 750px;
          min-height: 500px;
          position: absolute;
          right: -20px;
          bottom: 33px;
          z-index: 3;]
            [div=/* scrollbox wrapper */
            width: 100%;
            max-width: 900px;
            height: 100%;
            overflow: hidden;]
              [div=/* scrollbox */
              padding-right: 30px;
              width: 100%;
              height: 100%;
              overflow-x: hidden;
              overflow-y: scroll;]

&Character Relationship \ group \ repeat&[comment] --- start of character relationship --- [/comment]
                [div=/* flexbox */
                display: flex;
                flex-flow: row wrap;
                margin-left: 50px;]

[div=/* flex LEFT */
                  display: flex;
                  align-items: center;
                  margin-top: 80px;
                  margin-left: -50px;
                  flex: 1;
                  min-width: 200px;
                  position: relative;
                  z-index: 6;]
                    [div=/* image box */
                    height: 275px;
                    width: 95%;
                    background: url(&Relationship Image URL \ text&) center/cover no-repeat;
                    position: relative;]

[div=/* heart icon */
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      border-radius: 50%;
                      width: 25px;
                      height: 25px;
                      background: var(--Color02);
                      color: var(--Color01);
                      position: absolute;
                      bottom: 40px;
                      right: -13px;
                      font-size: 11px;]
                        &Relationship Font Awesome Icon \ text \ [fa]fas fa-heart[/fa]&
                      [/div]

[div=/* CS Link */
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      border-radius: 50%;
                      width: 25px;
                      height: 25px;
                      background: var(--Color02);
                      color: var(--Color01);
                      position: absolute;
                      bottom: 10px;
                      right: -13px;
                      font-family: var(--HeaderFont);
                      font-size: 11px;
                      text-transform: uppercase;]
                        [URL=&Link to CS \ text \ google.com&]CS[/URL]
                      [/div]

[/div]
                  [/div]
  
                  [div=/* flex RIGHT */
                  box-sizing: border-box;
                  margin-top: 80px;
                  margin-left: -60px;
                  padding: max(10px, 5%);
                  flex: 7;
                  width: 100%;
                  min-width: 200px;
                  background: var(--White);
                  font-family: var(--BodyFont);
                  font-size: var(--BodySize);
                  line-height: 135%;
                  color: var(--Color01);
                  text-align: justify;
                  position: relative;]

[div=/* quote section wrapper */
                    display: flex;
                    flex-flow: row nowrap;
                    justify-content: right;]
                      [comment] --- start of quote section --- [/comment]
                      [div=/* quote box */
                      box-sizing: border-box;
                      border-radius: 5px;
                      padding: 5px 50px 5px 7px;
                      width: calc(100% - 35px);
                      max-width: 450px;
                      background: var(--Color02);
                      line-height: 115%;
                      text-align: left;
                      position: relative;
                      top: -65px;
                      right: 20px;
                      color: var(--Color03);]

[comment] QUOTE GOES HERE [/comment]
                        &Quote About RS \ text&

[div=/* circle image */
                        border-radius: 50%;
                        width: 75px;
                        height: 75px;
                        background: var(--Color02) url(&Quote React Image Icon URL \ text&) center/cover no-repeat;
                        position: absolute;
                        top: -25px;
                        right: -30px;]
                          [div=/* quote mark */
                          box-sizing: border-box;
                          display: flex;
                          justify-content: center;
                          align-items: center;
                          border-radius: 50%;
                          border: 4px solid var(--White);
                          width: 37px;
                          height: 37px;
                          background: var(--Color02);
                          color: var(--White);
                          font-size: 12px;
                          position: absolute;
                          left: -7px;
                          bottom: -5px;]
                            [fa]fas fa-quote-left[/fa]
                          [/div]
                        [/div]
                      [/div]
                    [/div]

[div=/* header */
                    margin-top: -55px;
                    margin-left: 65px;
                    font-family: var(--HeaderFont);
                    line-height: 100%;
                    text-transform: capitalize;]
                      &Character Name \ text&
                    [/div]

[div=/* relationship content */
                    margin-top: 15px;
                    margin-left: 40px;
                    text-align: justify;
                    color: var(--Color03);]
                      [div=white-space: pre-line;]&Relationship Body Text \ text&[/div]
                    [/div]

[/div]
                [/div]
                [comment] --- end of character relationship --- [/comment]&end&

[div=/* spacer */
                height: 50px;]
                [/div]

[div=/* tab cover pt.I - DON'T TOUCH */
                border-radius: 50%;
                padding-bottom: 5px;
                height: 25px;
                width: 30px;
                background: var(--Color02);
                font-family: var(--HeaderFont);
                font-size: 17px;
                line-height: 0;
                color:  var(--Color01);
                position: absolute;
                bottom: 74px;
                left: -47px;
                display: flex;
                justify-content: center;
                align-items: center;
                transform: rotate(-10deg);]
                  03
                [/div]

[div=/* tab cover pt.II */
                border-radius: 50px;
                padding: 5px 15px 6px;
                background: var(--Color02);
                font-family: var(--BodyFont);
                font-size: 13px;
                line-height: 100%;
                color: var(--Color01);
                text-transform: uppercase;
                position: absolute;
                bottom: 91px;
                left: -11px;
                display: flex;
                justify-content: center;
                align-items: center;
                transform: rotate(-10deg);
                z-index: 7;]
                  Relationships
                [/div]

[/div]
            [/div]
          [/div]
        &end&[/tab]

[tab=040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404]&Tab Four \ group&
          [div=/* tab content wrapper */
          width: calc(100% - 60px);
          height: 70vh;
          max-height: 750px;
          min-height: 500px;
          position: absolute;
          right: -20px;
          bottom: 33px;
          z-index: 3;]
            [div=/* scrollbox wrapper */
            width: 100%;
            max-width: 900px;
            height: 100%;
            overflow: hidden;]
              [div=/* scrollbox */
              padding-right: 30px;
              width: 100%;
              height: 100%;
              overflow-x: hidden;
              overflow-y: scroll;]

&Combat Data \ group&[comment] --- start of combat data section --- [/comment]
                [div=/* header wrapper */
                display: flex;
                margin-top: 50px;
                margin-bottom: 5px;
                width: 100%;
                font-family: var(--HeaderFont);
                line-height: 100%;
                color: var(--Color01);
                font-weight: 700;
                position: relative;
                z-index: 3;]
                  [div=/* number */
                  display: block;
                  font-size: var(--NumSize);
                  letter-spacing: -3px;]
                    01
                  [/div]
                  [div=/* header title */
                  display: block;
                  margin-left: 5px;
                  font-size: var(--HeaderSize);]
                    &Header Title \ text \ Combat Data&
                  [/div]
                [/div]

[div=/* content box */
                box-sizing: border-box;
                padding: max(20px, 5%);
                width: calc(100% - 25px);
                background: var(--White);
                font-family: var(--BodyFont);
                font-size: var(--BodySize);
                line-height: 135%;
                color: var(--Color01);
                text-align: justify;
                position: relative;
                left: 25px;]

&Skill Block \ group \ repeat&[comment] --- start of skills block --- [/comment]
                  [div=/* topic title */
                  margin-top: &Margin (0 If First Skill Block and 20 If Second Onwards) \ select \ 0 \ 20&px;
                  margin-left: 20px;
                  font-family: var(--HeaderFont);]
                    &Skill Name \ text&
                  [/div]
                  [div=/* topic content */
                  margin-top: 5px;
                  color: var(--Color03);]
                    [div=white-space: pre-line;]&Skill Description \ text&[/div]
                  [/div]
                  [comment] --- end of skills block --- [/comment]&end&

[/div]
                [comment] --- end of combat data section --- [/comment]&end&

&Equipment \ group&[comment] --- start of equipment section --- [/comment]
                [div=/* header wrapper */
                display: flex;
                margin-top: 50px;
                margin-bottom: 5px;
                width: 100%;
                font-family: var(--HeaderFont);
                line-height: 100%;
                color: var(--Color01);
                font-weight: 700;
                position: relative;
                z-index: 3;]
                  [div=/* number */
                  display: block;
                  font-size: var(--NumSize);
                  letter-spacing: -3px;]
                    02
                  [/div]
                  [div=/* header title */
                  display: block;
                  margin-left: 5px;
                  font-size: var(--HeaderSize);]
                    &Header Title \ text \ Equipment&
                  [/div]
                [/div]

&Item \ group \ repeat&[comment] --- start of item wrapper --- [/comment]
                  [div=/* flexbox */
                  --margin01: &Margin (0 If First Equipment Block and 20 If Second Onwards) \ select \ 0 \ 20&px;
                  display: flex;
                  flex-flow: row wrap;
                  justify-content: center;
                  margin-left: -15px;
                  width: calc(100% + 15px);]

[div=/* flex LEFT */
                    display: flex;
                    align-items: center;
                    box-sizing: border-box;
                    margin-top: var(--margin01);
                    padding: 0 25px;
                    flex: 1;
                    min-width: 100px;
                    max-width: 115px;]
                      [div=/* image */
                      padding-top: 100%;
                      width: 100%;
                      background: url(&Item Image URL \ text&) center/contain no-repeat;]
                      [/div]
                    [/div]

[div=/* flex RIGHT */
                    box-sizing: border-box;
                    margin-top: var(--margin01);
                    padding: 15px;
                    flex: 5;
                    width: 100%;
                    min-width: 200px;
                    background: var(--Color01);
                    color: var(--White);]
                      [div=white-space: pre-line;]&Item Description \ text&[/div]
                    [/div]

[/div]
                  [comment] --- end of item wrapper --- [/comment]&end&

[/div]
                [comment] --- end of equipment section --- [/comment]&end&

[div=/* spacer */
                height: 50px;]
                [/div]

[div=/* tab cover pt.I - DON'T TOUCH */
                border-radius: 50%;
                padding-bottom: 5px;
                height: 25px;
                width: 30px;
                background: var(--Color02);
                font-family: var(--HeaderFont);
                font-size: 17px;
                line-height: 0;
                color:  var(--Color01);
                position: absolute;
                bottom: 43px;
                left: -41px;
                display: flex;
                justify-content: center;
                align-items: center;
                transform: rotate(-10deg);]
                  04
                [/div]

[div=/* tab cover pt.II */
                border-radius: 50px;
                padding: 5px 15px 6px;
                background: var(--Color02);
                font-family: var(--BodyFont);
                font-size: 13px;
                line-height: 100%;
                color: var(--Color01);
                text-transform: uppercase;
                position: absolute;
                bottom: 57px;
                left: -5px;
                display: flex;
                justify-content: center;
                align-items: center;
                transform: rotate(-10deg);
                z-index: 5;]
                  Abilities
                [/div]

[/div]
            [/div]
          [/div]
        &end&[/tab]

[tab=050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505]&Tab Five \ group&
          [div=/* tab content wrapper */
          width: calc(100% - 60px);
          height: 70vh;
          max-height: 750px;
          min-height: 500px;
          position: absolute;
          right: -20px;
          bottom: 33px;
          z-index: 3;]
            [div=/* scrollbox wrapper */
            width: 100%;
            max-width: 900px;
            height: 100%;
            overflow: hidden;]
              [div=/* scrollbox */
              padding-right: 30px;
              width: 100%;
              height: 100%;
              overflow-x: hidden;
              overflow-y: scroll;]

&Preferences \ group&[comment] --- start of preferences section --- [/comment]
                [div=/* header wrapper */
                display: flex;
                margin-top: 50px;
                margin-bottom: 5px;
                width: 100%;
                font-family: var(--HeaderFont);
                line-height: 100%;
                color: var(--Color01);
                font-weight: 700;
                position: relative;
                z-index: 3;]
                  [div=/* number */
                  display: block;
                  font-size: var(--NumSize);
                  letter-spacing: -3px;]
                    01
                  [/div]
                  [div=/* header title */
                  display: block;
                  margin-left: 5px;
                  font-size: var(--HeaderSize);]
                    &Header Title \ text \ Preferences&
                  [/div]
                [/div]

[div=/* bullet points content box */
                box-sizing: border-box;
                padding: max(20px, 5%);
                width: calc(100% - 25px);
                background: var(--White);
                font-family: var(--BodyFont);
                font-size: var(--BodySize);
                line-height: 135%;
                color: var(--Color01);
                text-align: justify;
                position: relative;
                left: 25px;]

[comment] --- start of preference block --- [/comment]
                  [div=/* number - bullet point */
                  margin-left: 20px;
                  font-family: var(--HeaderFont);]
                    Likes
                  [/div]
                  [div=/* number - bullet point */
                  margin-top: 5px;
                  color: var(--Color03);]
                    &List of Likes \ text&
                  [/div]
                  [comment] --- end of preference block --- [/comment]

[comment] --- start of preference block --- [/comment]
                  [div=/* number - bullet point */
                  margin-top: 20px;
                  margin-left: 20px;
                  font-family: var(--HeaderFont);]
                    Dislikes
                  [/div]
                  [div=/* number - bullet point */
                  margin-top: 5px;
                  color: var(--Color03);]
                    &List of Dislikes \ text&
                  [/div]
                  [comment] --- end of preference block --- [/comment]

[/div]
                [comment] --- end of preferences section --- [/comment]&end&

&Notes \ group&[comment] --- start of notes section --- [/comment]
                [div=/* header wrapper */
                display: flex;
                margin-top: 50px;
                margin-bottom: 5px;
                width: 100%;
                font-family: var(--HeaderFont);
                line-height: 100%;
                color: var(--Color01);
                font-weight: 700;
                position: relative;
                z-index: 3;]
                  [div=/* number */
                  display: block;
                  font-size: var(--NumSize);
                  letter-spacing: -3px;]
                    02
                  [/div]
                  [div=/* header title */
                  display: block;
                  margin-left: 5px;
                  font-size: var(--HeaderSize);]
                    &Header Title \ text \ Notes&
                  [/div]
                [/div]

&Bullet Point \ group \ repeat&[comment] --- start of bullet point block --- [/comment]
                  [div=/* flex box */
                  margin-top: &Margin (0 If First Note Block and 20 If Second Onwards) \ select \ 0 \ 20&px;
                  display: flex;
                  flex-flow: row nowrap;
                  width: 100%;]
                    [div=/* number - bullet point */
                    flex: 1;
                    max-width: 30px;
                    min-width: 30px;
                    font-family: var(--HeaderFont);
                    font-size: 1.1em;
                    line-height: 110%;]
                      &Bullet Point Number \ number&.
                    [/div]
                    [div=/* number - bullet point */
                    flex: 10;
                    color: var(--Color03);]
                      &Note Description \ text&
                    [/div]
                  [/div]
                  [comment] --- end of bullet point block --- [/comment]&end&

[/div]
                [comment] --- end of notes section --- [/comment]&end&

[div=/* spacer */
                height: 50px;]
                [/div]

[div=/* tab cover pt.I - DON'T TOUCH */
                border-radius: 50%;
                padding-bottom: 5px;
                height: 25px;
                width: 30px;
                background: var(--Color02);
                font-family: var(--HeaderFont);
                font-size: 17px;
                line-height: 0;
                color: var(--Color01);
                position: absolute;
                bottom: 10px;
                left: -35px;
                display: flex;
                justify-content: center;
                align-items: center;
                transform: rotate(-10deg);]
                  05
                [/div]

[div=/* tab cover pt.II */
                border-radius: 50px;
                padding: 5px 15px 6px;
                background: var(--Color02);
                font-family: var(--BodyFont);
                font-size: 13px;
                line-height: 100%;
                color: var(--Color01);
                text-transform: uppercase;
                position: absolute;
                bottom: 23px;
                left: 1px;
                display: flex;
                justify-content: center;
                align-items: center;
                transform: rotate(-10deg);
                z-index: 5;]
                  Extras
                [/div]

[/div]
            [/div]
          [/div]
        &end&[/tab]

[/tabs]
    [/div]
  [/div]
[/div]
[/nobr][comment]

---------- start of credits ---------- >

[/comment][border=0; padding: 0; margin-top: 5px; width: 100%; font-family: var(--mainfont); font-size: .6em; line-height: 100%; text-align: center; text-transform: uppercase; opacity: .6;]Code by Nano[comment][USER=20950]@Nano[/USER][/comment][/border][comment]

< ---------- end of credits ----------

[/comment]

Debug Mode

[
  "[nobr]\r\n[div=\r\n  position: relative;\r\n  overflow: hidden;]\r\n\r\n  [comment]\r\n    Designed and coded by [USER=20950]@Nano[/USER].\r\n\r\n    Please do not remove the credits or claim the code as your own work.\r\n\r\n    If you found this code outside of my public workshop, please don't use it.\r\n    I'd greatly appreciate it if you used the version of the code in that thread.\r\n\r\n    [font=Playfair Display SC]serif[/font]\r\n    [font=Dosis]sans-serif[/font]\r\n  [/comment]\r\n\r\n  [div=\r\n",
  {
    "type": "group",
    "description": "Sheet Colors",
    "markerStart": {
      "type": "group",
      "description": "Sheet Colors",
      "original": "&Sheet Colors \\ group&",
      "repeat": false,
      "indices": [
        475,
        496
      ]
    },
    "repeat": false,
    "originalChildren": [
      "\r\n  --Color01: ",
      {
        "type": "text",
        "description": "Tab Cover and Header Color",
        "marker": {
          "type": "text",
          "description": "Tab Cover and Header Color",
          "defaultValue": "",
          "original": "&Tab Cover and Header Color \\ text&",
          "indices": [
            512,
            546
          ]
        }
      },
      ";\r\n  --Color02: ",
      {
        "type": "text",
        "description": "Secondary Color",
        "marker": {
          "type": "text",
          "description": "Secondary Color",
          "defaultValue": "",
          "original": "&Secondary Color \\ text&",
          "indices": [
            563,
            586
          ]
        }
      },
      ";\r\n  --Color03: ",
      {
        "type": "text",
        "description": "Body Text Color",
        "marker": {
          "type": "text",
          "description": "Body Text Color",
          "defaultValue": "",
          "original": "&Body Text Color \\ text&",
          "indices": [
            603,
            626
          ]
        }
      },
      ";\r\n  --bgColor: ",
      {
        "type": "text",
        "description": "Main Background Color",
        "marker": {
          "type": "text",
          "description": "Main Background Color",
          "defaultValue": "",
          "original": "&Main Background Color \\ text&",
          "indices": [
            643,
            672
          ]
        }
      },
      ";\r\n  --White: ",
      {
        "type": "text",
        "description": "Text Color",
        "marker": {
          "type": "text",
          "description": "Text Color",
          "defaultValue": "#fefefe",
          "original": "&Text Color \\ text \\ #fefefe&",
          "indices": [
            687,
            715
          ]
        },
        "value": "#fefefe"
      },
      ";\r\n"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        719,
        723
      ]
    }
  },
  "\r\n\r\n  --HeaderFont: 'Playfair Display SC', serif;\r\n  --HeaderSize: 1.1em;\r\n  --NumSize: 4.5em; /* size of the numbers next to each section header */\r\n  --BodyFont: 'Dosis', sans-serif;\r\n  --BodySize: calc(.9em + 1px);\r\n\r\n",
  {
    "type": "group",
    "description": "Background Images",
    "markerStart": {
      "type": "group",
      "description": "Background Images",
      "original": "&Background Images \\ group&",
      "repeat": false,
      "indices": [
        945,
        971
      ]
    },
    "repeat": false,
    "originalChildren": [
      "\r\n  --backgroundIMG: url(",
      {
        "type": "text",
        "description": "Background Pattern",
        "marker": {
          "type": "text",
          "description": "Background Pattern",
          "defaultValue": "https://i.imgur.com/xnAuGrK.png",
          "original": "&Background Pattern \\ text \\ https://i.imgur.com/xnAuGrK.png&",
          "indices": [
            997,
            1057
          ]
        },
        "value": "https://i.imgur.com/xnAuGrK.png"
      },
      ") repeat;\r\n  --photoMain: url(",
      {
        "type": "text",
        "description": "Main Photo Reel Image URL",
        "marker": {
          "type": "text",
          "description": "Main Photo Reel Image URL",
          "defaultValue": "",
          "original": "&Main Photo Reel Image URL \\ text&",
          "indices": [
            1088,
            1121
          ]
        }
      },
      ") top center/cover no-repeat;\r\n  --photoBlur: url(",
      {
        "type": "text",
        "description": "Blurred Photo Reel Images URL",
        "marker": {
          "type": "text",
          "description": "Blurred Photo Reel Images URL",
          "defaultValue": "",
          "original": "&Blurred Photo Reel Images URL \\ text&",
          "indices": [
            1172,
            1209
          ]
        }
      },
      ") center/cover no-repeat;\r\n"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        1237,
        1241
      ]
    }
  },
  "\r\n\r\n  /* <--------------------------------- shell (don't touch) ---------------------------------> */\r\n\r\n  margin: 0 auto;\r\n  padding: 0;\r\n  width: 100%;\r\n  min-width: 300px;\r\n  height: 70vh;\r\n  max-height: 750px;\r\n  min-height: 500px;\r\n  font-size: initial;\r\n  overflow: hidden;\r\n  position: relative;]\r\n\r\n    [div=/* background */\r\n    background: var(--backgroundIMG), var(--bgColor);\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 1;\r\n    pointer-events: none;]\r\n    [/div]\r\n\r\n    [div=/* right-hand image reel */\r\n    width: 60%;\r\n    min-width: 300px;\r\n    position: absolute;\r\n    transform: rotate(-10deg);\r\n    top: -27%;\r\n    right: -100px;\r\n    z-index: 2;]\r\n      [div=width: 100%;\r\n      height: 275px;\r\n      background: var(--photoBlur);\r\n      filter: blur(3px);]\r\n      [/div]\r\n      [div=margin-top: 25px;\r\n      width: 100%;\r\n      height: 275px;\r\n      background: var(--photoMain);]\r\n      [/div]\r\n      [div=margin-top: 25px;\r\n      width: 100%;\r\n      height: 275px;\r\n      background: var(--photoBlur);\r\n      filter: blur(3px);]\r\n      [/div]\r\n      [div=margin-top: 25px;\r\n      width: 100%;\r\n      height: 275px;\r\n      background: var(--photoBlur);\r\n      filter: blur(3px);]\r\n      [/div]\r\n    [/div]\r\n\r\n    [div=/* main tab cover */\r\n    width: 100px;\r\n    height: 700px;\r\n    background: var(--Color01);\r\n    position: absolute;\r\n    transform: rotate(-10deg);\r\n    left: -90px;\r\n    bottom: -50px;\r\n    z-index: 3;\r\n    pointer-events: none;]\r\n      [div=/* tab labels wrapper */\r\n      font-family: var(--HeaderFont);\r\n      font-size: 17px;\r\n      line-height: 100%;\r\n      color: var(--White);\r\n      text-align: right;\r\n      position: absolute;\r\n      bottom: 60px;\r\n      right: 10px;]\r\n        [div=/* 01 */\r\n        display: block;]\r\n          01\r\n        [/div]\r\n        [div=/* 02 */\r\n        display: block;\r\n        margin-top: 15px;]\r\n          02\r\n        [/div]\r\n        [div=/* 03 */\r\n        display: block;\r\n        margin-top: 15px;]\r\n          03\r\n        [/div]\r\n        [div=/* 04 */\r\n        display: block;\r\n        margin-top: 15px;]\r\n          04\r\n        [/div]\r\n        [div=/* 05 */\r\n        display: block;\r\n        margin-top: 15px;]\r\n          05\r\n        [/div]\r\n      [/div]\r\n    [/div]\r\n\r\n    [div=/* tab wrapper */\r\n    width: 100%;\r\n    line-height: 27px;\r\n    position: absolute;\r\n    left: -20px;\r\n    bottom: -33px;]\r\n      [tabs]\r\n\r\n\r\n        [tab=010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101]",
  {
    "type": "group",
    "description": "Tab One",
    "markerStart": {
      "type": "group",
      "description": "Tab One",
      "original": "&Tab One \\ group&",
      "repeat": false,
      "indices": [
        3815,
        3831
      ]
    },
    "repeat": false,
    "originalChildren": [
      "\r\n          [div=/* tab content wrapper */\r\n          width: calc(100% - 60px);\r\n          height: 70vh;\r\n          max-height: 750px;\r\n          min-height: 500px;\r\n          position: absolute;\r\n          right: -20px;\r\n          bottom: 33px;\r\n          z-index: 3;]\r\n            [div=/* scrollbox wrapper */\r\n            width: 100%;\r\n            max-width: 900px;\r\n            height: 100%;\r\n            overflow: hidden;]\r\n              [div=/* scrollbox */\r\n              padding-right: 30px;\r\n              width: 100%;\r\n              height: 100%;\r\n              overflow-x: hidden;\r\n              overflow-y: scroll;]\r\n\r\n                [comment] --- start of basic information section --- [/comment]\r\n                [div=/* flexbox */\r\n                margin-left: -25px;\r\n                display: flex;\r\n                flex-flow: row wrap;\r\n                justify-content: center;\r\n                width: calc(100% + 25px);\r\n                position: relative;\r\n                top: 50px;]\r\n\r\n                  [div=/* flexbox LEFT */\r\n                  margin-left: 25px;\r\n                  margin-bottom: 25px;\r\n                  flex: 1;\r\n                  max-width: 400px;\r\n                  min-width: 200px;]\r\n                    [div=/* colored tilted box */\r\n                    padding-top: 90%;\r\n                    width: 90%;\r\n                    background: var(--Color02);\r\n                    transform: rotate(-10deg) translate(10%);\r\n                    position: relative;]\r\n                      [div=/* box with image */\r\n                      background: url(",
      {
        "type": "text",
        "description": "Profile Icon Image URL",
        "marker": {
          "type": "text",
          "description": "Profile Icon Image URL",
          "defaultValue": "",
          "original": "&Profile Icon Image URL \\ text&",
          "indices": [
            5428,
            5458
          ]
        }
      },
      ") center/cover no-repeat;\r\n                      transform: rotate(10deg);\r\n                      position: absolute;\r\n                      inset: 0;]\r\n                      [/div]\r\n                    [/div]\r\n                  [/div]\r\n\r\n                  [div=/* flexbox RIGHT */\r\n                  margin-left: 25px;\r\n                  flex: 3;\r\n                  max-width: 600px;\r\n                  min-width: 250px;]\r\n\r\n                    [comment] --- start of basic info --- [/comment]\r\n                    [div=/* basics subheader */\r\n                    margin-left: 15px;\r\n                    font-family: var(--HeaderFont);\r\n                    font-size: var(--HeaderSize);\r\n                    line-height: 100%;\r\n                    color: var(--Color01);\r\n                    font-weight: 700;]\r\n                      ",
      {
        "type": "text",
        "description": "Header Title",
        "marker": {
          "type": "text",
          "description": "Header Title",
          "defaultValue": "Basic Info",
          "original": "&Header Title \\ text \\ Basic Info&",
          "indices": [
            6294,
            6327
          ]
        },
        "value": "Basic Info"
      },
      "\r\n                    [/div]\r\n\r\n                    [div=/* basic attributes flexbox */\r\n                    margin-left: -10px;\r\n                    display: flex;\r\n                    flex-flow: row wrap;\r\n                    width: calc(100% + 10px);\r\n                    overflow: hidden;]\r\n\r\n                      ",
      {
        "type": "group",
        "description": "Basic Information",
        "markerStart": {
          "type": "group",
          "description": "Basic Information",
          "original": "&Basic Information \\ group&",
          "repeat": false,
          "indices": [
            6647,
            6673
          ]
        },
        "repeat": false,
        "originalChildren": [
          "",
          {
            "type": "group",
            "description": "Basic Info Q/A",
            "markerStart": {
              "type": "group",
              "description": "Basic Info Q/A",
              "original": "&Basic Info Q/A \\ group \\ repeat&",
              "repeat": true,
              "indices": [
                6674,
                6706
              ]
            },
            "repeat": true,
            "originalChildren": [
              "[comment] --- start of basic info tag --- [/comment]\r\n                      [div=/* name box */\r\n                      border-radius: 15px; margin-top: 10px; margin-left: 10px; display: flex; font-family: var(--BodyFont); font-size: var(--BodySize); line-height: 100%; background: var(--Color02); text-transform: capitalize;]\r\n                        [div=/* question */\r\n                        border-radius: 15px; box-sizing: border-box; padding: 6px 10px; color: var(--Color02); background: var(--Color01);]\r\n                          ",
              {
                "type": "text",
                "description": "Basic Info Question (e.g. Name)",
                "marker": {
                  "type": "text",
                  "description": "Basic Info Question (e.g. Name)",
                  "defaultValue": "",
                  "original": "&Basic Info Question (e.g. Name) \\ text&",
                  "indices": [
                    7246,
                    7285
                  ]
                }
              },
              "\r\n                        [/div]\r\n                        [div=/* answer */\r\n                        box-sizing: border-box; padding: 5px 10px; color: var(--Color01);]\r\n                          ",
              {
                "type": "text",
                "description": "Basic Info Answer (e.g. Thomas)",
                "marker": {
                  "type": "text",
                  "description": "Basic Info Answer (e.g. Thomas)",
                  "defaultValue": "",
                  "original": "&Basic Info Answer (e.g. Thomas) \\ text&",
                  "indices": [
                    7481,
                    7520
                  ]
                }
              },
              "\r\n                        [/div]\r\n                      [/div]\r\n                      [comment] --- end of basic info tag --- [/comment]"
            ],
            "children": [],
            "markerEnd": {
              "type": "end",
              "description": "end",
              "original": "&end&",
              "indices": [
                7657,
                7661
              ]
            }
          },
          ""
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            7662,
            7666
          ]
        }
      },
      "\r\n\r\n                    [/div]\r\n                    [comment] --- end of basic info --- [/comment]\r\n\r\n                  [/div]\r\n                [/div]\r\n                [comment] --- end of basic information section --- [/comment]\r\n\r\n                ",
      {
        "type": "group",
        "description": "Appearance",
        "markerStart": {
          "type": "group",
          "description": "Appearance",
          "original": "&Appearance \\ group&",
          "repeat": false,
          "indices": [
            7916,
            7935
          ]
        },
        "repeat": false,
        "originalChildren": [
          "[comment] --- start of appearance section --- [/comment]\r\n                [div=/* header wrapper */\r\n                display: flex;\r\n                margin-top: 75px;\r\n                margin-bottom: 5px;\r\n                width: 100%;\r\n                font-family: var(--HeaderFont);\r\n                line-height: 100%;\r\n                color: var(--Color01);\r\n                font-weight: 700;\r\n                position: relative;\r\n                z-index: 3;]\r\n                  [div=/* number */\r\n                  display: block;\r\n                  font-size: var(--NumSize);\r\n                  letter-spacing: -3px;]\r\n                    01\r\n                  [/div]\r\n                  [div=/* header title */\r\n                  display: block;\r\n                  margin-left: 5px;\r\n                  font-size: var(--HeaderSize);]\r\n                    ",
          {
            "type": "text",
            "description": "Header Title",
            "marker": {
              "type": "text",
              "description": "Header Title",
              "defaultValue": "Appearance",
              "original": "&Header Title \\ text \\ Appearance&",
              "indices": [
                8793,
                8826
              ]
            },
            "value": "Appearance"
          },
          "\r\n                  [/div]\r\n                [/div]\r\n\r\n                [div=/* content box */\r\n                box-sizing: border-box;\r\n                padding: max(20px, 5%);\r\n                width: calc(100% - 25px);\r\n                background: var(--White);\r\n                font-family: var(--BodyFont);\r\n                font-size: var(--BodySize);\r\n                line-height: 135%;\r\n                color: var(--Color03);\r\n                text-align: justify;\r\n                position: relative;\r\n                left: 25px;]\r\n                  [div=white-space: pre-line;]",
          {
            "type": "text",
            "description": "Body Text",
            "marker": {
              "type": "text",
              "description": "Body Text",
              "defaultValue": "",
              "original": "&Body Text \\ text&",
              "indices": [
                9408,
                9425
              ]
            }
          },
          "[/div]\r\n\r\n                  [comment] --- start of appearance tags wrapper --- [/comment]\r\n                  [div=/* appearance tags wrapper */\r\n                  margin-top: 20px;\r\n                  margin-left: -7px;\r\n                  display: flex;\r\n                  flex-flow: row wrap;\r\n                  justify-content: flex-end;\r\n                  color: var(--White);\r\n                  text-transform: lowercase;]\r\n\r\n                    ",
          {
            "type": "group",
            "description": "Appearance Tags",
            "markerStart": {
              "type": "group",
              "description": "Appearance Tags",
              "original": "&Appearance Tags \\ group \\ repeat&",
              "repeat": true,
              "indices": [
                9875,
                9908
              ]
            },
            "repeat": true,
            "originalChildren": [
              "[comment] --- start of appearance tag --- [/comment]\r\n                    [div=/* appearance tag */\r\n                    margin-left: 7px; margin-bottom: 7px; padding: 2px 8px; box-sizing: border-box; display: block; background: var(--Color01);]\r\n                      ",
              {
                "type": "text",
                "description": "Appearance Tag (e.g. Brown Hair)",
                "marker": {
                  "type": "text",
                  "description": "Appearance Tag (e.g. Brown Hair)",
                  "defaultValue": "",
                  "original": "&Appearance Tag (e.g. Brown Hair) \\ text&",
                  "indices": [
                    10178,
                    10218
                  ]
                }
              },
              "\r\n                    [/div]\r\n                    [comment] --- end of appearance tag --- [/comment]"
            ],
            "children": [],
            "markerEnd": {
              "type": "end",
              "description": "end",
              "original": "&end&",
              "indices": [
                10319,
                10323
              ]
            }
          },
          "\r\n\r\n                  [/div]\r\n                  [comment] --- end of appearance tags wrapper --- [/comment]\r\n\r\n                [/div]\r\n                [comment] --- end of appearance section --- [/comment]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            10529,
            10533
          ]
        }
      },
      "\r\n\r\n                ",
      {
        "type": "group",
        "description": "Personality",
        "markerStart": {
          "type": "group",
          "description": "Personality",
          "original": "&Personality \\ group&",
          "repeat": false,
          "indices": [
            10554,
            10574
          ]
        },
        "repeat": false,
        "originalChildren": [
          "[comment] --- start of personality section --- [/comment]\r\n                [div=/* header wrapper */\r\n                display: flex;\r\n                margin-top: 50px;\r\n                margin-bottom: 5px;\r\n                width: 100%;\r\n                font-family: var(--HeaderFont);\r\n                line-height: 100%;\r\n                color: var(--Color01);\r\n                font-weight: 700;\r\n                position: relative;\r\n                z-index: 3;]\r\n                  [div=/* number */\r\n                  display: block;\r\n                  font-size: var(--NumSize);\r\n                  letter-spacing: -3px;]\r\n                    02\r\n                  [/div]\r\n                  [div=/* header title */\r\n                  display: block;\r\n                  margin-left: 5px;\r\n                  font-size: var(--HeaderSize);]\r\n                    ",
          {
            "type": "text",
            "description": "Header Title",
            "marker": {
              "type": "text",
              "description": "Header Title",
              "defaultValue": "Personality",
              "original": "&Header Title \\ text \\ Personality&",
              "indices": [
                11433,
                11467
              ]
            },
            "value": "Personality"
          },
          "\r\n                  [/div]\r\n                [/div]\r\n\r\n                [div=/* content box */\r\n                box-sizing: border-box;\r\n                padding: max(20px, 5%);\r\n                width: calc(100% - 25px);\r\n                background: var(--White);\r\n                font-family: var(--BodyFont);\r\n                font-size: var(--BodySize);\r\n                line-height: 135%;\r\n                color: var(--Color03);\r\n                text-align: justify;\r\n                position: relative;\r\n                left: 25px;]\r\n                  [div=white-space: pre-line;]",
          {
            "type": "text",
            "description": "Body Text",
            "marker": {
              "type": "text",
              "description": "Body Text",
              "defaultValue": "",
              "original": "&Body Text \\ text&",
              "indices": [
                12049,
                12066
              ]
            }
          },
          "[/div]\r\n                [/div]\r\n                [comment] --- end of personality section --- [/comment]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            12170,
            12174
          ]
        }
      },
      "\r\n\r\n                [div=/* spacer */\r\n                height: 50px;]\r\n                [/div]\r\n\r\n                [div=/* tab cover pt.I - DON'T TOUCH */\r\n                border-radius: 50%;\r\n                padding-bottom: 5px;\r\n                height: 25px;\r\n                width: 30px;\r\n                background: var(--Color02);\r\n                font-family: var(--HeaderFont);\r\n                font-size: 17px;\r\n                line-height: 0;\r\n                color: var(--Color01);\r\n                position: absolute;\r\n                bottom: 136px;\r\n                left: -57px;\r\n                display: flex;\r\n                justify-content: center;\r\n                align-items: center;\r\n                transform: rotate(-10deg);]\r\n                  01\r\n                [/div]\r\n\r\n                [div=/* tab cover pt.II */\r\n                border-radius: 50px;\r\n                padding: 5px 15px 6px;\r\n                background: var(--Color02);\r\n                font-family: var(--BodyFont);\r\n                font-size: 13px;\r\n                line-height: 100%;\r\n                color: var(--Color01);\r\n                text-transform: uppercase;\r\n                position: absolute;\r\n                bottom: 149px;\r\n                left: -21px;\r\n                display: flex;\r\n                justify-content: center;\r\n                align-items: center;\r\n                transform: rotate(-10deg);\r\n                z-index: 5;]\r\n                  Basics\r\n                [/div]\r\n\r\n              [/div]\r\n            [/div]\r\n          [/div]\r\n        "
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        13743,
        13747
      ]
    }
  },
  "[/tab]\r\n\r\n\r\n\r\n        [tab=020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202]",
  {
    "type": "group",
    "description": "Tab Two",
    "markerStart": {
      "type": "group",
      "description": "Tab Two",
      "original": "&Tab Two \\ group&",
      "repeat": false,
      "indices": [
        13920,
        13936
      ]
    },
    "repeat": false,
    "originalChildren": [
      "\r\n          [div=/* tab content wrapper */\r\n          width: calc(100% - 60px);\r\n          height: 70vh;\r\n          max-height: 750px;\r\n          min-height: 500px;\r\n          position: absolute;\r\n          right: -20px;\r\n          bottom: 33px;\r\n          z-index: 3;]\r\n            [div=/* scrollbox wrapper */\r\n            width: 100%;\r\n            max-width: 900px;\r\n            height: 100%;\r\n            overflow: hidden;]\r\n              [div=/* scrollbox */\r\n              padding-right: 30px;\r\n              width: 100%;\r\n              height: 100%;\r\n              overflow-x: hidden;\r\n              overflow-y: scroll;]\r\n\r\n                [div=visibility: hidden;\r\n                width: calc(100% - 20px);\r\n                position: relative;\r\n                left: 20px;]\r\n                  [accordion=100%]\r\n\r\n                    ",
      {
        "type": "group",
        "description": "Backstory Accordions",
        "markerStart": {
          "type": "group",
          "description": "Backstory Accordions",
          "original": "&Backstory Accordions \\ group \\ repeat&",
          "repeat": true,
          "indices": [
            14778,
            14816
          ]
        },
        "repeat": true,
        "originalChildren": [
          "[comment] --- start of slide --- [/comment]\r\n                    {slide=",
          {
            "type": "select",
            "description": "Select \"open\" if first accordion or \"closed\" if second",
            "marker": {
              "type": "select",
              "description": "Select \"open\" if first accordion or \"closed\" if second",
              "options": [
                "open",
                "closed"
              ],
              "original": "&Select \"open\" if first accordion or \"closed\" if second \\ select \\ open \\ closed&",
              "indices": [
                14889,
                14969
              ]
            }
          },
          "|[nobr]\r\n                      [div=/* slide title wrapper */\r\n                      margin-top: 50px;\r\n                      visibility: visible;\r\n                      background: var(--White);\r\n                      font-size: initial;\r\n                      box-sizing: border-box;\r\n                      padding: max(20px, 3%);\r\n                      position: relative;]\r\n\r\n                        [div=/* slide title */\r\n                        display: flex;\r\n                        width: 100%;\r\n                        font-family: var(--HeaderFont);\r\n                        line-height: 100%;\r\n                        color: var(--Color01);\r\n                        font-weight: 700;\r\n                        position: absolute;\r\n                        top: -20px;\r\n                        left: -25px;]\r\n                          [div=/* number */\r\n                          display: block;\r\n                          font-size: var(--NumSize);\r\n                          letter-spacing: -3px;]\r\n                            0",
          {
            "type": "number",
            "description": "Backstory Part Number (e.g. 1, 2, 3, etc) (note: writing 1 in the field will generate 01 in the actual sheet and so on)",
            "marker": {
              "type": "number",
              "description": "Backstory Part Number (e.g. 1, 2, 3, etc) (note: writing 1 in the field will generate 01 in the actual sheet and so on)",
              "defaultValue": null,
              "min": null,
              "max": null,
              "original": "&Backstory Part Number (e.g. 1, 2, 3, etc) (note: writing 1 in the field will generate 01 in the actual sheet and so on) \\ number&",
              "indices": [
                16010,
                16139
              ]
            }
          },
          "\r\n                          [/div]\r\n                          [div=/* header title */\r\n                          display: block;\r\n                          margin-left: 5px;\r\n                          font-size: var(--HeaderSize);]\r\n                            ",
          {
            "type": "text",
            "description": "Backstory Accordion Header",
            "marker": {
              "type": "text",
              "description": "Backstory Accordion Header",
              "defaultValue": "",
              "original": "&Backstory Accordion Header \\ text&",
              "indices": [
                16401,
                16435
              ]
            }
          },
          "\r\n                          [/div]\r\n                        [/div]\r\n\r\n                        [div=/* slide image */\r\n                        width: 100%;\r\n                        height: 200px;\r\n                        background: url(",
          {
            "type": "text",
            "description": "Backstory Slide Image URL",
            "marker": {
              "type": "text",
              "description": "Backstory Slide Image URL",
              "defaultValue": "",
              "original": "&Backstory Slide Image URL \\ text&",
              "indices": [
                16672,
                16705
              ]
            }
          },
          ") center/cover no-repeat;]\r\n                        [/div]\r\n\r\n                      [/div]\r\n                    [/nobr]}[nobr]\r\n                      [div=/* slide contents */\r\n                      visibility: visible;\r\n                      box-sizing: border-box;\r\n                      padding: max(20px, 3%);\r\n                      background: var(--White);\r\n                      width: 100%;\r\n                      font-family: var(--BodyFont);\r\n                      font-size: var(--BodySize);\r\n                      line-height: 135%;\r\n                      color: var(--Color03);\r\n                      text-align: justify;\r\n                      position: relative;\r\n                      top: 0;]\r\n                        [div=white-space: pre-line;]",
          {
            "type": "text",
            "description": "Backstory Body Text",
            "marker": {
              "type": "text",
              "description": "Backstory Body Text",
              "defaultValue": "",
              "original": "&Backstory Body Text \\ text&",
              "indices": [
                17469,
                17496
              ]
            }
          },
          "[/div]\r\n                      [/div]\r\n                    [/nobr]{/slide}\r\n                    [comment] --- end of slide --- [/comment]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            17633,
            17637
          ]
        }
      },
      "\r\n\r\n                  [/accordion]\r\n                [/div]\r\n\r\n                [div=/* spacer */\r\n                height: 50px;]\r\n                [/div]\r\n\r\n                [div=/* tab cover pt.I - DON'T TOUCH */\r\n                border-radius: 50%;\r\n                padding-bottom: 5px;\r\n                height: 25px;\r\n                width: 30px;\r\n                background: var(--Color02);\r\n                font-family: var(--HeaderFont);\r\n                font-size: 17px;\r\n                line-height: 0;\r\n                color: var(--Color01);\r\n                position: absolute;\r\n                bottom: 105px;\r\n                left: -52px;\r\n                display: flex;\r\n                justify-content: center;\r\n                align-items: center;\r\n                transform: rotate(-10deg);]\r\n                  02\r\n                [/div]\r\n\r\n                [div=/* tab cover pt.II */\r\n                border-radius: 50px;\r\n                padding: 5px 15px 6px;\r\n                background: var(--Color02);\r\n                font-family: var(--BodyFont);\r\n                font-size: 13px;\r\n                line-height: 100%;\r\n                color: var(--Color01);\r\n                text-transform: uppercase;\r\n                position: absolute;\r\n                bottom: 119px;\r\n                left: -16px;\r\n                display: flex;\r\n                justify-content: center;\r\n                align-items: center;\r\n                transform: rotate(-10deg);\r\n                z-index: 5;]\r\n                  Backstory\r\n                [/div]\r\n\r\n              [/div]\r\n            [/div]\r\n          [/div]\r\n        "
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        19267,
        19271
      ]
    }
  },
  "[/tab]\r\n\r\n\r\n\r\n        [tab=030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303]",
  {
    "type": "group",
    "description": "Tab Three",
    "markerStart": {
      "type": "group",
      "description": "Tab Three",
      "original": "&Tab Three \\ group&",
      "repeat": false,
      "indices": [
        19444,
        19462
      ]
    },
    "repeat": false,
    "originalChildren": [
      "\r\n          [div=/* tab content wrapper */\r\n          width: calc(100% - 60px);\r\n          height: 70vh;\r\n          max-height: 750px;\r\n          min-height: 500px;\r\n          position: absolute;\r\n          right: -20px;\r\n          bottom: 33px;\r\n          z-index: 3;]\r\n            [div=/* scrollbox wrapper */\r\n            width: 100%;\r\n            max-width: 900px;\r\n            height: 100%;\r\n            overflow: hidden;]\r\n              [div=/* scrollbox */\r\n              padding-right: 30px;\r\n              width: 100%;\r\n              height: 100%;\r\n              overflow-x: hidden;\r\n              overflow-y: scroll;]\r\n\r\n                ",
      {
        "type": "group",
        "description": "Character Relationship",
        "markerStart": {
          "type": "group",
          "description": "Character Relationship",
          "original": "&Character Relationship \\ group \\ repeat&",
          "repeat": true,
          "indices": [
            20110,
            20150
          ]
        },
        "repeat": true,
        "originalChildren": [
          "[comment] --- start of character relationship --- [/comment]\r\n                [div=/* flexbox */\r\n                display: flex;\r\n                flex-flow: row wrap;\r\n                margin-left: 50px;]\r\n\r\n                  [div=/* flex LEFT */\r\n                  display: flex;\r\n                  align-items: center;\r\n                  margin-top: 80px;\r\n                  margin-left: -50px;\r\n                  flex: 1;\r\n                  min-width: 200px;\r\n                  position: relative;\r\n                  z-index: 6;]\r\n                    [div=/* image box */\r\n                    height: 275px;\r\n                    width: 95%;\r\n                    background: url(",
          {
            "type": "text",
            "description": "Relationship Image URL",
            "marker": {
              "type": "text",
              "description": "Relationship Image URL",
              "defaultValue": "",
              "original": "&Relationship Image URL \\ text&",
              "indices": [
                20831,
                20861
              ]
            }
          },
          ") center/cover no-repeat;\r\n                    position: relative;]\r\n\r\n                      [div=/* heart icon */\r\n                      display: flex;\r\n                      justify-content: center;\r\n                      align-items: center;\r\n                      border-radius: 50%;\r\n                      width: 25px;\r\n                      height: 25px;\r\n                      background: var(--Color02);\r\n                      color: var(--Color01);\r\n                      position: absolute;\r\n                      bottom: 40px;\r\n                      right: -13px;\r\n                      font-size: 11px;]\r\n                        ",
          {
            "type": "text",
            "description": "Relationship Font Awesome Icon",
            "marker": {
              "type": "text",
              "description": "Relationship Font Awesome Icon",
              "defaultValue": "[fa]fas fa-heart[/fa]",
              "original": "&Relationship Font Awesome Icon \\ text \\ [fa]fas fa-heart[/fa]&",
              "indices": [
                21503,
                21565
              ]
            },
            "value": "[fa]fas fa-heart[/fa]"
          },
          "\r\n                      [/div]\r\n\r\n                      [div=/* CS Link */\r\n                      display: flex;\r\n                      justify-content: center;\r\n                      align-items: center;\r\n                      border-radius: 50%;\r\n                      width: 25px;\r\n                      height: 25px;\r\n                      background: var(--Color02);\r\n                      color: var(--Color01);\r\n                      position: absolute;\r\n                      bottom: 10px;\r\n                      right: -13px;\r\n                      font-family: var(--HeaderFont);\r\n                      font-size: 11px;\r\n                      text-transform: uppercase;]\r\n                        [URL=",
          {
            "type": "text",
            "description": "Link to CS",
            "marker": {
              "type": "text",
              "description": "Link to CS",
              "defaultValue": "google.com",
              "original": "&Link to CS \\ text \\ google.com&",
              "indices": [
                22277,
                22308
              ]
            },
            "value": "google.com"
          },
          "]CS[/URL]\r\n                      [/div]\r\n\r\n                    [/div]\r\n                  [/div]\r\n  \r\n                  [div=/* flex RIGHT */\r\n                  box-sizing: border-box;\r\n                  margin-top: 80px;\r\n                  margin-left: -60px;\r\n                  padding: max(10px, 5%);\r\n                  flex: 7;\r\n                  width: 100%;\r\n                  min-width: 200px;\r\n                  background: var(--White);\r\n                  font-family: var(--BodyFont);\r\n                  font-size: var(--BodySize);\r\n                  line-height: 135%;\r\n                  color: var(--Color01);\r\n                  text-align: justify;\r\n                  position: relative;]\r\n\r\n                    [div=/* quote section wrapper */\r\n                    display: flex;\r\n                    flex-flow: row nowrap;\r\n                    justify-content: right;]\r\n                      [comment] --- start of quote section --- [/comment]\r\n                      [div=/* quote box */\r\n                      box-sizing: border-box;\r\n                      border-radius: 5px;\r\n                      padding: 5px 50px 5px 7px;\r\n                      width: calc(100% - 35px);\r\n                      max-width: 450px;\r\n                      background: var(--Color02);\r\n                      line-height: 115%;\r\n                      text-align: left;\r\n                      position: relative;\r\n                      top: -65px;\r\n                      right: 20px;\r\n                      color: var(--Color03);]\r\n\r\n                        [comment] QUOTE GOES HERE [/comment]\r\n                        ",
          {
            "type": "text",
            "description": "Quote About RS",
            "marker": {
              "type": "text",
              "description": "Quote About RS",
              "defaultValue": "",
              "original": "&Quote About RS \\ text&",
              "indices": [
                23925,
                23947
              ]
            }
          },
          "\r\n\r\n                        [div=/* circle image */\r\n                        border-radius: 50%;\r\n                        width: 75px;\r\n                        height: 75px;\r\n                        background: var(--Color02) url(",
          {
            "type": "text",
            "description": "Quote React Image Icon URL",
            "marker": {
              "type": "text",
              "description": "Quote React Image Icon URL",
              "defaultValue": "",
              "original": "&Quote React Image Icon URL \\ text&",
              "indices": [
                24178,
                24212
              ]
            }
          },
          ") center/cover no-repeat;\r\n                        position: absolute;\r\n                        top: -25px;\r\n                        right: -30px;]\r\n                          [div=/* quote mark */\r\n                          box-sizing: border-box;\r\n                          display: flex;\r\n                          justify-content: center;\r\n                          align-items: center;\r\n                          border-radius: 50%;\r\n                          border: 4px solid var(--White);\r\n                          width: 37px;\r\n                          height: 37px;\r\n                          background: var(--Color02);\r\n                          color: var(--White);\r\n                          font-size: 12px;\r\n                          position: absolute;\r\n                          left: -7px;\r\n                          bottom: -5px;]\r\n                            [fa]fas fa-quote-left[/fa]\r\n                          [/div]\r\n                        [/div]\r\n                      [/div]\r\n                    [/div]\r\n\r\n                    [div=/* header */\r\n                    margin-top: -55px;\r\n                    margin-left: 65px;\r\n                    font-family: var(--HeaderFont);\r\n                    line-height: 100%;\r\n                    text-transform: capitalize;]\r\n                      ",
          {
            "type": "text",
            "description": "Character Name",
            "marker": {
              "type": "text",
              "description": "Character Name",
              "defaultValue": "",
              "original": "&Character Name \\ text&",
              "indices": [
                25532,
                25554
              ]
            }
          },
          "\r\n                    [/div]\r\n\r\n                    [div=/* relationship content */\r\n                    margin-top: 15px;\r\n                    margin-left: 40px;\r\n                    text-align: justify;\r\n                    color: var(--Color03);]\r\n                      [div=white-space: pre-line;]",
          {
            "type": "text",
            "description": "Relationship Body Text",
            "marker": {
              "type": "text",
              "description": "Relationship Body Text",
              "defaultValue": "",
              "original": "&Relationship Body Text \\ text&",
              "indices": [
                25856,
                25886
              ]
            }
          },
          "[/div]\r\n                    [/div]\r\n\r\n                  [/div]\r\n                [/div]\r\n                [comment] --- end of character relationship --- [/comment]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            26049,
            26053
          ]
        }
      },
      "\r\n\r\n                [div=/* spacer */\r\n                height: 50px;]\r\n                [/div]\r\n\r\n                [div=/* tab cover pt.I - DON'T TOUCH */\r\n                border-radius: 50%;\r\n                padding-bottom: 5px;\r\n                height: 25px;\r\n                width: 30px;\r\n                background: var(--Color02);\r\n                font-family: var(--HeaderFont);\r\n                font-size: 17px;\r\n                line-height: 0;\r\n                color:  var(--Color01);\r\n                position: absolute;\r\n                bottom: 74px;\r\n                left: -47px;\r\n                display: flex;\r\n                justify-content: center;\r\n                align-items: center;\r\n                transform: rotate(-10deg);]\r\n                  03\r\n                [/div]\r\n\r\n                [div=/* tab cover pt.II */\r\n                border-radius: 50px;\r\n                padding: 5px 15px 6px;\r\n                background: var(--Color02);\r\n                font-family: var(--BodyFont);\r\n                font-size: 13px;\r\n                line-height: 100%;\r\n                color: var(--Color01);\r\n                text-transform: uppercase;\r\n                position: absolute;\r\n                bottom: 91px;\r\n                left: -11px;\r\n                display: flex;\r\n                justify-content: center;\r\n                align-items: center;\r\n                transform: rotate(-10deg);\r\n                z-index: 7;]\r\n                  Relationships\r\n                [/div]\r\n\r\n              [/div]\r\n            [/div]\r\n          [/div]\r\n        "
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        27628,
        27632
      ]
    }
  },
  "[/tab]\r\n\r\n\r\n\r\n        [tab=040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404]",
  {
    "type": "group",
    "description": "Tab Four",
    "markerStart": {
      "type": "group",
      "description": "Tab Four",
      "original": "&Tab Four \\ group&",
      "repeat": false,
      "indices": [
        27805,
        27822
      ]
    },
    "repeat": false,
    "originalChildren": [
      "\r\n          [div=/* tab content wrapper */\r\n          width: calc(100% - 60px);\r\n          height: 70vh;\r\n          max-height: 750px;\r\n          min-height: 500px;\r\n          position: absolute;\r\n          right: -20px;\r\n          bottom: 33px;\r\n          z-index: 3;]\r\n            [div=/* scrollbox wrapper */\r\n            width: 100%;\r\n            max-width: 900px;\r\n            height: 100%;\r\n            overflow: hidden;]\r\n              [div=/* scrollbox */\r\n              padding-right: 30px;\r\n              width: 100%;\r\n              height: 100%;\r\n              overflow-x: hidden;\r\n              overflow-y: scroll;]\r\n\r\n                ",
      {
        "type": "group",
        "description": "Combat Data",
        "markerStart": {
          "type": "group",
          "description": "Combat Data",
          "original": "&Combat Data \\ group&",
          "repeat": false,
          "indices": [
            28470,
            28490
          ]
        },
        "repeat": false,
        "originalChildren": [
          "[comment] --- start of combat data section --- [/comment]\r\n                [div=/* header wrapper */\r\n                display: flex;\r\n                margin-top: 50px;\r\n                margin-bottom: 5px;\r\n                width: 100%;\r\n                font-family: var(--HeaderFont);\r\n                line-height: 100%;\r\n                color: var(--Color01);\r\n                font-weight: 700;\r\n                position: relative;\r\n                z-index: 3;]\r\n                  [div=/* number */\r\n                  display: block;\r\n                  font-size: var(--NumSize);\r\n                  letter-spacing: -3px;]\r\n                    01\r\n                  [/div]\r\n                  [div=/* header title */\r\n                  display: block;\r\n                  margin-left: 5px;\r\n                  font-size: var(--HeaderSize);]\r\n                    ",
          {
            "type": "text",
            "description": "Header Title",
            "marker": {
              "type": "text",
              "description": "Header Title",
              "defaultValue": "Combat Data",
              "original": "&Header Title \\ text \\ Combat Data&",
              "indices": [
                29349,
                29383
              ]
            },
            "value": "Combat Data"
          },
          "\r\n                  [/div]\r\n                [/div]\r\n\r\n                [div=/* content box */\r\n                box-sizing: border-box;\r\n                padding: max(20px, 5%);\r\n                width: calc(100% - 25px);\r\n                background: var(--White);\r\n                font-family: var(--BodyFont);\r\n                font-size: var(--BodySize);\r\n                line-height: 135%;\r\n                color: var(--Color01);\r\n                text-align: justify;\r\n                position: relative;\r\n                left: 25px;]\r\n\r\n                  ",
          {
            "type": "group",
            "description": "Skill Block",
            "markerStart": {
              "type": "group",
              "description": "Skill Block",
              "original": "&Skill Block \\ group \\ repeat&",
              "repeat": true,
              "indices": [
                29939,
                29968
              ]
            },
            "repeat": true,
            "originalChildren": [
              "[comment] --- start of skills block --- [/comment]\r\n                  [div=/* topic title */\r\n                  margin-top: ",
              {
                "type": "select",
                "description": "Margin (0 If First Skill Block and 20 If Second Onwards)",
                "marker": {
                  "type": "select",
                  "description": "Margin (0 If First Skill Block and 20 If Second Onwards)",
                  "options": [
                    "0",
                    "20"
                  ],
                  "original": "&Margin (0 If First Skill Block and 20 If Second Onwards) \\ select \\ 0 \\ 20&",
                  "indices": [
                    30093,
                    30168
                  ]
                }
              },
              "px;\r\n                  margin-left: 20px;\r\n                  font-family: var(--HeaderFont);]\r\n                    ",
              {
                "type": "text",
                "description": "Skill Name",
                "marker": {
                  "type": "text",
                  "description": "Skill Name",
                  "defaultValue": "",
                  "original": "&Skill Name \\ text&",
                  "indices": [
                    30284,
                    30302
                  ]
                }
              },
              "\r\n                  [/div]\r\n                  [div=/* topic content */\r\n                  margin-top: 5px;\r\n                  color: var(--Color03);]\r\n                    [div=white-space: pre-line;]",
              {
                "type": "text",
                "description": "Skill Description",
                "marker": {
                  "type": "text",
                  "description": "Skill Description",
                  "defaultValue": "",
                  "original": "&Skill Description \\ text&",
                  "indices": [
                    30502,
                    30527
                  ]
                }
              },
              "[/div]\r\n                  [/div]\r\n                  [comment] --- end of skills block --- [/comment]"
            ],
            "children": [],
            "markerEnd": {
              "type": "end",
              "description": "end",
              "original": "&end&",
              "indices": [
                30628,
                30632
              ]
            }
          },
          "\r\n\r\n                [/div]\r\n                [comment] --- end of combat data section --- [/comment]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            30732,
            30736
          ]
        }
      },
      "\r\n\r\n                ",
      {
        "type": "group",
        "description": "Equipment",
        "markerStart": {
          "type": "group",
          "description": "Equipment",
          "original": "&Equipment \\ group&",
          "repeat": false,
          "indices": [
            30757,
            30775
          ]
        },
        "repeat": false,
        "originalChildren": [
          "[comment] --- start of equipment section --- [/comment]\r\n                [div=/* header wrapper */\r\n                display: flex;\r\n                margin-top: 50px;\r\n                margin-bottom: 5px;\r\n                width: 100%;\r\n                font-family: var(--HeaderFont);\r\n                line-height: 100%;\r\n                color: var(--Color01);\r\n                font-weight: 700;\r\n                position: relative;\r\n                z-index: 3;]\r\n                  [div=/* number */\r\n                  display: block;\r\n                  font-size: var(--NumSize);\r\n                  letter-spacing: -3px;]\r\n                    02\r\n                  [/div]\r\n                  [div=/* header title */\r\n                  display: block;\r\n                  margin-left: 5px;\r\n                  font-size: var(--HeaderSize);]\r\n                    ",
          {
            "type": "text",
            "description": "Header Title",
            "marker": {
              "type": "text",
              "description": "Header Title",
              "defaultValue": "Equipment",
              "original": "&Header Title \\ text \\ Equipment&",
              "indices": [
                31632,
                31664
              ]
            },
            "value": "Equipment"
          },
          "\r\n                  [/div]\r\n                [/div]\r\n\r\n                [div=/* content box */\r\n                box-sizing: border-box;\r\n                padding: max(20px, 5%);\r\n                width: calc(100% - 25px);\r\n                background: var(--White);\r\n                font-family: var(--BodyFont);\r\n                font-size: var(--BodySize);\r\n                line-height: 135%;\r\n                color: var(--Color03);\r\n                text-align: justify;\r\n                position: relative;\r\n                left: 25px;]\r\n\r\n                  ",
          {
            "type": "group",
            "description": "Item",
            "markerStart": {
              "type": "group",
              "description": "Item",
              "original": "&Item \\ group \\ repeat&",
              "repeat": true,
              "indices": [
                32220,
                32242
              ]
            },
            "repeat": true,
            "originalChildren": [
              "[comment] --- start of item wrapper --- [/comment]\r\n                  [div=/* flexbox */\r\n                  --margin01: ",
              {
                "type": "select",
                "description": "Margin (0 If First Equipment Block and 20 If Second Onwards)",
                "marker": {
                  "type": "select",
                  "description": "Margin (0 If First Equipment Block and 20 If Second Onwards)",
                  "options": [
                    "0",
                    "20"
                  ],
                  "original": "&Margin (0 If First Equipment Block and 20 If Second Onwards) \\ select \\ 0 \\ 20&",
                  "indices": [
                    32363,
                    32442
                  ]
                }
              },
              "px;\r\n                  display: flex;\r\n                  flex-flow: row wrap;\r\n                  justify-content: center;\r\n                  margin-left: -15px;\r\n                  width: calc(100% + 15px);]\r\n\r\n                    [div=/* flex LEFT */\r\n                    display: flex;\r\n                    align-items: center;\r\n                    box-sizing: border-box;\r\n                    margin-top: var(--margin01);\r\n                    padding: 0 25px;\r\n                    flex: 1;\r\n                    min-width: 100px;\r\n                    max-width: 115px;]\r\n                      [div=/* image */\r\n                      padding-top: 100%;\r\n                      width: 100%;\r\n                      background: url(",
              {
                "type": "text",
                "description": "Item Image URL",
                "marker": {
                  "type": "text",
                  "description": "Item Image URL",
                  "defaultValue": "",
                  "original": "&Item Image URL \\ text&",
                  "indices": [
                    33171,
                    33193
                  ]
                }
              },
              ") center/contain no-repeat;]\r\n                      [/div]\r\n                    [/div]\r\n\r\n                    [div=/* flex RIGHT */\r\n                    box-sizing: border-box;\r\n                    margin-top: var(--margin01);\r\n                    padding: 15px;\r\n                    flex: 5;\r\n                    width: 100%;\r\n                    min-width: 200px;\r\n                    background: var(--Color01);\r\n                    color: var(--White);]\r\n                      [div=white-space: pre-line;]",
              {
                "type": "text",
                "description": "Item Description",
                "marker": {
                  "type": "text",
                  "description": "Item Description",
                  "defaultValue": "",
                  "original": "&Item Description \\ text&",
                  "indices": [
                    33703,
                    33727
                  ]
                }
              },
              "[/div]\r\n                    [/div]\r\n\r\n                  [/div]\r\n                  [comment] --- end of item wrapper --- [/comment]"
            ],
            "children": [],
            "markerEnd": {
              "type": "end",
              "description": "end",
              "original": "&end&",
              "indices": [
                33858,
                33862
              ]
            }
          },
          "\r\n\r\n                [/div]\r\n                [comment] --- end of equipment section --- [/comment]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            33960,
            33964
          ]
        }
      },
      "\r\n\r\n                [div=/* spacer */\r\n                height: 50px;]\r\n                [/div]\r\n\r\n                [div=/* tab cover pt.I - DON'T TOUCH */\r\n                border-radius: 50%;\r\n                padding-bottom: 5px;\r\n                height: 25px;\r\n                width: 30px;\r\n                background: var(--Color02);\r\n                font-family: var(--HeaderFont);\r\n                font-size: 17px;\r\n                line-height: 0;\r\n                color:  var(--Color01);\r\n                position: absolute;\r\n                bottom: 43px;\r\n                left: -41px;\r\n                display: flex;\r\n                justify-content: center;\r\n                align-items: center;\r\n                transform: rotate(-10deg);]\r\n                  04\r\n                [/div]\r\n\r\n                [div=/* tab cover pt.II */\r\n                border-radius: 50px;\r\n                padding: 5px 15px 6px;\r\n                background: var(--Color02);\r\n                font-family: var(--BodyFont);\r\n                font-size: 13px;\r\n                line-height: 100%;\r\n                color: var(--Color01);\r\n                text-transform: uppercase;\r\n                position: absolute;\r\n                bottom: 57px;\r\n                left: -5px;\r\n                display: flex;\r\n                justify-content: center;\r\n                align-items: center;\r\n                transform: rotate(-10deg);\r\n                z-index: 5;]\r\n                  Abilities\r\n                [/div]\r\n\r\n              [/div]\r\n            [/div]\r\n          [/div]\r\n        "
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        35534,
        35538
      ]
    }
  },
  "[/tab]\r\n\r\n\r\n\r\n        [tab=050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505]",
  {
    "type": "group",
    "description": "Tab Five",
    "markerStart": {
      "type": "group",
      "description": "Tab Five",
      "original": "&Tab Five \\ group&",
      "repeat": false,
      "indices": [
        35711,
        35728
      ]
    },
    "repeat": false,
    "originalChildren": [
      "\r\n          [div=/* tab content wrapper */\r\n          width: calc(100% - 60px);\r\n          height: 70vh;\r\n          max-height: 750px;\r\n          min-height: 500px;\r\n          position: absolute;\r\n          right: -20px;\r\n          bottom: 33px;\r\n          z-index: 3;]\r\n            [div=/* scrollbox wrapper */\r\n            width: 100%;\r\n            max-width: 900px;\r\n            height: 100%;\r\n            overflow: hidden;]\r\n              [div=/* scrollbox */\r\n              padding-right: 30px;\r\n              width: 100%;\r\n              height: 100%;\r\n              overflow-x: hidden;\r\n              overflow-y: scroll;]\r\n\r\n                ",
      {
        "type": "group",
        "description": "Preferences",
        "markerStart": {
          "type": "group",
          "description": "Preferences",
          "original": "&Preferences \\ group&",
          "repeat": false,
          "indices": [
            36376,
            36396
          ]
        },
        "repeat": false,
        "originalChildren": [
          "[comment] --- start of preferences section --- [/comment]\r\n                [div=/* header wrapper */\r\n                display: flex;\r\n                margin-top: 50px;\r\n                margin-bottom: 5px;\r\n                width: 100%;\r\n                font-family: var(--HeaderFont);\r\n                line-height: 100%;\r\n                color: var(--Color01);\r\n                font-weight: 700;\r\n                position: relative;\r\n                z-index: 3;]\r\n                  [div=/* number */\r\n                  display: block;\r\n                  font-size: var(--NumSize);\r\n                  letter-spacing: -3px;]\r\n                    01\r\n                  [/div]\r\n                  [div=/* header title */\r\n                  display: block;\r\n                  margin-left: 5px;\r\n                  font-size: var(--HeaderSize);]\r\n                    ",
          {
            "type": "text",
            "description": "Header Title",
            "marker": {
              "type": "text",
              "description": "Header Title",
              "defaultValue": "Preferences",
              "original": "&Header Title \\ text \\ Preferences&",
              "indices": [
                37255,
                37289
              ]
            },
            "value": "Preferences"
          },
          "\r\n                  [/div]\r\n                [/div]\r\n\r\n                [div=/* bullet points content box */\r\n                box-sizing: border-box;\r\n                padding: max(20px, 5%);\r\n                width: calc(100% - 25px);\r\n                background: var(--White);\r\n                font-family: var(--BodyFont);\r\n                font-size: var(--BodySize);\r\n                line-height: 135%;\r\n                color: var(--Color01);\r\n                text-align: justify;\r\n                position: relative;\r\n                left: 25px;]\r\n\r\n                  [comment] --- start of preference block --- [/comment]\r\n                  [div=/* number - bullet point */\r\n                  margin-left: 20px;\r\n                  font-family: var(--HeaderFont);]\r\n                    Likes\r\n                  [/div]\r\n                  [div=/* number - bullet point */\r\n                  margin-top: 5px;\r\n                  color: var(--Color03);]\r\n                    ",
          {
            "type": "text",
            "description": "List of Likes",
            "marker": {
              "type": "text",
              "description": "List of Likes",
              "defaultValue": "",
              "original": "&List of Likes \\ text&",
              "indices": [
                38261,
                38282
              ]
            }
          },
          "\r\n                  [/div]\r\n                  [comment] --- end of preference block --- [/comment]\r\n\r\n                  [comment] --- start of preference block --- [/comment]\r\n                  [div=/* number - bullet point */\r\n                  margin-top: 20px;\r\n                  margin-left: 20px;\r\n                  font-family: var(--HeaderFont);]\r\n                    Dislikes\r\n                  [/div]\r\n                  [div=/* number - bullet point */\r\n                  margin-top: 5px;\r\n                  color: var(--Color03);]\r\n                    ",
          {
            "type": "text",
            "description": "List of Dislikes",
            "marker": {
              "type": "text",
              "description": "List of Dislikes",
              "defaultValue": "",
              "original": "&List of Dislikes \\ text&",
              "indices": [
                38845,
                38869
              ]
            }
          },
          "\r\n                  [/div]\r\n                  [comment] --- end of preference block --- [/comment]\r\n\r\n                [/div]\r\n                [comment] --- end of preferences section --- [/comment]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            39067,
            39071
          ]
        }
      },
      "\r\n\r\n                ",
      {
        "type": "group",
        "description": "Notes",
        "markerStart": {
          "type": "group",
          "description": "Notes",
          "original": "&Notes \\ group&",
          "repeat": false,
          "indices": [
            39092,
            39106
          ]
        },
        "repeat": false,
        "originalChildren": [
          "[comment] --- start of notes section --- [/comment]\r\n                [div=/* header wrapper */\r\n                display: flex;\r\n                margin-top: 50px;\r\n                margin-bottom: 5px;\r\n                width: 100%;\r\n                font-family: var(--HeaderFont);\r\n                line-height: 100%;\r\n                color: var(--Color01);\r\n                font-weight: 700;\r\n                position: relative;\r\n                z-index: 3;]\r\n                  [div=/* number */\r\n                  display: block;\r\n                  font-size: var(--NumSize);\r\n                  letter-spacing: -3px;]\r\n                    02\r\n                  [/div]\r\n                  [div=/* header title */\r\n                  display: block;\r\n                  margin-left: 5px;\r\n                  font-size: var(--HeaderSize);]\r\n                    ",
          {
            "type": "text",
            "description": "Header Title",
            "marker": {
              "type": "text",
              "description": "Header Title",
              "defaultValue": "Notes",
              "original": "&Header Title \\ text \\ Notes&",
              "indices": [
                39959,
                39987
              ]
            },
            "value": "Notes"
          },
          "\r\n                  [/div]\r\n                [/div]\r\n\r\n                [div=/* bullet points content box */\r\n                box-sizing: border-box;\r\n                padding: max(20px, 5%);\r\n                width: calc(100% - 25px);\r\n                background: var(--White);\r\n                font-family: var(--BodyFont);\r\n                font-size: var(--BodySize);\r\n                line-height: 135%;\r\n                color: var(--Color01);\r\n                text-align: justify;\r\n                position: relative;\r\n                left: 25px;]\r\n\r\n                  ",
          {
            "type": "group",
            "description": "Bullet Point",
            "markerStart": {
              "type": "group",
              "description": "Bullet Point",
              "original": "&Bullet Point \\ group \\ repeat&",
              "repeat": true,
              "indices": [
                40557,
                40587
              ]
            },
            "repeat": true,
            "originalChildren": [
              "[comment] --- start of bullet point block --- [/comment]\r\n                  [div=/* flex box */\r\n                  margin-top: ",
              {
                "type": "select",
                "description": "Margin (0 If First Note Block and 20 If Second Onwards)",
                "marker": {
                  "type": "select",
                  "description": "Margin (0 If First Note Block and 20 If Second Onwards)",
                  "options": [
                    "0",
                    "20"
                  ],
                  "original": "&Margin (0 If First Note Block and 20 If Second Onwards) \\ select \\ 0 \\ 20&",
                  "indices": [
                    40715,
                    40789
                  ]
                }
              },
              "px;\r\n                  display: flex;\r\n                  flex-flow: row nowrap;\r\n                  width: 100%;]\r\n                    [div=/* number - bullet point */\r\n                    flex: 1;\r\n                    max-width: 30px;\r\n                    min-width: 30px;\r\n                    font-family: var(--HeaderFont);\r\n                    font-size: 1.1em;\r\n                    line-height: 110%;]\r\n                      ",
              {
                "type": "number",
                "description": "Bullet Point Number",
                "marker": {
                  "type": "number",
                  "description": "Bullet Point Number",
                  "defaultValue": null,
                  "min": null,
                  "max": null,
                  "original": "&Bullet Point Number \\ number&",
                  "indices": [
                    41219,
                    41248
                  ]
                }
              },
              ".\r\n                    [/div]\r\n                    [div=/* number - bullet point */\r\n                    flex: 10;\r\n                    color: var(--Color03);]\r\n                      ",
              {
                "type": "text",
                "description": "Note Description",
                "marker": {
                  "type": "text",
                  "description": "Note Description",
                  "defaultValue": "",
                  "original": "&Note Description \\ text&",
                  "indices": [
                    41432,
                    41456
                  ]
                }
              },
              "\r\n                    [/div]\r\n                  [/div]\r\n                  [comment] --- end of bullet point block --- [/comment]"
            ],
            "children": [],
            "markerEnd": {
              "type": "end",
              "description": "end",
              "original": "&end&",
              "indices": [
                41585,
                41589
              ]
            }
          },
          "\r\n\r\n                [/div]\r\n                [comment] --- end of notes section --- [/comment]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            41683,
            41687
          ]
        }
      },
      "\r\n\r\n                [div=/* spacer */\r\n                height: 50px;]\r\n                [/div]\r\n\r\n                [div=/* tab cover pt.I - DON'T TOUCH */\r\n                border-radius: 50%;\r\n                padding-bottom: 5px;\r\n                height: 25px;\r\n                width: 30px;\r\n                background: var(--Color02);\r\n                font-family: var(--HeaderFont);\r\n                font-size: 17px;\r\n                line-height: 0;\r\n                color: var(--Color01);\r\n                position: absolute;\r\n                bottom: 10px;\r\n                left: -35px;\r\n                display: flex;\r\n                justify-content: center;\r\n                align-items: center;\r\n                transform: rotate(-10deg);]\r\n                  05\r\n                [/div]\r\n\r\n                [div=/* tab cover pt.II */\r\n                border-radius: 50px;\r\n                padding: 5px 15px 6px;\r\n                background: var(--Color02);\r\n                font-family: var(--BodyFont);\r\n                font-size: 13px;\r\n                line-height: 100%;\r\n                color: var(--Color01);\r\n                text-transform: uppercase;\r\n                position: absolute;\r\n                bottom: 23px;\r\n                left: 1px;\r\n                display: flex;\r\n                justify-content: center;\r\n                align-items: center;\r\n                transform: rotate(-10deg);\r\n                z-index: 5;]\r\n                  Extras\r\n                [/div]\r\n\r\n              [/div]\r\n            [/div]\r\n          [/div]\r\n        "
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        43252,
        43256
      ]
    }
  },
  "[/tab]\r\n\r\n\r\n      [/tabs]\r\n    [/div]\r\n  [/div]\r\n[/div]\r\n[/nobr][comment]\r\n\r\n---------- start of credits ---------- >\r\n\r\n[/comment][border=0; padding: 0; margin-top: 5px; width: 100%; font-family: var(--mainfont); font-size: .6em; line-height: 100%; text-align: center; text-transform: uppercase; opacity: .6;]Code by Nano[comment][USER=20950]@Nano[/USER][/comment][/border][comment]\r\n\r\n< ---------- end of credits ----------\r\n\r\n[/comment]"
]

[]

Reel.TTcode

By mochiroll

Sheet Colors

Tab Cover and Header Color

Secondary Color

Body Text Color

Main Background Color

Text Color

Background Images

Background Pattern

Main Photo Reel Image URL

Blurred Photo Reel Images URL

Tab One

Profile Icon Image URL

Header Title

Basic Information

Basic Info Q/A

Basic Info Question (e.g. Name)

Basic Info Answer (e.g. Thomas)

Appearance

Header Title

Body Text

Appearance Tags

Appearance Tag (e.g. Brown Hair)

Personality

Header Title

Body Text

Tab Two

Backstory Accordions

Select "open" if first accordion or "closed" if second

open

closed

Backstory Part Number (e.g. 1, 2, 3, etc) (note: writing 1 in the field will generate 01 in the actual sheet and so on)

Backstory Accordion Header

Backstory Slide Image URL

Backstory Body Text

Tab Three

Character Relationship

Relationship Image URL

Relationship Font Awesome Icon

Link to CS

Quote About RS

Quote React Image Icon URL

Character Name

Relationship Body Text

Tab Four

Combat Data

Header Title

Skill Block

Margin (0 If First Skill Block and 20 If Second Onwards)

Skill Name

Skill Description

Equipment

Header Title

Item

Margin (0 If First Equipment Block and 20 If Second Onwards)

Item Image URL

Item Description

Tab Five

Preferences

Header Title

List of Likes

List of Dislikes

Notes

Header Title

Bullet Point

Margin (0 If First Note Block and 20 If Second Onwards)

Bullet Point Number

Note Description

Output