moonnight.template 1.0

[nobr]
    [div=display: none;]
      &Font Call \ group&[font=&Title Font Call \ text \ BIZ UDMincho&]fontcall[/font]
      [font=&Title Font Call \ text \ BIZ UDPGothic&]fontcall[/font]&end&
    [/div]
    [div=&Variable Set-Up \ group&--aColor: &Accent Color \ text \ #ffffff&;
    --bColor: &Background Color \ text \ #000000&;
    --serifFont: '&Title Font Call \ text \ BIZ UDMincho&', serif; /* if changing font please remember to also update the fontcall on top*/
    --ssFont: '&Title Font Call \ text \ BIZ UDPGothic&', sans-serif;
    --imgAdjust: &Image Filter \ text \ grayscale(100%) contrast(110%)&; /* edit as necessary for your pics */
    --largeIMG: url(&Main Large Image URL \ text \ https://placehold.co/400x600/000000/ffffff&); /* these sizes are guesstimates as almost any image size should work */
    --iconIMG: url(&Smaller Top Image \ text \ https://placehold.co/200x400/000000/ffffff&);
    --leftIMG1: url(&Left IMG 1 URL \ text \ https://placehold.co/200/000000/ffffff&);
    --leftIMG2: url(&Left IMG 2 URL \ text \ https://placehold.co/200/000000/ffffff&);
    --leftIMG3: url(&Left IMG 3 URL \ text \ https://placehold.co/200/000000/ffffff&);
    --rightIMG1: url(&Right IMG 1 URL \ text \ https://placehold.co/250x125/000000/ffffff&);
    --rightIMG2: url(&Right IMG 2 URL \ text \ https://placehold.co/250x125/000000/ffffff&);&end&
    display: block;
    position: relative;
    width: clamp(300px,100%,1000px);
    height: auto;
    margin: auto;
    box-sizing: border-box;
    overflow: hidden;
    box-sizing: border-box;
    padding: 10px 10px 20px 0px;]
      [div=display: flex;
      flex-flow: row wrap;
      justify-content: stretch;
      align-content: stretch;
      gap: 1px;
      box-sizing: border-box;
      align-items: stretch;
      width: 100%;
      border: 1px solid var(--bColor);
      background: var(--bColor);
      box-shadow: 10px 10px 0px var(--bColor);]
        [div=flex: 0 100%;
        font-family: var(--serifFont);
        font-size: 1.75rem;
        color: var(--aColor);
        text-transform: uppercase;
        box-sizing: border-box;
        padding: 8px 3% 3px 3%;
        width: 100%;
        text-align: left;]
          &Character Name \ text \ name here&
        [/div]
        &Top Left Area \ group&[div=flex: 1 250px;]
          [div=width: 100%;
          height: 100%;
          display: flex;
          flex-flow: column nowrap;
          justify-content: stretch;
          align-items: stretch;
          align-content: stretch;
          gap: 1px;
          color: var(--bColor);
          font-family: var(--ssFont);]
            &Information Line \ group \ repeat&[div=flex: 0 auto; display: flex; flex-flow: row wrap; justify-content: space-between; width: 100%; box-sizing: border-box; padding: .6rem 1rem; background: var(--aColor);]
              &Information Answer \ text \ info ans&
              [div=display: inline-block; font-family: var(--serifFont); font-size: .85rem;]&Information Detail \ text \ info&[/div]
            [/div]&end&
            [div=flex: 1 auto; padding: 2rem; box-sizing: border-box; display: flex; flex-flow: row wrap; align-content: center; align-items: center;]
              [div=flex: 0 100%; width: 100%; position: relative; box-sizing: border-box; border: 1px solid var(--aColor); padding: 1rem; font-family: var(--serifFont); text-align: center; color: var(--aColor); font-size: .85rem;]
                &Quote or Lyric \ content&
                [div=position: absolute; left: 15px; top: -1px; height: 1px; width: calc(100% - 30px); background: var(--bColor); z-index: 3;] [/div]
                [div=position: absolute; left: 15px; bottom: -1px; height: 1px; width: calc(100% - 30px); background: var(--bColor); z-index: 3;] [/div]
              [/div]
            [/div]
          [/div]
        [/div]&end&
        &Top Middle Area \ group&[div=flex: 2 300px; display: flex; flex-flow: column nowrap; gap: 1px;]
          [div=box-sizing: border-box;
          display: flex;
          flex-flow: row wrap;
          align-items: stretch;
          justify-content: center;
          text-align: center;
          gap: 1px;
          font-size: .5rem;
          line-height: 1;
          font-family: var(--ssFont);
          color: var(--bColor);]
            &Information Line \ group \ repeat&[comment]start of copypaste area --][/comment][div=flex: 1 3rem; background: var(--aColor); height: 100%; box-sizing: border-box; padding: .4rem; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; gap: 2px; padding: 1rem 0px;]
              [div=flex: 0 auto; font-size: 1.2rem; font-family: var(--serifFont);]&Info Top \ text \ top text (avoid more than 6 info lines)&[/div]
              [div=flex: 0 auto; text-transform: uppercase;]&Info Bottom \ text \ bottom text&[/div]
            [/div][comment][-- end of copypaste area. dont go past 6 of these for best results/[/comment]&end&
          [/div]
          [div=display: flex;
          flex-flow: row wrap;
          align-items: stretch;
          justify-content: center;
          gap: 1px;
          width: 100%;
          height: 100%;]
            [div=flex: 2 6rem; display: flex; flex-flow: column wrap;]
              [div=flex: 1 auto; background: var(--bColor); color: var(--aColor); box-sizing: border-box; padding: 1rem; font-size: 2rem; display: flex; flex-flow: row wrap; align-items: center; justify-content: center;] [fa]&FA Code \ text \ fa-question&[/fa][/div]
              [div=flex: 4 100px; filter: var(--imgAdjust); background: var(--iconIMG) no-repeat center center/cover;] [/div]
            [/div]
            [div=flex: 4 12rem;
            display: flex;
            flex-flow: column nowrap;
            justify-content: flex-start;
            gap: 1px;
            color: var(--bColor);
            font-family: var(--ssFont);
            font-size: .8rem;
            text-align: justify;]
              [div=flex: 1 auto; height: 100%; display: flex; flex-flow: row wrap; background: var(--aColor); padding: 1rem; justify-content: center; align-content: center;]
                [div=flex: 0 100%; width: 100%;]&Short Appearance Description \ content&[/div]
              [/div]
              &Features \ group \ repeat&[div=flex: 0 auto; display: block; background: var(--aColor); padding: .6rem 1rem;]
                &Feature \ text \ feature detail&
              [/div]&end&
            [/div]
          [/div]
        [/div]&end&
        [div=flex: 1 250px;
        background: var(--bColor) var(--largeIMG) no-repeat center center/cover;
        min-height: 250px;
        filter: var(--imgAdjust);] [/div]
        [div=flex: 1 200px; display: flex; flex-flow: column nowrap; gap: 1px; ]
          [div=flex: 1 88px; background: var(--leftIMG1) no-repeat center center/cover; filter: var(--imgAdjust);] [/div]
          [div=flex: 1 85px; background: var(--leftIMG2) no-repeat center center/cover; filter: var(--imgAdjust);] [/div]
          [div=flex: 1 85px; background: var(--leftIMG3) no-repeat center center/cover; filter: var(--imgAdjust);] [/div]
        [/div]
        &Personality Section \ group&[div=flex: 3 300px; display: flex; flex-flow: column nowrap; gap: 1px;]
          [div=flex: 1 auto; padding: 1rem .85rem; color: var(--aColor); font-family: var(--serifFont); text-transform: uppercase; font-size: 1.1rem; display: flex; flex-flow: row wrap; align-items: center;]&Section Name \ text \ personality&[/div]
          [div=flex: 2 auto; background: var(--aColor); text-align: justify; box-sizing: border-box; padding: 1.5rem; font-family: var(--ssFont); font-size: .85rem; max-height: 500px; overflow-x: hidden; overflow-y: auto; color: var(--bColor);]
            &Personality (add manual linebreaks) \ content&
          [/div]
        [/div]&end&
        &Preferences, Skills, etc. \ group&[div=flex: 3 300px; display: flex; flex-flow: column nowrap; gap: 1px;]
          &Section \ group \ repeat&[div=flex: 2 auto; display: flex; flex-flow: row wrap; align-items: stretch;]
            [div=flex: 3 100px; background: var(--bColor); color: var(--aColor); box-sizing: border-box; padding: 1.5rem; display: flex; flex-flow: row wrap; align-content: center; align-items: center; font-size: .75rem; font-family: var(--ssFont);]
              [div=flex: 0 auto]&Section Content \ content&[/div]
            [/div]
            [div=flex: 0 auto; box-sizing: border-box; padding: 1rem .65rem; text-transform: uppercase; font-family: var(--serifFont); writing-mode: vertical-rl; background: var(--aColor); color: var(--bColor); font-size: .85rem;]&Section Name \ text&[/div]
          [/div]&end&
          [div=flex: 1 85px; display: flex; flex-flow: row wrap; width: 100%; gap: 1px;]
            [div=flex: 1 50px; background: var(--rightIMG1) center center/cover; filter: var(--imgAdjust);] [/div]
            [div=flex: 1 50px; background: var(--rightIMG2) center center/cover; filter: var(--imgAdjust);] [/div]
          [/div]
        [/div]&end&
        &Backstory Area \ group&[div=flex: 0 100%; display: flex; flex-flow: row wrap; align-items: stretch; gap: 1px;]
          [div=flex: 1 100px; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; background: var(--bColor); color: var(--aColor); font-family: var(--serifFont); padding: 2rem; text-transform: uppercase; text-align: center; font-size: 1.5rem;]
            &Section Name \ text \ history&
          [/div]
          [div=flex: 2 300px; background: var(--aColor); padding: 2rem; text-align: justify; font-family: var(--ssFont); font-size: .85rem; max-height: 375px; overflow-x: hidden; overflow-y: auto; color: var(--bColor);]
            &Backstory Content \ content&
          [/div]
        [/div]&end&
        &Relationship Area \ group&&Relationship \ group \ repeat&[comment]start of copypaste area --][/comment][div=--relIMG1: url(&Image URL \ text \ https://placehold.co/125/000000/ffffff&); flex: 1 275px; display: flex; flex-flow: row wrap; align-items: stretch; gap: 1px;]
          [div=flex: 1 85px; background: var(--relIMG1) center center/cover; filter: var(--imgAdjust);] [/div]
          [div=flex: 3 90px; display: flex; flex-flow: column nowrap; gap: 1px; height: 100%;]
            [div=flex: 0 auto; font-family: var(--serifFont); color: var(--aColor); text-transform: uppercase; padding: .85rem;]
              &Nickname \ text \ nickname&[div=display: inline-block; font-size: .85rem; margin-left: .5rem;]&Rating \ text \ [fa]fas fa-star[/fa][fa]fas fa-star[/fa][fa]fas fa-star-half-alt[/fa][fa]far fa-star[/fa][fa]far fa-star[/fa]&[/div]
            [/div]
            [div=flex: 1 auto; background: var(--aColor); color: var(--bColor); box-sizing: border-box; padding: 1rem; text-align: justify; font-family: var(--ssFont); font-size: .75rem;]&Relationship Description \ content&[/div]
          [/div]
        [/div][comment][-- end of copypaste area[/comment]&end&&end&
      [/div]
    [/div]
  [/nobr]