Reel.bbc

[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=
  /* <--------------------------------- general accents ---------------------------------> */

  /* colors */
  --Color01: #a5a5d4; /* color of the tab cover and the headers */
  --Color02: #ddf1fc; /* secondary color used to highlight the selected tab, second half of certain headers, etc */
  --Color03: #51518d; /* color for the body text */
  --bgColor: #f8f8f8; /* color that shows up underneath the bg pattern (if backgroundIMG is transparent) */
  --White: #fefefe;

  /* fonts */
  --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);

  /* <--------------------------------- images ---------------------------------> */

  /* general */
  --backgroundIMG: url(https://i.imgur.com/xnAuGrK.png) repeat; /* transparent bg pattern - optional */

  /* character */
  --photoMain: url(https://i.imgur.com/3UYVTzG.jpeg) 70% 50%/cover no-repeat;
  --photoBlur: url(https://i.imgur.com/wA5zOVJ.jpeg) center/cover no-repeat;
  --basic01: url(https://i.imgur.com/KcHRoUI.jpeg) center/cover no-repeat;
  --backstory01: url(https://i.imgur.com/BEoQ7p7.jpeg) center/cover no-repeat;
  --backstory02: url(https://i.imgur.com/w083OJ8.jpeg) center/cover no-repeat;
  --backstory03: url(https://i.imgur.com/aGpTZgQ.jpeg) center/cover no-repeat;

  /* relationships */
  --RS01: url(https://i.imgur.com/Gj3Fe5N.jpeg) center/cover no-repeat;
  --RS02: url(https://i.imgur.com/vRIHbli.jpeg) center/cover no-repeat;
  --RS03: url(https://i.imgur.com/dsECg39.png) center/cover no-repeat;

  /* relationships quote expressions */
  --quote01: url(https://i.imgur.com/o3EVy3W.jpeg) center/cover no-repeat;
  --quote02: url(https://i.imgur.com/LrCBplI.jpeg) center/cover no-repeat;
  --quote03: url(https://i.imgur.com/2HSk8Cf.jpeg) center/cover no-repeat;

  /* items */
  --item01: url(https://i.imgur.com/D543yJa.png) center/contain no-repeat;
  --item02: url(https://i.imgur.com/T6xhvLz.png) center/contain no-repeat;

  /* <--------------------------------- 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]
          [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: var(--basic01);
                      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;]
                      Basic Info
                    [/div]

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

                      [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);]
                          Name
                        [/div]
                        [div=/* answer */
                        box-sizing: border-box; padding: 5px 10px; color: var(--Color01);]
                          First Surname
                        [/div]
                      [/div]
                      [comment] --- end of basic info tag --- [/comment]

                      [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);]
                          Gender
                        [/div]
                        [div=/* answer */
                        box-sizing: border-box; padding: 5px 10px; color: var(--Color01);]
                          Gender (Pronouns)
                        [/div]
                      [/div]
                      [comment] --- end of basic info tag --- [/comment]

                      [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);]
                          Age
                        [/div]
                        [div=/* answer */
                        box-sizing: border-box; padding: 5px 10px; color: var(--Color01);]
                          Number
                        [/div]
                      [/div]
                      [comment] --- end of basic info tag --- [/comment]

                      [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);]
                          Species
                        [/div]
                        [div=/* answer */
                        box-sizing: border-box; padding: 5px 10px; color: var(--Color01);]
                          Race
                        [/div]
                      [/div]
                      [comment] --- end of basic info tag --- [/comment]

                      [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);]
                          Country of Origin
                        [/div]
                        [div=/* answer */
                        box-sizing: border-box; padding: 5px 10px; color: var(--Color01);]
                          Location
                        [/div]
                      [/div]
                      [comment] --- end of basic info tag --- [/comment]

                      [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);]
                          Role
                        [/div]
                        [div=/* answer */
                        box-sizing: border-box; padding: 5px 10px; color: var(--Color01);]
                          Rolename
                        [/div]
                      [/div]
                      [comment] --- end of basic info tag --- [/comment]

                      [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);]
                          Element
                        [/div]
                        [div=/* answer */
                        box-sizing: border-box; padding: 5px 10px; color: var(--Color01);]
                          Elements Here
                        [/div]
                      [/div]
                      [comment] --- end of basic info tag --- [/comment]

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

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

                [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);]
                    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;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque metus. Sed auctor erat ut odio porta, sit amet lobortis nunc molestie. Donec porttitor, quam quis vestibulum cursus, orci ligula faucibus sapien, eget vulputate nibh nisl id orci. Mauris feugiat sem nec diam suscipit porttitor. Pellentesque gravida enim non enim condimentum, quis maximus nisi dictum. Aliquam enim purus, varius id lectus et, blandit volutpat sem. Nulla facilisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec et accumsan sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc imperdiet tempus sagittis.

Integer ac aliquam tellus. Aliquam blandit arcu ac auctor pharetra. Cras nec ante orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ac libero in libero porta cursus a quis felis. In blandit molestie diam at eleifend. Etiam rutrum dignissim leo, quis vulputate nibh accumsan quis. Nullam finibus nulla dictum, hendrerit tellus eu, porta erat. Morbi tempus felis ac felis sodales, sed tincidunt odio ultrices.[/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;]

                    [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);]
                      hair color
                    [/div]
                    [comment] --- end of appearance tag --- [/comment]

                    [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);]
                      eye color
                    [/div]
                    [comment] --- end of appearance tag --- [/comment]

                    [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);]
                      height
                    [/div]
                    [comment] --- end of appearance tag --- [/comment]

                    [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);]
                      faceclaim
                    [/div]
                    [comment] --- end of appearance tag --- [/comment]

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

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

                [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);]
                    Personality
                  [/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;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque metus. Sed auctor erat ut odio porta, sit amet lobortis nunc molestie. Donec porttitor, quam quis vestibulum cursus, orci ligula faucibus sapien, eget vulputate nibh nisl id orci. Mauris feugiat sem nec diam suscipit porttitor. Pellentesque gravida enim non enim condimentum, quis maximus nisi dictum. Aliquam enim purus, varius id lectus et, blandit volutpat sem. Nulla facilisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec et accumsan sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc imperdiet tempus sagittis.

Integer ac aliquam tellus. Aliquam blandit arcu ac auctor pharetra. Cras nec ante orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ac libero in libero porta cursus a quis felis. In blandit molestie diam at eleifend. Etiam rutrum dignissim leo, quis vulputate nibh accumsan quis. Nullam finibus nulla dictum, hendrerit tellus eu, porta erat. Morbi tempus felis ac felis sodales, sed tincidunt odio ultrices.[/div]
                [/div]
                [comment] --- end of personality section --- [/comment]

                [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]
        [/tab]



        [tab=020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202020202]
          [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%]

                    [comment] --- start of slide --- [/comment]
                    {slide=open|[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;]
                            01
                          [/div]
                          [div=/* header title */
                          display: block;
                          margin-left: 5px;
                          font-size: var(--HeaderSize);]
                            Title One
                          [/div]
                        [/div]

                        [div=/* slide image */
                        width: 100%;
                        height: 200px;
                        background: var(--backstory01);]
                        [/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;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisl sem, egestas non mauris sed, gravida aliquam urna. Praesent eu turpis a mauris volutpat rutrum id ac lectus. Vivamus non lectus ac felis ultrices efficitur. Sed lacus velit, aliquam pretium viverra vel, tempus suscipit elit. Sed bibendum tortor elit, id laoreet elit rhoncus non. Sed dapibus ligula nunc, eget sagittis neque iaculis vitae. Nam vitae bibendum tortor. Quisque sollicitudin augue eu nisl facilisis convallis. Sed non mi ac velit congue facilisis. In eget vestibulum orci, ut congue erat. Integer quam velit, rhoncus at blandit sit amet, interdum id lacus. Donec pulvinar mauris quis ullamcorper egestas. Maecenas tincidunt dignissim sem, vel sollicitudin dui iaculis at. Mauris suscipit ex massa, at facilisis eros suscipit a. Sed facilisis placerat velit, sed congue ex congue non. Etiam et orci tellus.

Nam volutpat risus diam, non dictum arcu molestie lacinia. Nam tincidunt lorem ac elementum dapibus. Pellentesque commodo finibus dictum. Donec eget velit augue. Maecenas tincidunt ut lacus in placerat. Vivamus ullamcorper, ipsum vel tristique suscipit, nisi felis tempor sapien, et rutrum ex massa eu dui. Maecenas semper, mi non finibus ultrices, odio justo placerat ipsum, in vehicula augue dolor elementum orci. Aenean eu auctor arcu. Maecenas mattis dolor eget lacinia pretium.[/div]
                      [/div]
                    [/nobr]{/slide}
                    [comment] --- end of slide --- [/comment]

                    [comment] --- start of slide [/comment]
                    {slide=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;]
                            02
                          [/div]
                          [div=/* header title */
                          display: block;
                          margin-left: 5px;
                          font-size: var(--HeaderSize);]
                            Title Two
                          [/div]
                        [/div]

                        [div=/* slide image */
                        width: 100%;
                        height: 200px;
                        background: var(--backstory02);]
                        [/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;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisl sem, egestas non mauris sed, gravida aliquam urna. Praesent eu turpis a mauris volutpat rutrum id ac lectus. Vivamus non lectus ac felis ultrices efficitur. Sed lacus velit, aliquam pretium viverra vel, tempus suscipit elit. Sed bibendum tortor elit, id laoreet elit rhoncus non. Sed dapibus ligula nunc, eget sagittis neque iaculis vitae. Nam vitae bibendum tortor. Quisque sollicitudin augue eu nisl facilisis convallis. Sed non mi ac velit congue facilisis. In eget vestibulum orci, ut congue erat. Integer quam velit, rhoncus at blandit sit amet, interdum id lacus. Donec pulvinar mauris quis ullamcorper egestas. Maecenas tincidunt dignissim sem, vel sollicitudin dui iaculis at. Mauris suscipit ex massa, at facilisis eros suscipit a. Sed facilisis placerat velit, sed congue ex congue non. Etiam et orci tellus.

Nam volutpat risus diam, non dictum arcu molestie lacinia. Nam tincidunt lorem ac elementum dapibus. Pellentesque commodo finibus dictum. Donec eget velit augue. Maecenas tincidunt ut lacus in placerat. Vivamus ullamcorper, ipsum vel tristique suscipit, nisi felis tempor sapien, et rutrum ex massa eu dui. Maecenas semper, mi non finibus ultrices, odio justo placerat ipsum, in vehicula augue dolor elementum orci. Aenean eu auctor arcu. Maecenas mattis dolor eget lacinia pretium.[/div]
                      [/div]
                    [/nobr]{/slide}
                    [comment] --- end of slide --- [/comment]

                    [comment] --- start of slide [/comment]
                    {slide=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;]
                            03
                          [/div]
                          [div=/* header title */
                          display: block;
                          margin-left: 5px;
                          font-size: var(--HeaderSize);]
                            Title Two
                          [/div]
                        [/div]

                        [div=/* slide image */
                        width: 100%;
                        height: 200px;
                        background: var(--backstory03);]
                        [/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;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisl sem, egestas non mauris sed, gravida aliquam urna. Praesent eu turpis a mauris volutpat rutrum id ac lectus. Vivamus non lectus ac felis ultrices efficitur. Sed lacus velit, aliquam pretium viverra vel, tempus suscipit elit. Sed bibendum tortor elit, id laoreet elit rhoncus non. Sed dapibus ligula nunc, eget sagittis neque iaculis vitae. Nam vitae bibendum tortor. Quisque sollicitudin augue eu nisl facilisis convallis. Sed non mi ac velit congue facilisis. In eget vestibulum orci, ut congue erat. Integer quam velit, rhoncus at blandit sit amet, interdum id lacus. Donec pulvinar mauris quis ullamcorper egestas. Maecenas tincidunt dignissim sem, vel sollicitudin dui iaculis at. Mauris suscipit ex massa, at facilisis eros suscipit a. Sed facilisis placerat velit, sed congue ex congue non. Etiam et orci tellus.

Nam volutpat risus diam, non dictum arcu molestie lacinia. Nam tincidunt lorem ac elementum dapibus. Pellentesque commodo finibus dictum. Donec eget velit augue. Maecenas tincidunt ut lacus in placerat. Vivamus ullamcorper, ipsum vel tristique suscipit, nisi felis tempor sapien, et rutrum ex massa eu dui. Maecenas semper, mi non finibus ultrices, odio justo placerat ipsum, in vehicula augue dolor elementum orci. Aenean eu auctor arcu. Maecenas mattis dolor eget lacinia pretium.[/div]
                      [/div]
                    [/nobr]{/slide}
                    [comment] --- end of slide --- [/comment]

                  [/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]
        [/tab]



        [tab=030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303]
          [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 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: var(--RS01);
                    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;]
                        [fa]fas fa-heart[/fa]
                      [/div]

                      [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: 10px;
                      right: -13px;
                      font-family: var(--HeaderFont);
                      font-size: 11px;
                      text-transform: uppercase;]
                        [URL="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]
                        “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque metus.”

                        [div=/* circle image */
                        border-radius: 50%;
                        width: 75px;
                        height: 75px;
                        background: var(--Color02) var(--quote01);
                        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;]
                      Name
                    [/div]

                    [div=/* relationship content */
                    margin-top: 15px;
                    margin-left: 40px;
                    text-align: justify;
                    color: var(--Color03);]
                      [div=white-space: pre-line;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque metus. Sed auctor erat ut odio porta, sit amet lobortis nunc molestie. Donec porttitor, quam quis vestibulum cursus, orci ligula faucibus sapien, eget vulputate nibh nisl id orci. Mauris feugiat sem nec diam suscipit porttitor. Pellentesque gravida enim non enim condimentum, quis maximus nisi dictum. Aliquam enim purus, varius id lectus et, blandit volutpat sem. Nulla facilisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec et accumsan sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc imperdiet tempus sagittis.

Integer ac aliquam tellus. Aliquam blandit arcu ac auctor pharetra. Cras nec ante orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ac libero in libero porta cursus a quis felis. In blandit molestie diam at eleifend. Etiam rutrum dignissim leo, quis vulputate nibh accumsan quis. Nullam finibus nulla dictum, hendrerit tellus eu, porta erat. Morbi tempus felis ac felis sodales, sed tincidunt odio ultrices.[/div]
                    [/div]

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

                [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: var(--RS02);
                    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: 10px;
                      right: -13px;
                      font-size: 11px;]
                        [fa]fas fa-heart[/fa]
                      [/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]
                        “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque metus.”

                        [div=/* circle image */
                        border-radius: 50%;
                        width: 75px;
                        height: 75px;
                        background: var(--Color02) var(--quote02);
                        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;]
                      Name
                    [/div]

                    [div=/* relationship content */
                    margin-top: 15px;
                    margin-left: 40px;
                    text-align: justify;
                    color: var(--Color03);]
                      [div=white-space: pre-line;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque metus. Sed auctor erat ut odio porta, sit amet lobortis nunc molestie. Donec porttitor, quam quis vestibulum cursus, orci ligula faucibus sapien, eget vulputate nibh nisl id orci. Mauris feugiat sem nec diam suscipit porttitor. Pellentesque gravida enim non enim condimentum, quis maximus nisi dictum. Aliquam enim purus, varius id lectus et, blandit volutpat sem. Nulla facilisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec et accumsan sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc imperdiet tempus sagittis.

Integer ac aliquam tellus. Aliquam blandit arcu ac auctor pharetra. Cras nec ante orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ac libero in libero porta cursus a quis felis. In blandit molestie diam at eleifend. Etiam rutrum dignissim leo, quis vulputate nibh accumsan quis. Nullam finibus nulla dictum, hendrerit tellus eu, porta erat. Morbi tempus felis ac felis sodales, sed tincidunt odio ultrices.[/div]
                    [/div]

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

                [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: var(--RS03);
                    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: 10px;
                      right: -13px;
                      font-size: 11px;]
                        [fa]fas fa-heart[/fa]
                      [/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]
                        “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque metus.”

                        [div=/* circle image */
                        border-radius: 50%;
                        width: 75px;
                        height: 75px;
                        background: var(--Color02) var(--quote03);
                        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;]
                      Name
                    [/div]

                    [div=/* relationship content */
                    margin-top: 15px;
                    margin-left: 40px;
                    text-align: justify;
                    color: var(--Color03);]
                      [div=white-space: pre-line;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque metus. Sed auctor erat ut odio porta, sit amet lobortis nunc molestie. Donec porttitor, quam quis vestibulum cursus, orci ligula faucibus sapien, eget vulputate nibh nisl id orci. Mauris feugiat sem nec diam suscipit porttitor. Pellentesque gravida enim non enim condimentum, quis maximus nisi dictum. Aliquam enim purus, varius id lectus et, blandit volutpat sem. Nulla facilisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec et accumsan sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc imperdiet tempus sagittis.

Integer ac aliquam tellus. Aliquam blandit arcu ac auctor pharetra. Cras nec ante orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ac libero in libero porta cursus a quis felis. In blandit molestie diam at eleifend. Etiam rutrum dignissim leo, quis vulputate nibh accumsan quis. Nullam finibus nulla dictum, hendrerit tellus eu, porta erat. Morbi tempus felis ac felis sodales, sed tincidunt odio ultrices.[/div]
                    [/div]

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

                [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]
        [/tab]



        [tab=040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404040404]
          [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 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);]
                    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;]

                  [comment] --- start of skills block --- [/comment]
                  [div=/* topic title */
                  margin-left: 20px;
                  font-family: var(--HeaderFont);]
                    Skill 1
                  [/div]
                  [div=/* topic content */
                  margin-top: 5px;
                  color: var(--Color03);]
                    [div=white-space: pre-line;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque metus. Sed auctor erat ut odio porta, sit amet lobortis nunc molestie. Donec porttitor, quam quis vestibulum cursus, orci ligula faucibus sapien, eget vulputate nibh nisl id orci. Mauris feugiat sem nec diam suscipit porttitor.[/div]
                  [/div]
                  [comment] --- end of skills block --- [/comment]

                  [comment] --- start of skills block --- [/comment]
                  [div=/* topic title */
                  margin-top: 20px;
                  margin-left: 20px;
                  font-family: var(--HeaderFont);]
                    Skill 2
                  [/div]
                  [div=/* topic content */
                  margin-top: 5px;
                  color: var(--Color03);]
                    [div=white-space: pre-line;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque metus. Sed auctor erat ut odio porta, sit amet lobortis nunc molestie. Donec porttitor, quam quis vestibulum cursus, orci ligula faucibus sapien, eget vulputate nibh nisl id orci. Mauris feugiat sem nec diam suscipit porttitor.[/div]
                  [/div]
                  [comment] --- end of skills block --- [/comment]

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

                [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);]
                    Equipment
                  [/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;]

                  [comment] --- start of item wrapper --- [/comment]
                  [div=/* flexbox */
                  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: 0px;
                    padding: 0 25px;
                    flex: 1;
                    min-width: 100px;
                    max-width: 115px;]
                      [div=/* image */
                      padding-top: 100%;
                      width: 100%;
                      background: var(--item01);]
                      [/div]
                    [/div]

                    [div=/* flex RIGHT */
                    box-sizing: border-box;
                    margin-top: 0px;
                    padding: 15px;
                    flex: 5;
                    width: 100%;
                    min-width: 200px;
                    background: var(--Color01);
                    color: var(--White);]
                      [div=white-space: pre-line;]Name: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque metus. Sed auctor erat ut odio porta, sit amet lobortis nunc molestie. Donec porttitor, quam quis vestibulum cursus, orci ligula faucibus sapien, eget vulputate nibh nisl id orci. Mauris feugiat sem nec diam suscipit porttitor.[/div]
                    [/div]

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

                  [comment] --- start of item wrapper --- [/comment]
                  [div=/* flexbox */
                  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: 20px;
                    padding: 0 25px;
                    flex: 1;
                    min-width: 100px;
                    max-width: 115px;]
                      [div=/* image */
                      padding-top: 100%;
                      width: 100%;
                      background: var(--item02);]
                      [/div]
                    [/div]

                    [div=/* flex RIGHT */
                    box-sizing: border-box;
                    margin-top: 20px;
                    padding: 15px;
                    flex: 5;
                    width: 100%;
                    min-width: 200px;
                    background: var(--Color01);
                    color: var(--White);]
                      [div=white-space: pre-line;]Name: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque metus. Sed auctor erat ut odio porta, sit amet lobortis nunc molestie. Donec porttitor, quam quis vestibulum cursus, orci ligula faucibus sapien, eget vulputate nibh nisl id orci. Mauris feugiat sem nec diam suscipit porttitor.[/div]
                    [/div]

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

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

                [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]
        [/tab]



        [tab=050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505050505]
          [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 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);]
                    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);]
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque metus. Sed auctor erat ut odio porta, sit amet lobortis nunc molestie. Donec porttitor, quam quis vestibulum cursus, orci ligula faucibus sapien, eget vulputate nibh nisl id orci. Mauris feugiat sem nec diam suscipit porttitor.
                  [/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);]
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque metus. Sed auctor erat ut odio porta, sit amet lobortis nunc molestie. Donec porttitor, quam quis vestibulum cursus, orci ligula faucibus sapien, eget vulputate nibh nisl id orci. Mauris feugiat sem nec diam suscipit porttitor.
                  [/div]
                  [comment] --- end of preference block --- [/comment]

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

                [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);]
                    Notes
                  [/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 bullet point block --- [/comment]
                  [div=/* flex box */
                  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%;]
                      01.
                    [/div]
                    [div=/* number - bullet point */
                    flex: 10;
                    color: var(--Color03);]
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque metus. Sed auctor erat ut odio porta, sit amet lobortis nunc molestie. Donec porttitor, quam quis vestibulum cursus, orci ligula faucibus sapien, eget vulputate nibh nisl id orci. Mauris feugiat sem nec diam suscipit porttitor.
                    [/div]
                  [/div]
                  [comment] --- end of bullet point block --- [/comment]

                  [comment] --- start of bullet point block --- [/comment]
                  [div=/* flex box */
                  margin-top: 20px;
                  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%;]
                      02.
                    [/div]
                    [div=/* number - bullet point */
                    flex: 10;
                    color: var(--Color03);]
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque metus. Sed auctor erat ut odio porta, sit amet lobortis nunc molestie. Donec porttitor, quam quis vestibulum cursus, orci ligula faucibus sapien, eget vulputate nibh nisl id orci. Mauris feugiat sem nec diam suscipit porttitor.
                    [/div]
                  [/div]
                  [comment] --- end of bullet point block --- [/comment]

                  [comment] --- start of bullet point block --- [/comment]
                  [div=/* flex box */
                  margin-top: 20px;
                  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%;]
                      03.
                    [/div]
                    [div=/* number - bullet point */
                    flex: 10;
                    color: var(--Color03);]
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque metus. Sed auctor erat ut odio porta, sit amet lobortis nunc molestie. Donec porttitor, quam quis vestibulum cursus, orci ligula faucibus sapien, eget vulputate nibh nisl id orci. Mauris feugiat sem nec diam suscipit porttitor.
                    [/div]
                  [/div]
                  [comment] --- end of bullet point block --- [/comment]

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

                [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]
        [/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]