but let's see what i can do for you 
[COMMENT]
--------the 4 variables values (the ones starting with "--") should be filled in with your own colours + links--------
[/COMMENT][border=0;
--border-colour: #76BBAD;
--pic-1: url(https://66.media.tumblr.com/7cb96c24b0350783f1b1449aa2851eca/tumblr_oulhvaFPTU1rh8q2po1_500.gif) 63% 50%;
--pic-2: url(https://66.media.tumblr.com/b7c0ec602581700108d4bb8ceb8da9f4/tumblr_oulhvaFPTU1rh8q2po2_500.gif) 63% 50%;
--pic-3: url(https://66.media.tumblr.com/e5979d8db4d7c7865074dd4ffa3e8ecc/tumblr_oulhvaFPTU1rh8q2po3_500.gif) 63% 50%;
box-sizing: border-box; padding: 0;][border= /*top container*/ 0; box-sizing: border-box; padding: 0; margin: auto; max-width: 500px; height: 150px; display: flex; margin-bottom: 10px; font-size: 11px; line-height: 15px;][border= /*PIC 1*/ 0; box-sizing: border-box; padding: 0; width: 37%; height: 100%; background: var(--pic-1); background-size: cover; margin-right: 10px;][/border][border=/*text box 1*/ 3px solid var(--border-colour); box-sizing: border-box; padding: 10px 0 10px 0; flex: 1; height: 100%; overflow: hidden;][border=0; box-sizing: border; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0; width: 50%; padding: 0 10px 0 10px;][border= /*QUOTE*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 124px; display: flex; justify-content: center; flex-direction: column; line-height: 23px;][COMMENT]
-----------add quote 1/3 here & replace the colours w whatever you like + the cs details start after the quote-----------
[/COMMENT][RIGHT][B]───────── [color=#DAA520]⋅[/color] [color=#76BBAD]✧[/color] [color=#DAA520]⋅[/color] ─[/B][/RIGHT]
[CENTER][SIZE=11px][I]playing [color=#76BBAD][B]games[/B][/color] from the start[/I][/SIZE][/CENTER]
[B]─────────────[/B][/border]
[B][color=#76BBAD]name[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]answer.[/right]
[B][color=#76BBAD]age[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]answer.[/right]
[B][color=#76BBAD]gender[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]answer.[/right]
[B][color=#76BBAD]title[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]answer.[/right]
[B][color=#76BBAD]sexuality[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]answer.[/right]
[B][color=#76BBAD]you can add[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]however many of these you want to.[/right][COMMENT]
-----------don't type anything after this comment-----------
[/COMMENT][/border][/border][/border][/border][border= /*middle container*/0; box-sizing: border-box; padding: 0; margin: auto; max-width: 500px; height: 150px; display: flex; margin-bottom: 10px; font-size: 11px; line-height: 14px;][border= /*text box 2*/ 3px solid var(--border-colour); box-sizing: border-box; padding: 10px 0 10px 0; flex: 1; height: 100%; overflow: hidden;][border=0; box-sizing: border; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0; width: 50%; padding: 0 10px 0 10px;][border= /*QUOTE*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 124px; display: flex; justify-content: center; flex-direction: column; line-height: 23px;][COMMENT]
-----------add quote 2/3 here & replace the colours w whatever you like + the cs details start after the quote-----------
[/COMMENT][RIGHT][B]───────── [color=#DAA520]⋅[/color] [color=#76BBAD]✧[/color] [color=#DAA520]⋅[/color] ─[/B][/RIGHT]
[CENTER][SIZE=11px][I]sinking your nails in my [color=#76BBAD][B]heart[/B][/color][/I][/SIZE][/CENTER]
[B]─────────────[/B][/border]
[B][color=#76BBAD]vices[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]answer one.
second answer.
answer number three.[/right]
[B][color=#76BBAD]virtues[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]answer one.
second answer.
answer number three.[/right]
[B][color=#76BBAD]virtues[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]answer one.
second answer.
answer three.[/right]
[B][color=#76BBAD]trivia[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]answer one.
second answer.
answer number three.[/right]
[B][color=#76BBAD]feel free to add[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]however many.
of these.
you want.[/right][COMMENT]
-----------don't type anything after this comment-----------
[/COMMENT][/border][/border][/border][border= /*PIC 2*/ 0; box-sizing: border-box; padding: 0; width: 37%; height: 100%; background: var(--pic-2); background-size: cover; margin-left: 10px;][/border][/border][border= /*bottom container*/0; box-sizing: border-box; padding: 0; margin: auto; max-width: 500px; height: 150px; display: flex; font-size: 11px; line-height: 14px;][border= /*PIC 3*/ 0; box-sizing: border-box; padding: 0; width: 37%; height: 100%; background: var(--pic-3); background-size: cover; margin-right: 10px;][/border][border= /*text box 3*/ 3px solid var(--border-colour); box-sizing: border-box; padding: 10px 0 10px 0; flex: 1; height: 100%; overflow: hidden;][border=0; box-sizing: border; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0; width: 50%; padding: 0 10px 0 10px;][border= /*QUOTE*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 124px; display: flex; justify-content: center; flex-direction: column; line-height: 23px;][COMMENT]
-----------add quote 3/3 here & replace the colours w whatever you like + the cs details start after the quote-----------
[/COMMENT][RIGHT][B]───────── [color=#DAA520]⋅[/color] [color=#76BBAD]✧[/color] [color=#DAA520]⋅[/color] ─[/B][/RIGHT]
[CENTER][SIZE=11px][I]you bring out the [color=#76BBAD][B]worst[/B][/color] in me[/I][/SIZE][/CENTER]
[B]─────────────[/B][/border]
[B][color=#76BBAD]history[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]answer one.
second answer.
answer number three.[/right]
[B][color=#76BBAD]theme songs[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]answer one.
second answer.
answer number three.[/right]
[B][color=#76BBAD]you can[/color] ─ [color=#DAA520]⋅[/color][color=#76BBAD]✧[/color][/B]
[right]add.
however many of these.
you want.[/right][COMMENT]
-----------don't type anything after this comment-----------
[/COMMENT][/border][/border][/border][/border][border= /*credit*/ 0; box-sizing: border-box; padding: 9px 0 0 0; margin: auto; max-width: 500px;][border=0; box-sizing: border-box; padding: 0; text-align: center; width: 37%; font-size: 7px;][url=https://www.rpnation.com/threads/the-dark-ages-%E2%80%94-mobile-friendly-no-bbcode.471463/#post-10342754]code[/url] by valen t.[/border][/border][/border][COMMENT]
--------the 7 variables values (the ones starting with "--") should be filled in with your own colours + links--------
[/COMMENT][border=0;
--pic-1: url(https://66.media.tumblr.com/149bc970bdeb0a49c607cf70978c99ef/tumblr_p8kdd1pXN81vgokhlo8_250.jpg) 50% 50%;
--pic-2: url(https://66.media.tumblr.com/ae442d03914e7639854bb6f616f1ae65/tumblr_p8kdd1pXN81vgokhlo4_250.jpg) 50% 50%;
--pic-3: url(https://66.media.tumblr.com/9eff790b71db082a90361cc197193b95/tumblr_p8kdd1pXN81vgokhlo6_250.jpg) 50% 50%;
--top-bottom-border-colour: #733D93;
--text-n-pics-bg-colour: #CBB5D6;
--name-colour: #531D73;
--rp-details-text-colour: #D2C0DC;
box-sizing: border-box; padding: 0;][border= /*PIC + NAME CONTAINER*/ 0; box-sizing: border-box; padding: 10px 0 0 0; background: var(--text-n-pics-bg-colour); max-width: 370px; margin: auto; border-top: 15px solid var(--top-bottom-border-colour);][border= /*pic container*/ 0; box-sizing: border-box; padding: 0; max-width: 320px; height: 100px; margin: auto; display: flex;][border= /*PIC 1*/ 0; box-sizing: border-box; padding: 0; flex: 1; margin-right: 5px; background: var(--pic-1); background-size: cover;][/border][border=/*PIC 2*/ 0; box-sizing: border-box; padding: 0; flex: 1; margin-right: 5px; background: var(--pic-2); background-size: cover;][/border][border=/*PIC 3*/ 0; box-sizing: border-box; padding: 0; flex: 1; background: var(--pic-3); background-size: cover;][/border][/border][border=/*NAME*/ 0; box-sizing: border-box; padding: 10px 0 10px 0; max-width: 320px; margin: auto; text-align: center; text-transform: uppercase; font-size: 12px; line-height: 10px; font-weight: bold; color: var(--name-colour); cursor: default;][font=Times New Roman][COMMENT]
-----------add yc's name here-----------
[/COMMENT]mina el hammani[COMMENT]
-----------don't type anything after this comment-----------
[/COMMENT][/font][/border][/border][border= /*DETAILS CONTAINER*/ 0; box-sizing: border-box; padding: 10px 0 10px 0; max-width: 370px; margin: auto; height: 60px; background: var(--top-bottom-border-colour); overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; height: 100%; width: 200%; overflow: auto;][border= /*DETAIL TEXT*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; width: 50%; font-size: 11px; line-height: 13px; cursor: default; text-align: center; color: var(--rp-details-text-colour);][font=Times New Roman][COMMENT]
-----------add rp details here-----------
[/COMMENT][B]Location:[/B] answer
[B]Interaction:[/B] answer
[b]Mood:[/b] answer
this scrolls just in case the text overflows[COMMENT]
-----------don't type anything after this comment-----------
[/COMMENT][/font][/border][/border][/border][border= /*TEXT CONTAINER*/ 0; box-sizing: border-box; padding: 10px 0 10px 0; max-width: 370px; height: 330px; margin: auto; background: var(--text-n-pics-bg-colour); border-bottom: 15px solid var(--top-bottom-border-colour); overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border= /*POST TEXT*/ 0; box-sizing: border-box; padding: 0 20px 0 20px; width: 50%; font-size: 12px; line-height: 16px; text-align: justify; color: var(--name-colour);][font=Times New Roman][COMMENT]
-----------add your ic post here-----------
[/COMMENT]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero.
Etiam quis ligula nisl. Integer a imperdiet ante. Nulla nec augue est. Proin elit metus, vehicula ut nibh a, commodo varius quam. In sed erat tincidunt, tempor massa eu, iaculis enim. Sed tellus leo, interdum in nisl ac, luctus lacinia massa. Curabitur purus mi, lobortis non finibus ut, gravida nec purus. Mauris ornare, ipsum nec aliquam vestibulum, ligula leo ornare ipsum, id faucibus metus nibh eu diam. Nunc nibh sapien, tristique a condimentum sed, sodales at justo. Pellentesque nec ullamcorper urna, sit amet euismod mi. Vivamus enim arcu, pulvinar eu nulla et, rutrum pulvinar massa. Maecenas id lorem neque. Vivamus in metus sed est ultrices scelerisque non sed velit. In vulputate cursus suscipit. Pellentesque eleifend, ligula sed varius consectetur, nibh diam accumsan magna, sit amet finibus metus ipsum vitae nunc. Vivamus non faucibus elit, eu ornare nulla.[COMMENT]
-----------don't type anything after this comment-----------
[/COMMENT][/font][/border][/border][/border][border= /*credit*/ 0; box-sizing: border-box; padding: 9px 0 0 0; text-align: center; font-size: 7px;][url=https://www.rpnation.com/threads/the-dark-ages-%E2%80%94-mobile-friendly-no-bbcode.471463/#post-10343150]code[/url] by valen t.[/border][/border][COMMENT]
--------the 6 variables values (the ones starting with "--") should be filled in with your own colours + links--------
[/COMMENT][border= /*CONTAINER*/ 0;
--code-bg: black;
--top-bottom-border-colour: #A8A29D;
--top-pic: url(https://66.media.tumblr.com/c42c09edae52ed0fbb698d16992b5ff4/2c75b763092794d3-43/s1280x1920/98b1d9b332c1ef97dc4201f1332432a141df21c1.jpg) 100% 100%;
--bottom-pic: url(https://66.media.tumblr.com/a6b38d6dc1170f9d0ac485c813b075fa/2c75b763092794d3-f4/s400x600/7477e4e2186c4ae12d7f62a1882e14b6d79016ff.jpg) 0 75%;
--right-2-containers-bg: #50463C;
--text-colour: #C1BDB9;
box-sizing: border-box; padding: 0; max-width: 450px; margin: auto; height: 300px; background: var(--code-bg); display: flex; border-top: 10px solid var(--top-bottom-border-colour); border-bottom: 10px solid var(--top-bottom-border-colour);][border=/*pic container*/ 0; box-sizing: border-box; padding: 10px 5px 10px 10px; height: 100%; width: 32%; display: flex; flex-direction: column;][border=/*TOP PIC*/ 0; box-sizing: border-box; padding: 0; flex: 1; background: var(--top-pic); background-size: cover; margin-bottom: 10px;][/border][border=/*BOTTOM PIC*/ 0; box-sizing: border-box; padding: 0; flex: 1; background: var(--bottom-pic); background-size: cover;][/border][/border][border=/*details + text container*/ 0; box-sizing: border-box; padding: 10px 10px 10px 5px; width: 68%; display: flex; flex-direction: column;][border=/*DETAILS CONTAINER*/ 0; box-sizing: border-box; padding: 10px 0 10px 0; width: 100%; height: 70px; background: var(--right-2-containers-bg); margin-bottom: 10px; overflow: hidden;][border=/*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=/*DETAIL TEXT*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; width: 50%; text-align: center; cursor: default; color: var(--text-colour); font-size: 11px; line-height: 15px;][font=Times New Roman][COMMENT]
----------add your rp details here----------
[/COMMENT]MOOD
[i]location[/i]
[b]❛[/b] interaction [b]❜[/b]
this scrolls too btw just in case the text overflows[COMMENT]
----------don't type anything past this comment----------
[/COMMENT][/font][/border][/border][/border][border= /*TEXT BOX*/ 0; box-sizing: border-box; flex: 1; background: var(--right-2-containers-bg); overflow: hidden; padding: 10px 0 10px 0;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=/*POST TEXT*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; width: 50%; text-align: justify; cursor: default; color: var(--text-colour); font-size: 11px; line-height: 15px;][font=Times New Roman][COMMENT]
----------add yc's name & your ic post here----------
[/COMMENT][center]✦ [b]NAME HERE[/b] ✦[/center]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero.
Etiam quis ligula nisl. Integer a imperdiet ante. Nulla nec augue est. Proin elit metus, vehicula ut nibh a, commodo varius quam. In sed erat tincidunt, tempor massa eu, iaculis enim. Sed tellus leo, interdum in nisl ac, luctus lacinia massa. Curabitur purus mi, lobortis non finibus ut, gravida nec purus. Mauris ornare, ipsum nec aliquam vestibulum, ligula leo ornare ipsum, id faucibus metus nibh eu diam. Nunc nibh sapien, tristique a condimentum sed, sodales at justo. Pellentesque nec ullamcorper urna, sit amet euismod mi. Vivamus enim arcu, pulvinar eu nulla et, rutrum pulvinar massa. Maecenas id lorem neque. Vivamus in metus sed est ultrices scelerisque non sed velit. In vulputate cursus suscipit. Pellentesque eleifend, ligula sed varius consectetur, nibh diam accumsan magna, sit amet finibus metus ipsum vitae nunc. Vivamus non faucibus elit, eu ornare nulla.[COMMENT]
----------don't type anything after this comment----------
[/COMMENT][/font][/border][/border][/border][/border][/border][border=/*credit*/ 0; box-sizing: border-box; padding: 9px 0 0 0; text-align: center; font-size: 7px; cursor: default;][url=https://www.rpnation.com/threads/the-dark-ages-%E2%80%94-mobile-friendly-no-bbcode.471463/#post-10343264]code[/url] by valen t.[/border][COMMENT]
--------the 8 variables values (the ones starting with "--") should be filled in with your own colours + links--------
[/COMMENT][border=0;
--bg-pic: url(https://i.pinimg.com/564x/66/9d/53/669d53e92c87ec02c2edf87b6dbcad90.jpg) 50% 50%;
--top-gradient-colour: #608F20;
--ycs-name-colour: white;
--left-pic: url(https://66.media.tumblr.com/ad2588bcc0da0e4627351765d5729807/tumblr_nd5pyq9N371rz2bopo3_250.gif) 30% 50%;
--right-pic: url(https://66.media.tumblr.com/4277f13efe76b2cc5471fd3807870b93/tumblr_nd5pyq9N371rz2bopo4_250.gif) 30% 50%;
--smol-quote-bg-colour: rgba(48, 71, 16, 0.5);
--quote-text-colour: white;
--ic-post-text-colour: black;
background: var(--bg-pic); background-size: cover; box-sizing: border-box; margin: auto; position: relative; max-width: 350px; height: 430px; padding: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;][border= /*GRADIENT BACKGROUND*/ 0; background: linear-gradient(to bottom, var(--top-gradient-colour), rgba(255, 255, 255, 0.85)); box-sizing: border-box; position: relative; height: 100%; width: calc(100% - 40px); padding: 0 20px 20px 20px; display: flex; flex-direction: column; align-items: center; overflow: hidden;][border=/*YC'S NAME*/ 0; box-sizing: border-box; position: relative; text-align: center; font-size: 20px; line-height: 15px; color: var(--ycs-name-colour); cursor: default; font-weight: bold; padding: 20px 0 22px 0; text-transform: uppercase;][font=Times New Roman][COMMENT]
------------add yc's name here------------
[/COMMENT]taylor swift[COMMENT]
------------don't type anything after this comment------------
[/COMMENT][/font][/border][border= /*flex*/0; width: 100%; box-sizing: border-box; padding: 0; display: flex; justify-content: space-between; margin-bottom: 18px; height: 110px;][border=/*LEFT PIC*/ 0; box-sizing: border-box; height: 100%; width: calc(50% - 7px); background: var(--left-pic); background-size: cover;][/border][border=/*RIGHT PIC*/ 0; box-sizing: border-box; height: 100%; width: calc(50% - 7px); background: var(--right-pic); background-size: cover;][/border][/border][border=/*SMALL QUOTE*/ 0; background: var(--smol-quote-bg-colour); box-sizing: border-box; max-width; 100%; display: inline-block; font-size: 9px; text-align: center; color: var(--quote-text-colour); padding: 4.5px 11px 5px 11px; font-weight: bold; font-style: oblique; margin-bottom: 14px; letter-spacing: 0.07em;][COMMENT]
------------add a short quote here------------
[/COMMENT]your quiet afternoon crush[COMMENT]
------------don't type anything after this comment------------
[/COMMENT][/border][border=/*hidden scroll*/ 0; flex: 1; box-sizing: border-box; padding: 0; overflow: hidden;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border= /*TEXT BOX*/ 0; box-sizing: border-box; padding: 0; width: 50%; color: var(--ic-post-text-colour); font-size: 11px; text-align: justify; cursor: default; line-height: 15px;][COMMENT]
------------add your ic post here------------
[/COMMENT]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero.[COMMENT]
------------don't type anything after this comment------------
[/COMMENT][/border][/border][/border][/border][/border][border= /*credit*/ 0; box-sizing: border-box; margin: auto; max-width: 350px; text-align: center; font-size: 7px; padding: 9px 0 0 0; cursor: default;][url=https://www.rpnation.com/threads/the-dark-ages-%E2%80%94-mobile-friendly-no-bbcode.471463/#post-10343661]code[/url] by valen t.[/border][COMMENT]
--------the 4 variables values (the ones starting with "--") should be filled in with your own colours + links--------
[/COMMENT][border= /*holder*/ 0;
--left-bg-pic: url(https://i.pinimg.com/564x/14/b7/bc/14b7bcef7e4d362fca8798910f8519ee.jpg) 48% 30% no-repeat;
--yc-pic: url(https://66.media.tumblr.com/6de2d4180e6e90e59e4212099269a0df/672d32ec90425ef0-ff/s400x600/b23c966b6e896dfa3507dbf29f13fce1c61df3c9.gifv) 50% 50%;
--quote-n-name-colour: #FE9B63;
--quote-shadow-colour: #331E1A;
box-sizing: border-box; margin: auto; max-width: 420px; height: 320px; display: flex; padding: 0; position: relative; margin-bottom: 21px;][border=/*BACKGROUND PIC*/ 0; background: var(--left-bg-pic); background-size: 330%; flex: 6; height: 100%; box-sizing: border-box; padding: 21px 20px 21px 20px; position: relative; display: flex; flex-direction: column; align-items: center;][border= /*YC'S PIC*/ white 2px solid; background: var(--yc-pic); background-size: cover; width: calc(100% - 6px); height: 97px; box-sizing: border-box; position: relative; margin-bottom: 13px;][/border][border=/*QUOTE*/ 0; color: var(--quote-n-name-colour); font-size: 13px; text-transform: uppercase; text-align: center; line-height: 15px; font-weight: bold; padding: 0; text-shadow: 2px 1px var(--quote-shadow-colour); box-sizing: border-box; position: relative; width: 100%; flex: 1;][border= /*flex*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;][COMMENT]
----------------add a snazzy quote here----------------
[/COMMENT]snazzy quote here[COMMENT]
----------------don't type anything after this comment----------------
[/COMMENT][/border][/border][border= /*credit*/ transparent; width: 100%; box-sizing: border-box; padding: 0 0 0 0; line-height: 11px; margin: auto; text-align: center; font-size: 7px; position: absolute; left: 0; bottom: -20px;][URL='https://www.rpnation.com/threads/the-dark-ages-%E2%80%94-mobile-friendly-no-bbcode.471463/#post-10347982']code[/URL] by valen t.[/border][/border][border= /*right*/ 0; flex: 15; box-sizing: border-box; padding: 0; position: relative;][border= /*flex*/ 0; width: 100%; height: 100%; display: flex; padding: 0; box-sizing: border-box; flex-direction: column; position: relative;][border= /*YC'S NAME*/ 0; height: auto; width: 100%; line-height: 85%; padding: 0; text-transform: uppercase; text-align: center; font-size: 130%; font-weight: bold; color: var(--quote-n-name-colour); box-sizing: border-box; position: relative; margin-bottom: 5px;][COMMENT]
----------------add yc's name here----------------
[/COMMENT]name[COMMENT]
----------------don't type anything after this comment----------------
[/COMMENT][/border][border=/*text box */ 0; flex: 1; box-sizing: border-box; padding: 0; font-size: 10px; line-height: 14px; text-align: justify; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; width: 200%; height: 100%; padding: 0; overflow: auto;][border= /*TEXT*/ 0; box-sizing: border-box; width: 50%; padding: 0 0 0 10px;][COMMENT]
----------------type in your ic post starting from here----------------
[/COMMENT]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus ullamcorper urna, non lacinia libero dictum in. Nulla in laoreet turpis, quis luctus arcu. Mauris arcu nisi, tempus ut purus et, tempus facilisis nibh. Maecenas tincidunt neque vel cursus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras aliquam sit amet erat et consectetur. Aliquam elementum lacus a justo tincidunt commodo. Nulla auctor nulla velit, eget tempus mauris efficitur eget. Vivamus mi nisl, tempus sed posuere id, venenatis in enim. Etiam ut sagittis orci. Nulla molestie imperdiet ipsum, non scelerisque ex auctor nec. Vestibulum id ex congue est iaculis fringilla in quis libero. Etiam quis ligula nisl. Integer a imperdiet ante. Nulla nec augue est. Proin elit metus, vehicula ut nibh a, commodo varius quam. In sed erat tincidunt, tempor massa eu, iaculis enim. Sed tellus leo, interdum in nisl ac, luctus lacinia massa. Curabitur purus mi, lobortis non finibus ut, gravida nec purus. Mauris ornare, ipsum nec aliquam vestibulum, ligula leo ornare ipsum, id faucibus metus nibh eu diam. Nunc nibh sapien, tristique a condimentum sed, sodales at justo. Pellentesque nec ullamcorper urna, sit amet euismod mi. Vivamus enim arcu, pulvinar eu nulla et, rutrum pulvinar massa. Maecenas id lorem neque. Vivamus in metus sed est ultrices scelerisque non sed velit. In vulputate cursus suscipit. Pellentesque eleifend, ligula sed varius consectetur, nibh diam accumsan magna, sit amet finibus metus ipsum vitae nunc. Vivamus non faucibus elit, eu ornare nulla.[/border][/border][/border][/border][/border][/border][COMMENT]
-----------the 11 variable tags (the ones starting with "--" are meant to be filled in with your own colours + links; i'd suggest keeping the "background-colour" light, and the "heading-background" even lighter; "ycs-name-text-colour" is the background colour for the box the cs details are in-----------
[/COMMENT][border=0;
--first-circle-picture: url(https://i.pinimg.com/564x/59/b1/cb/59b1cb0077bd984b0851cc4f7e6900b4.jpg) 50% 50%;
--second-circle-picture: url(https://i.pinimg.com/564x/18/b7/08/18b7082bef1b3f9f9ce3121918bd771a.jpg) 50% 100%;
--third-circle-picture: url(https://i.pinimg.com/564x/f8/81/71/f88171436342bc55010ca6d953e8cae9.jpg) 0 0;
--fourth-circle-picture: url(https://i.pinimg.com/564x/68/e9/60/68e9607e9c971c8a825e40528a57aab4.jpg) 50% 50%;
--fifth-circle-picture: url(https://i.pinimg.com/564x/d1/fe/06/d1fe06cd7a0482c31b8628b86d14661d.jpg) 50% 50%;
--sixth-circle-picture: url(https://i.pinimg.com/564x/21/b0/0c/21b00cb2e4dc7f1dd23fd943dd7846cc.jpg) 50% 50%;
--ycs-name-text-colour: #C0958B;
--ycs-first-square-picture: url(https://i.pinimg.com/564x/5d/86/12/5d8612db59075e25e5c811d96170d57a.jpg) 50% 0;
--ycs-second-square-picture: url(https://i.pinimg.com/564x/20/3b/e0/203be05811a5d41641127c1cd874fce4.jpg) 0 25%;
--background-colour: #E0D2C5;
--heading-background: #EFE8E2;
box-sizing: border-box; padding: 0; width: 100%; height: auto; position: relative;][border= /*pics + name container 1*/ 0; box-sizing: border-box; padding: 0; max-width: 400px; margin: auto; display: flex; justify-content: space-around; align-items: flex-end; position: relative; z-index: 2; margin-bottom: 3px;][border=0; box-sizing: border-box; padding: 0; width: 130px; display: flex; align-items: flex-end;][border= /*FIRST PIC*/ 2px solid var(--ycs-name-text-colour); box-sizing: border-box; padding: 0; height: 40px; width: 40px; background: var(--first-circle-picture); background-size: cover; margin-right: 5px; border-radius: 100%;][/border][border= /*SECOND PIC*/ 2px solid var(--ycs-name-text-colour); box-sizing: border-box; padding: 0; height: 40px; width: 40px; background: var(--second-circle-picture); background-size: cover; margin-right: 5px; border-radius: 100%;][/border][border= /*THIRD PIC*/ 2px solid var(--ycs-name-text-colour); box-sizing: border-box; padding: 0; height: 40px; width: 40px; background: var(--third-circle-picture); background-size: cover; border-radius: 100%;][/border][/border][border= /*FIRST NAME*/0; box-sizing-border-box; padding: 0; height: 50px; display: inline-block; color: var(--ycs-name-text-colour); font-weight: 500; text-transform: lowercase; text-align: right; letter-spacing: 0; font-size: 40px; line-height: 32px; position: relative; top: 19px;][COMMENT]
-----------ADD YC'S FIRST NAME HERE-----------
[/COMMENT][font=Pinyon Script]given[/font][/border][/border][border=
/*QUOTE 1*/ 0; box-sizing: border-box; padding: 4px 15px 0 15px; height: 23px; max-width: 400px; background: var(--background-colour); border-radius: 7px; margin: auto; position: relative; z-index: 1; color: #160307; font-size: 11px; line-height: 14px; text-align: right; font-style: oblique; letter-spacing: 0.05em; margin-bottom: 4px; overflow: hidden; text-transform: lowercase;][COMMENT]
-----------ADD THE TOP QUOTE HERE-----------
[/COMMENT]i hear your voice on the phone[/border][border=
/*pic + text container*/ 0; box-sizing: border-box; padding: 5px; max-width: 400px; height: 150px; margin: auto; position: relative; background: var(--background-colour); border-radius: 7px; display: flex; margin-bottom: 4px; overflow: hidden;][border= /*PIC 1*/ 2px solid var(--ycs-name-text-colour); box-sizing: border-box; padding: 0; flex: 3; border-radius: 5px; background: var(--ycs-first-square-picture); background-size: cover; margin-right: 5px;][/border][border= /*text container*/ 0; box-sizing: border-box; padding: 5px; flex: 5; border-radius: 5px; background: var(--ycs-name-text-colour); overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border= /*the actual text*/ 0; box-sizing: border-box; padding: 0; width: 50%; color: #160307; font-size: 11px; line-height: 14px;][COMMENT]
-----------YOU CAN TYPE IN YC'S CS STARTING FROM HERE-----------
-----the "heading" tag if for main headings like "basics", "persona", "history", etc-----
[/COMMENT][border= /*HEADING*/
0; box-sizing: border-box; padding: 0 0 5px 0; background: var(--ycs-name-text-colour); position: sticky; top: 0; margin-bottom: 2px;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; width: 100%; background: var(--heading-background); text-align: center; border-radius: 5px; letter-spacing: 0.1em; font-style: normal;]basics[/border][/border] [b][i]FULLNAME.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]NICKNAME.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]AGE.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]D.O.B.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]ZODIAC.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]GENDER.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]PRONOUNS.[/i][/b][i][/i]
[right][i]answer.[/i][/right]
[b][i]FACE CLAIM.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]HEIGHT.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]BODY MODS.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]SEXUALITY.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]ROMANTIC ORIENTATION.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]P.O.B.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]ACADEMIC LEVEL.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]OCCUPATION.[/i][/b]
[right][i]answer.[/i][/right]
[border= /*HEADING*/ 0; box-sizing: border-box; padding: 0 0 5px 0; background: var(--ycs-name-text-colour); position: sticky; top: 0; margin-bottom: 2px;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; width: 100%; background: var(--heading-background); text-align: center; border-radius: 5px; letter-spacing: 0.1em; margin-top: 7px; font-style: normal;]misc[/border][/border] [b][i]LIKES.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[b][i]DISLIKES.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[b][i]PETS.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]TRIVIA FACTS.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[b][i]THEME SONGS.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right][COMMENT]
-----------DON'T TYPE ANYTHING PAST THIS COMMENT-----------
[/COMMENT][/border][/border][/border][/border][border= /*pic + text container 2*/ 0; box-sizing: border-box; padding: 5px; max-width: 400px; height: 150px; margin: auto; position: relative; background: var(--background-colour); border-radius: 7px; display: flex; margin-bottom: 4px;][border= /*text container*/ 0; box-sizing: border-box; padding: 5px; flex: 5; border-radius: 5px; background: var(--ycs-name-text-colour); overflow: hidden; margin-right: 5px;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border= /*the actual text*/ 0; box-sizing: border-box; padding: 0; width: 50%; color: #160307; font-size: 11px; line-height: 14px;][COMMENT]
-----------YOU CAN TYPE IN YC'S CS STARTING FROM HERE-----------
[/COMMENT][border= /*HEADING*/ 0; box-sizing: border-box; padding: 0 0 5px 0; background: var(--ycs-name-text-colour); position: sticky; top: 0; margin-bottom: 2px;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; width: 100%; background: var(--heading-background); text-align: center; border-radius: 5px; letter-spacing: 0.1em; font-style: normal;]personality[/border][/border] [b][i]POSITIVE TRAITS.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[b][i]NEGATIVE TRAITS.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[border= /*HEADING*/ 0; box-sizing: border-box; padding: 0 0 5px 0; background: var(--ycs-name-text-colour); position: sticky; top: 0; margin-bottom: 2px;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; width: 100%; background: var(--heading-background); text-align: center; border-radius: 5px; letter-spacing: 0.1em; margin-top: 7px; font-style: normal;]relevant history[/border][/border] [right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[border= /*HEADING*/ 0; box-sizing: border-box; padding: 0 0 5px 0; background: var(--ycs-name-text-colour); position: sticky; top: 0; margin-bottom: 2px;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; width: 100%; background: var(--heading-background); text-align: center; border-radius: 5px; letter-spacing: 0.1em; line-height: 14px; margin-top: 7px; font-style: normal;]significant relationships[/border][/border] [b][i]PERSON.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]PERSON.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]PERSON.[/i][/b]
[right][i]answer.[/i][/right][COMMENT]
-----------DON'T TYPE ANYTHING PAST THIS COMMENT-----------
[/COMMENT][/border][/border][/border][border= /*PIC 2*/ 2px solid var(--ycs-name-text-colour); box-sizing: border-box; padding: 0; flex: 3; border-radius: 5px; background: var(--ycs-second-square-picture); background-size: 110%;][/border][/border][border= /*QUOTE 2*/ 0; box-sizing: border-box; padding: 4px 15px 0 15px; height: 23px; max-width: 400px; background: var(--background-colour); border-radius: 7px; margin: auto; position: relative; color: #160307; font-size: 11px; line-height: 14px; text-align: left; font-style: oblique; letter-spacing: 0.05em; margin-bottom: 3px; overflow: hidden; z-index: 1; text-transform: lowercase;][COMMENT]
-----------ADD THE BOTTOM QUOTE HERE-----------
[/COMMENT]could you tell me what's real?[/border][border=
/*pics + name container 2*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; max-width: 400px; margin: auto; display: flex; align-items: flex-start; justify-content: space-around; position: relative; z-index: 2;][border= /*LAST NAME*/ 0; box-sizing-border-box; padding: 0; height: 50px; display: inline-block; color: var(--ycs-name-text-colour); font-weight: 500; text-transform: lowercase; text-align: left; letter-spacing: 0; font-size: 40px; line-height: 32px; position: relative; margin-top: -16px;][COMMENT]
-----------ADD YC'S LAST NAME HERE-----------
[/COMMENT][font=Pinyon Script]family[/font][/border][border=
0; box-sizing: border-box; padding: 0; display: flex; flex-direction: column; width: 130px;][border=0; box-sizing: border-box; padding: 0; display: flex;][border= /*FOURTH PIC*/ 2px solid var(--ycs-name-text-colour); box-sizing: border-box; padding: 0; height: 40px; width: 40px; background: var(--fourth-circle-picture); background-size: cover; margin-right: 5px; border-radius: 100%;][/border][border= /*FIFTH PIC*/ 2px solid var(--ycs-name-text-colour); box-sizing: border-box; padding: 0; height: 40px; width: 40px; background: var(--fifth-circle-picture); background-size: cover; margin-right: 5px; border-radius: 100%;][/border][border= /*SIXTH PIC*/ 2px solid var(--ycs-name-text-colour); box-sizing: border-box; padding: 0; height: 40px; width: 40px; background: var(--sixth-circle-picture); background-size: cover; border-radius: 100%;][/border][/border][border= /*credit*/ 0; box-sizing: border-box; padding: 13px 0 0 0; font-size: 7px; text-align: center; line-height: 8px;][url=https://www.rpnation.com/threads/the-dark-ages-%E2%80%94-mobile-friendly-no-bbcode.471463/#post-10382423]code[/url] by valen t.[/border][/border][/border][/border]
[COMMENT]
———the 11 variable tags (the ones starting with "--" are meant to be filled in with your own links + colours; i'd suggest having the "heading-text-colour" darker than the "cs-background-colour"; for the "quote-background-colour" only fill in your rgb value in place of the first 3 numbers, don't mess with that "0.2"———
[/COMMENT][border= /*CONTAINER*/ 0;
--vertical-ycs-picture: url(https://i.pinimg.com/564x/b4/fd/96/b4fd969df36c6202a69ad04eae0ae69f.jpg) 50% 50%;
--background-colour: #DDD7D1;
--quote-background-colour: rgba(113, 90, 79, 0.2);
--horizontal-top-pic: url(https://i.pinimg.com/564x/8f/c6/4b/8fc64b25d8afed85f372c1cacfac1ba1.jpg) 50% 10%;
--button-1-colour: #8A6E61;
--button-2-colour: #7F726B;
--button-3-colour: #797573;
--cs-background-colour: #B4907F;
--heading-background-colour: #EAE6E2;
--heading-text-colour: #715A4F;
--small-icon-top-right: url(https://i.pinimg.com/originals/b4/75/50/b4755092f378cc1a06ae2e5e0c5ad397.png) 50% 50% no-repeat;
box-sizing: border-box; padding: 10px; position: relative; background: var(--background-colour); margin: auto; max-width: 430px; height: 360px;][border=0; box-sizing: border-box; padding: 0; position: relative; height: 100%; width: 100%; z-index: 1;][border= /*VERTICAL PIC*/ 0; box-sizing: border-box; padding: 0; position: absolute; bottom: 0; right: 0; height: 290px; width: 127px; background: var(--vertical-ycs-picture); background-size: cover; z-index: 4; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; position: relative; height: 290px; width: 200%; overflow: auto;][border= /*QUOTE*/ 0; box-sizing: border-box; padding: 0; height: 290px; position: relative; margin-top: 290px; width: 127px; background: var(--quote-background-colour); display: flex; justify-content: center; align-items: center; text-align: center; font-variant: small-caps; color: white; font-size: 13px; font-weight: bold; letter-spacing: 0.07em;][COMMENT]
———ADD THE QUOTE THAT SCROLLS ON YCS PIC HERE———
[/COMMENT]tell me something nice ‘bout your favourite girl[/border][/border][/border][border=
/*tabs + text box container*/ 0; box-sizing: border-box; padding: 0; position: relative; width: calc(100% - 50px); height: 100%; display: flex; justify-content: center; z-index: 2;][border= /*HORIZONTAL PIC*/ 0; box-sizing: border-box; padding: 0; position: absolute; background: var(--horizontal-top-pic); background-size: cover; top: 0; left: 0; height: 100px; width: 100%; display: flex; align-items: center; justify-content: center; pointer-events: none;][border= /*BUTTON 1*/ 0; box-sizing: border-box; padding: 0; position: relative; height: 22px; width: 22px; border-radius: 100%; background: var(--button-1-colour); margin-right: 37px;][/border][border= /*BUTTON 2*/ 0; box-sizing: border-box; padding: 0; position: relative; height: 22px; width: 22px; border-radius: 100%; background: var(--button-2-colour); margin-right: 37px;][/border][border= /*BUTTON 3*/ 0; box-sizing: border-box; padding: 0; position: relative; height: 22px; width: 22px; border-radius: 100%; background: var(--button-3-colour);][/border][/border][border= /*tabs*/ 0; box-sizing: border-box; padding: 38px 0 0 0; width: 209px; color: white; text-align: justify; font-size: 11px; line-height: 14px;][tabs][tab=.][border= /*PAGE 1*/ 0; box-sizing: border-box; padding: 10px; width: calc(100% - 87px); height: 230px; background: var(--cs-background-colour); position: absolute; left: 0; bottom: 0; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 200%; height: 210px; overflow: auto;][border= /*TAB 1 TEXT*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 50%;][COMMENT]
———CONTENT INSIDE TAB 1 STARTS FROM HERE———
—the "heading" tag is for major headings like "basics", "persona", "history", etc—
[/COMMENT][border= /*HEADING*/ 0; box-sizing: border-box; padding: 0 0 10px 0; background: var(--cs-background-colour); position: sticky; top: 0;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; background: var(--heading-background-colour); text-align: center; color: var(--heading-text-colour); letter-spacing: 0.05em; font-weight: bold;]basics[/border][/border] [b][i]NAME.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]NICKNAME(S).[/i][/b]
[right][i]answer.[/i][/right]
[b][i]AGE.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]D.O.B.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]ZODIAC.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]GENDER.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]PRONOUNS.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]SEXUALITY.[/i][/b][i][/i]
[right][i]answer.[/i][/right]
[b][i]ROMANTIC ORIENTATION.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]P.O.B[/i][/b]
[right][i]answer.[/i][/right]
[b][i]ACADEMIC LEVEL.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]OCCUPATION.[/i][/b]
[right][i]answer.[/i][/right]
[border= /*HEADING*/ 0; box-sizing: border-box; padding: 0 0 10px 0; position: relative; margin-top: 28px; background: var(--cs-background-colour); position: sticky; top: 0;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; background: var(--heading-background-colour); text-align: center; color: var(--heading-text-colour); letter-spacing: 0.05em; font-weight: bold; line-height: 14px;]visage[/border][/border] [b][i]FACE CLAIM.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]HEIGHT.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]BODY MODS.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[b][i]BIRTHMARK(S).[/i][/b]
[right][i]answer.[/i][/right]
[b][i]SCAR(S).[/i][/b]
[right][i]answer.[/i][/right]
[b][i]IDENTIFIER.[/i][/b]
[right][i]e.g. jewellery, hair colour, etc.[/i][/right][COMMENT]
———DON'T TYPE ANYTHING PAST THIS COMMENT———
[/COMMENT][/border][/border][/border][/tab][tab=.][border= /*PAGE 2*/ 0; box-sizing: border-box; padding: 10px; width: calc(100% - 87px); height: 230px; background: var(--cs-background-colour); position: absolute; left: 0; bottom: 0; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 200%; height: 210px; overflow: auto;][border= /*TAB 2 TEXT*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 50%;] [COMMENT]
———CONTENT INSIDE TAB 2 STARTS FROM HERE———
[/COMMENT][border= /*HEADING*/ 0; box-sizing: border-box; padding: 0 0 10px 0; background: var(--cs-background-colour); position: sticky; top: 0;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; background: var(--heading-background-colour); text-align: center; color: var(--heading-text-colour); letter-spacing: 0.05em; font-weight: bold; line-height: 14px;]personality[/border][/border] [b][i]VIRTUES.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[b][i]VICES.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[b][i]FEARS.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[border= /*HEADING*/ 0; box-sizing: border-box; padding: 0 0 10px 0; position: relative; margin-top: 28px; background: var(--cs-background-colour); position: sticky; top: 0;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; background: var(--heading-background-colour); text-align: center; color: var(--heading-text-colour); letter-spacing: 0.05em; font-weight: bold; line-height: 14px;]misc[/border][/border] [b][i]LIKES.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[b][i]DISLIKES.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[b][i]HEALTH CONDITIONS.[/i][/b]
[right][i]e.g. terminal illness.[/i][/right]
[right][i]mental health issues.[/i][/right]
[right][i]etc.[/i][/right]
[b][i]TRIVIA FACTS.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[b][i]HEADCANONS.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[b][i]THEME SONGS.[/i][/b]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right][COMMENT]
———DON'T TYPE ANYTHING PAST THIS COMMENT———
[/COMMENT][/border][/border][/border][/tab][tab=.][border= /*PAGE 3*/ 0; box-sizing: border-box; padding: 10px; width: calc(100% - 87px); height: 230px; background: var(--cs-background-colour); position: absolute; left: 0; bottom: 0; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 200%; height: 210px; overflow: auto;][border= /*TAB 3 TEXT*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 50%;][COMMENT]
———CONTENT INSIDE TAB 3 STARTS FROM HERE———
[/COMMENT][border= /*HEADING*/ 0; box-sizing: border-box; padding: 0 0 10px 0; background: var(--cs-background-colour); position: sticky; top: 0;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; background: var(--heading-background-colour); text-align: center; color: var(--heading-text-colour); letter-spacing: 0.05em; font-weight: bold; line-height: 14px;]history[/border][/border] [right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[right][i]answer.[/i][/right]
[border= /*HEADING*/ 0; box-sizing: border-box; padding: 0 0 10px 0; position: relative; margin-top: 28px; background: var(--cs-background-colour); position: sticky; top: 0;][border=0; box-sizing: border-box; padding: 1px 0 2px 0; background: var(--heading-background-colour); text-align: center; color: var(--heading-text-colour); letter-spacing: 0.05em; font-weight: bold; line-height: 14px;]significant relationships[/border][/border] [b][i]PERSON.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]PERSON.[/i][/b]
[right][i]answer.[/i][/right]
[b][i]PERSON.[/i][/b]
[right][i]answer.[/i][/right][COMMENT]
———DON'T TYPE ANYTHING PAST THIS COMMENT———
[/COMMENT][/border][/border][/border][/tab][/tabs][/border][/border][border= /*SMALL ICON*/ 0; box-sizing: border-box; padding: 0; position: absolute; top: 0; right: 0; height: 40px; width: 40px; background: var(--small-icon-top-right); background-size: 100%;][/border][border= /*there was a part of the tabs visible so i hid it w this*/ 0; box-sizing: border-box; padding: 0; position: absolute; height: 10px; width: 100%; left: 0; top: 100px; background: var(--background-colour); z-index: 3;][/border][/border][/border][border= /*credit*/ 0; box-sizing: border-box; padding: 9px 0 0 0; font-size: 7px; text-align: center;][url=https://www.rpnation.com/threads/the-dark-ages-—-mobile-friendly-no-bbcode.471463/#post-10392668]code[/url] by valen t.[/border]
[COMMENT]
--------the 9 variables values (the ones starting with "--") should be filled in with your own colours + links--------
[/COMMENT][border= /*container*/ 0;
--ycs-big-picture: url(https://i.pinimg.com/originals/63/0a/b6/630ab678255f061d0f0163d5521fb39c.jpg) 50% 50%;
--main-accent-colour: #C7C3B9;
--button-2-colour: #A9816E;
--button-3-colour: #73604F;
--button-4-colour: #B3A396;
--text-background-colour: #232322;
--tab-2-picture: url(https://i.pinimg.com/originals/96/d1/f5/96d1f541cd32e6e197ea2e3b9ace589c.png) 100% 57%;
--tab-3-picture: url(https://i.pinimg.com/564x/46/f2/12/46f212085fea7472c6002e152c248a61.jpg) 50% 40%;
--tab-4-picture: url(https://i.pinimg.com/564x/77/c4/95/77c495badd027bf0d7c962eaddef675e.jpg) 50% 20%;
box-sizing: border-box; padding: 0; max-width: 620px; min-height: 370px; position: relative; margin: auto; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-wrap: wrap; cursor: default;][border= /*left container*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; width: 320px; height: 370px; position: relative; overflow: hidden; margin-bottom: 10px;][border= /*YC'S PICTURE*/ 20px solid var(--main-accent-colour); box-sizing: border-box; padding: 0; width: 100%; background: var(--ycs-big-picture); background-size: cover; position: relative; height: 370px; overflow: hidden; z-index: 2; color: var(--main-accent-colour);][border= /*lyric pt 1*/ 0; box-sizing: border-box; padding: 0 6px 1px 0; position: absolute; text-transform: uppercase; top: -3px; left: -3px; font-weight: bold; font-style: oblique; z-index: 3; font-size: 30px; line-height: 24px;][COMMENT]
----------------FIRST HALF OF YOUR LYRIC/QUOTE OR YC'S GIVEN NAME GOES HERE----------------
--------the one on top of yc's picture--------
[/COMMENT]fallen[/border][border=
/*lyric pt 2*/ 0; box-sizing: border-box; padding: 0 6px 1px 0; position: absolute; text-transform: uppercase; bottom: -2px; left: -3px; font-weight: bold; font-style: oblique; z-index: 3; font-size: 30px; line-height: 24px;][COMMENT]
----------------SECOND HALF OF YOUR LYRIC/QUOTE OR YC'S SURNAME GOES HERE----------------
[/COMMENT]for a lie[/border][/border][/border][border=
/*right*/ 0; box-sizing: border-box; padding: 20px 0 0 0; width: 300px; position: relative; height: 370px; margin-bottom: 10px; background: var(--text-background-colour); overflow: hidden;][border= /*button container*/ 0; box-sizing: border-box; padding: 22px 0 17px 15px; width: 100%; position: absolute; height: 146px; left: 0; top: 0; opacity: 1; pointer-events: none; background: var(--text-background-colour); display: flex; justify-content: space-between; align-items: flex-start; flex-direction: column;][border= /*button 1*/ 0; box-sizing: border-box; padding: 0; width: 20px; height: 20px; border-radius: 100%; background: var(--main-accent-colour);][/border][border= /*button 2*/ 0; box-sizing: border-box; padding: 0; width: 20px; height: 20px; border-radius: 100%; background: var(--button-2-colour);][/border][border= /*button 3*/ 0; box-sizing: border-box; padding: 0; width: 20px; height: 20px; border-radius: 100%; background: var(--button-3-colour);][/border][border= /*button 4*/ 0; box-sizing: border-box; padding: 0; width: 20px; height: 20px; border-radius: 100%; background: var(--button-4-colour);][/border][/border][border= /*tabs container*/ 0; box-sizing: border-box; padding: 0; height: 100%; width: 90px; margin-left: -20px; color: var(--main-accent-colour);][tabs][tab=.][border= /*tab 1*/ 0; box-sizing: border-box; padding: 0 20px 20px 17px; background: var(--text-background-colour); position: absolute; left: 0; bottom: 0; width: 100%; height: 224px; display: flex; align-items: center;][border= /*line*/ 0; box-sizing: border-box; padding: 0; width: 2px; height: 100%; position: relative; background: var(--main-accent-colour); margin-left: 7px; margin-right: 15px;][/border][border= /*quote container*/ 0; box-sizing: border-box; padding: 0; flex: 1; text-align: left; text-transform: uppercase; letter-spacing: 0.05em;][border= /*big word*/ 0; box-sizing: border-box; padding: 0 0 13px 5px; font-size: 45px; line-height: 33px;][COMMENT]
----------------ADD THE FIRST WORD OF YOUR QUOTE HERE----------------
--------btw this is 1st tab--------
[/COMMENT][font=Times New Roman]if[/font][/border][border=
/*rest of quote*/ 0; box-sizing: border-box; padding: 0; font-style: oblique; font-size: 9px; line-height: 15px;][COMMENT]
----------------TYPE IN THE REST OF YOUR QUOTE HERE----------------
[/COMMENT]i love you
was a promise
would you break it
if you're honest[/border][/border][/border][/tab][tab=.][border=
/*pic 2*/ 5px solid var(--button-2-colour); box-sizing: border-box; padding: 0; position: absolute; width: 223px; height: 103px; top: 24px; right: 22px; background: var(--tab-2-picture); background-size: cover; opacity: 1; z-index: 4;][/border][border= /*tab 2*/ 0; box-sizing: border-box; padding: 0; background: var(--text-background-colour); position: absolute; left: 0; bottom: 20px; width: 200%; height: 204px; overflow: auto; font-size: 10px; line-height: 13px; letter-spacing: 0.02em;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0 20px 0 17px; width: 50%;][COMMENT]
----------------THIS IS WHERE YOU CAN START TYPING IN YOUR CS----------------
--------this is the basics' page--------
----the "title" tag is for the headings like "name" "nickname" "age" etc, while the "answer" tag is where you type in your answers----
[/COMMENT][border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]name:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]billie eilish pirate baird o'connell[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]nickname:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]billie, avocado[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]age:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]18[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]d.o.b:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]18 december[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]zodiac:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]sagittarius[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]gender:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]female[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]pronouns:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]she/her[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]sexuality:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]???[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]romantic orientation:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]???[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]face claim:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]billie eilish[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]body mods:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]dyed hair, possible tattoo(s), ear piercings[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]build:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]???[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]height:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]5'3"[/border][COMMENT]
----------------DON'T TYPE ANYTHING PAST THIS COMMENT----------------
[/COMMENT][/border][/border][/tab][tab=.][border= /*pic 3*/ 5px solid var(--button-3-colour); box-sizing: border-box; padding: 0; position: absolute; width: 223px; height: 103px; top: 24px; right: 22px; background: var(--tab-3-picture); background-size: cover; opacity: 1; z-index: 4;][/border][border= /*tab 3*/ 0; box-sizing: border-box; padding: 0; background: var(--text-background-colour); position: absolute; left: 0; bottom: 20px; width: 200%; height: 204px; overflow: auto; font-size: 10px; line-height: 13px; letter-spacing: 0.02em;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0 20px 0 17px; width: 50%;][COMMENT]
----------------YOU CAN START TYPING YOUR CS IN FROM HERE----------------
--------this is the personality tab--------
[/COMMENT][border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]likes:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]cautious, kind, committed, crime, button, finger, trigger, trigger, finger[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]dislikes:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]sitting, alone, mouth, gum, driveway, friends, car, bodies[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]hobbies:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]watching; some time; staring; oceans eyes; burning cities; napalm skies; fifteen flares; ocean eyes; ocean eyes
pretend; miss; pretend; care; kiss; shame; pretend; miss me; pretend; care; kiss; shame[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]quirks:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]lips; teeth; tongue; heart; eight beats; him
thought; found; way; thought; found; way; never; go away; guess; gotta; stay[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]skills:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]call; back; get; minute; talk; know; forget; time; number; blocked
should've; known; alone; show; blood; bleed; blood; owe[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]positive traits:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]alone, alone, sense, steal, soul, hide, treasure chest[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]negative traits:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]told, worry, lie, honey, hurry, inside, remember, close, stars, give, love, ours[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]trivia facts:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]baby; don't; feel; good; six; words; understood; never; go; five; words; say; laugh; nothing; wrong; four; days; felt; long; three; crowd; two; us; one; slipped
true; tell; lied to; crying; like you; hell; never; type; someone; right through[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]headcanons:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]white shirt; red; bloody nose; sleeping; tippy toes; creeping; no one; criminal; bruises; knees; thank you; please; want; wanting; soul; cynical
standing; killing; commit; crime; peter's; vacation; invitation; animals; evidence; pearly gates; picket fence; inside; friends; invite them[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]theme songs:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]don't; know; good for you; learned; lose; afford; tore; shirt; bleeding; nothing; stops; leaving
want; run; wondering; what; know; scared; care; fall asleep;go[/border][COMMENT]
----------------DON'T TYPE ANYTHING PAST THIS COMMENT----------------
[/COMMENT][/border][/border][/tab][tab=.][border= /*pic 4*/ 5px solid var(--button-4-colour); box-sizing: border-box; padding: 0; position: absolute; width: 223px; height: 103px; top: 24px; right: 22px; background: var(--tab-4-picture); background-size: cover; opacity: 1; z-index: 4;][/border][border= /*tab 4*/ 0; box-sizing: border-box; padding: 0; background: var(--text-background-colour); position: absolute; left: 0; bottom: 20px; width: 200%; height: 204px; overflow: auto; font-size: 10px; line-height: 13px; letter-spacing: 0.02em;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0 20px 0 17px; width: 50%;][COMMENT]
----------------YOU CAN START TYPING YOUR CS IN FROM HERE----------------
--------this is the history tab--------
[/COMMENT][border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]history:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 3px 0 3px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]don't be that way fall apart twice a day i just wish you could feel what you say show, never tell but i know you too well got a mood that you wish you could sell if teardrops could be bottled there'd be swimming pools filled by models told "a tight dress is what makes you a whore" if "i love you" was a promise would you break it, if you're honest? tell the mirror what you know she's heard before i don't wanna be you, anymore hand, hands getting cold losing feeling is getting old was i made from a broken mold? hurt, i can't shake we've made every mistake only you know the way that i break if teardrops could be bottled there'd[/border]
[border= /*title*/ 0; box-sizing: border-box; padding: 0 0 3px 0; font-size: 13px; line-height: 10px; letter-spacing: 0.05em;][font=Times New Roman]relationships:[/font][/border][border=
/*answer*/ 0; box-sizing: border-box; padding: 6px 0 10px 7px; position: relative; margin-left: 7px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;][font=Times New Roman][size=13px]mother:[/size][/font][border=
/*specified*/ 0; box-sizing: border-box; padding: 3px 0 3px 8px; position: relative; margin-left: 4px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]my boy's being sus', he was shady enough, but now he's just a shadow my boy loves his friends like i love my split ends, and by that i mean he cuts 'em off (what?!) my boy my boy my boy don't love me like he promised my boy my boy my boy he ain't a man, and sure as hell ain't honest my boy's being sus' and he don't know how to cuss he just sounds like he's tryna be his father (who are you?) my boy's an ugly crier but he's such a pretty liar and by that i mean he said he'd "change" my boy my boy my boy don't love me like he promised my boy my boy my boy he ain't a man and sure as hell ain't honest my boy, my boy, my friends, i love my split ends (alright dude, go trip over a knife) my boy my[/border]
[font=Times New Roman][size=13px]father:[/size][/font][border=
/*specified*/ 0; box-sizing: border-box; padding: 3px 0 3px 8px; position: relative; margin-left: 4px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]what is it about them? i must be missing something they just keep doing nothing too intoxicated to be scared better off without them they're nothing but unstable bring ashtrays to the table and that's about the only thing they share i'm in their second hand smoke still just drinking canned coke i don't need a xanny to feel better on designated drives home only one who's not stoned don't give me a xanny now or ever waking up at sundown they're late to every party nobody's ever sorry too inebriated now to dance morning as they come down (come down) their pretty heads are hurting (hurting) they're awfully bad at learning (learning) make the same mistakes, blame circumstance i'm in their second hand smoke still just drinking canned coke i don't need a xanny to feel[/border]
[font=Times New Roman][size=13px]sibling:[/size][/font][border=
/*specified*/ 0; box-sizing: border-box; padding: 3px 0 3px 8px; position: relative; margin-left: 4px; border-left: 2px solid var(--main-accent-colour); margin-top: 2px;]in the end, when they're all gone when the world is silent and the days are long just you and i, we'll be alive we made it on our own 'cause everybody makes it 'till they don't and everybody wants to think they won't 'cause everybody makes it 'till they don't and everybody seems to think they won't, they won't, they won't, they won't baby, i'm still alive but my heart is beating slow baby, tell me i gotta know are you okay? you seem too far gone infected, standing there all alone 'cause everybody makes it 'till they don't and everybody wants to think they[/border][COMMENT]
--------i feel the need to add this to avoid confusion: this is where the tags for the "relationships" part ends--------
--------if you wanna add more relationships, simply copy the "specified" tag and write the relationship name on top (i.e. "sister" + "specified")--------
[/COMMENT][/border][COMMENT]
--------if you want to add any more "titles" you can do this before this comment--------
----------------DON'T TYPE ANYTHING *AFTER* THIS COMMENT----------------
[/COMMENT][/border][/border][/tab][/tabs][/border][/border][/border][border= /*credits*/ 0; box-sizing: border-box; padding: 0; width: 100%; font-size: 7px; position: relative; width: 100%; text-align: center;][url=https://www.rpnation.com/threads/the-dark-ages-mobile-friendly.471463/#post-10429403]code[/url] by valen t.[/border][COMMENT]
-------the 8 variable values (the ones starting with "--" are meant to be filled in with your links + colours; for me, the "quote colour" is the brown/gold, and the "other colour" is the black-------
[/COMMENT][border= /*whole container*/ 0;
--quote-colour: #D4AD98;
--other-colour: #171B16;
--background-colour: #F0F0F1;
--tab-1-picture: url(https://64.media.tumblr.com/eff377cc7669e41af8b32ccbfb453c78/tumblr_phyywn6nUe1xxmeipo5_1280.jpg) 0 0;
--tab-2-picture: url(https://64.media.tumblr.com/8723364c4289a4b485ef96c0ba237271/tumblr_phyywn6nUe1xxmeipo7_1280.jpg) 60% 0 no-repeat;
--tab-3-picture: url(https://64.media.tumblr.com/acbeb4a43722ca383565eddeb3b527ac/tumblr_phyywn6nUe1xxmeipo1_1280.jpg) 50% 100%;
--tab-4-picture: url(https://64.media.tumblr.com/41bd9782f01e06804e2ee418df24763f/tumblr_phyywn6nUe1xxmeipo6_1280.jpg) 35% 80% no-repeat;
--text-colour: #BA9785;
box-sizing: border-box; padding: 40px 0 40px 0; max-width: 400px; height: auto; display: flex; background: var(--background-colour); flex-direction: column; align-items: center; justify-content: center; margin: auto;][border= /*TITLE*/ 0; box-sizing: border-box; padding: 5px; width: calc(100% - 80px); font-size: 9px; text-align: center; background: var(--quote-colour); font-weight: bold; letter-spacing: 0.05em; border-right: 10px solid var(--other-colour); border-left: 10px solid var(--other-colour); margin-bottom: 11px; position: relative; color: var(--other-colour); text-transform: uppercase;][COMMENT]
--------------A TITLE FOR YC--------------
[/COMMENT]heartbreak queen[/border][border=
/*bottom*/ 0; box-sizing: border-box; padding: 4px 0 0 0; width: calc(100% - 80px); height: 420px; background: transparent; position: relative; overflow: auto; display: flex; overflow: hidden; font-size: 11px; color: var(--text-colour); text-align: justify;][border= /*tabs container*/ 0; box-sizing: border-box; padding: 0; width: 100px; height: auto; background: transparent; margin-left: -35px;][tabs][tab=.][border= /*tab 1*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 288px; position: absolute; bottom: 0; right: 0; background: var(--background-colour); z-index: 2;][border= /*PIC 1*/ 0; box-sizing: border-box; padding: 0; width: 111px; height: 111px; position: absolute; top: -128px; left: 39px; background: var(--tab-1-picture); background-size: cover; border-radius: 100%; z-index: 3;][/border][border= /*text box*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; position: relative; overflow: auto;][border= /*text*/ 0; box-sizing: border-box; padding: 0; width: 50%;][COMMENT]
--------------YOU CAN START TYPING IN YOUR CS FROM HERE--------------
-------this is the 1st "basics" tab-------
-------ctrl c + v the "heading" tag if you want to add more stuff in your cs-------
[/COMMENT][border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]name[/border]Taylor Swift
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]nickname[/border]Tater Tot
[border=/*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]age[/border]30
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]d.o.b.[/border]13[sup]th[/sup]December
[border=/*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]zodiac[/border]Sagittarius
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]gender[/border]Female
[border=/*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]pronouns[/border]She/Her
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]sexuality[/border]???
[border=/*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]romantic orientation[/border]???
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]academic level[/border]High school graduate
[border=/*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]occupation[/border]Singer-songwriter[COMMENT]
--------------TAB 1 ENDS HERE--------------
[/COMMENT][/border][/border][/border][/tab][tab=.][border= /*tab 2*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 288px; position: absolute; bottom: 0; right: 0; background: var(--background-colour); z-index: 2;][border= /*PIC 2*/ 0; box-sizing: border-box; padding: 0; width: 111px; height: 111px; position: absolute; top: -128px; left: 39px; background: var(--tab-2-picture); background-size: 110%; border-radius: 100%; z-index: 3; filter: hue-rotate(-10deg);][/border][border= /*text box*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; position: relative; overflow: auto;][border= /*text*/ 0; box-sizing: border-box; padding: 0; width: 50%;][COMMENT]
--------------YOU CAN START TYPING IN YOUR CS FROM HERE--------------
-------this is the 2nd "appearance" tab-------
[/COMMENT][border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]face claim[/border]Taylor Swift
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]height[/border]5'10"
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]weight[/border]56 kg
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]build[/border]???
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: v; display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]piercings[/border]Standard lobe
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]tattoos[/border]???
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]body mods[/border]???
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]hair[/border]Ash blonde
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]eyes[/border]Electric blue with a black tint
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]attire[/border]Classy[COMMENT]
--------------TAB 2 ENDS HERE--------------
[/COMMENT][/border][/border][/border][/tab]=[tab=.][border= /*tab 3*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 288px; position: absolute; bottom: 0; right: 0; background: var(--background-colour); z-index: 2;][border= /*PIC 3*/ 0; box-sizing: border-box; padding: 0; width: 111px; height: 111px; position: absolute; top: -128px; left: 39px; background: var(--tab-3-picture); background-size: 110%; border-radius: 100%; z-index: 3; filter: brightness(90%);][/border][border= /*text box*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; position: relative; overflow: auto;][border= /*text*/ 0; box-sizing: border-box; padding: 0; width: 50%;][COMMENT]
--------------YOU CAN START TYPING IN YOUR CS FROM HERE--------------
-------this is the 3rd "personality" tab-------
[/COMMENT][border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]positive traits[/border]We're all bored; we're all so tired of everything; we wait for trains that just aren't coming; we show off our different scarlet letters; trust me, mine is better
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]negative traits[/border]We're so young but we're on the road to ruin; we play dumb but we know exactly what we're doing; we cry tears of mascara in the bathroom; honey, life is just a classroom
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]quirks[/border]'Cause, baby, I could build a castle out of all the bricks they threw at me, and every day is like a battle but every night with us is like a dream
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]hobbies[/border]Baby, we're the new romantics; come on, come along with me; heart break is the national anthem; we sing it proudly; we are too busy dancing, so get knocked off our feet; baby, we're the new romantics; the best people in life are free
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]skills[/border]We're all here; the lights and boys are blinding; we hang back; it's all in the timing; it's poker; he can't see it in my face, but I'm about to play my Ace
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]likes[/border]We need love, but all we want is danger; we team up then switch sides like a record changer; the rumors are terrible and cruel, but, honey most of them are true
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]dislikes[/border]'Cause, baby, I could build a castle out of all the bricks they threw at me, and every day is like a battle, but every night with us is like a dream[COMMENT]
--------------TAB 3 ENDS HERE--------------
[/COMMENT][/border][/border][/border][/tab][tab=.][border= /*tab 4*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 288px; position: absolute; bottom: 0; right: 0; background: var(--background-colour); z-index: 2;][border= /*PIC 4*/ 0; box-sizing: border-box; padding: 0; width: 111px; height: 111px; position: absolute; top: -128px; left: 39px; background: var(--tab-4-picture); background-size: 130%; border-radius: 100%; z-index: 3;][/border][border= /*text box*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; position: relative; overflow: auto;][border= /*text*/ 0; box-sizing: border-box; padding: 0; width: 50%;][COMMENT]
--------------YOU CAN START TYPING IN YOUR CS FROM HERE--------------
-------this is the 4th "history" tab-------
[/COMMENT][border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]trivia[/border]Knew he was a killer first time that I saw him; wondered how many girls he had loved and left haunted; but if he's a ghost, then I can be a phantom, holdin' him for ransom; some boys are tryin' too hard, he don't try at all though; younger than my exes, but he act like such a man, so I see nothing better, I keep him forever like a vendetta
I see how this is gon' go; touch me and you'll never be alone; island breeze and lights down low; no one has to know
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]headcanons[/border]In the middle of the night, in my dreams, you should see the things we do, baby; in the middle of the night, in my dreams, I know I'm gonna be with you, so I take my time; are you ready for it?
Knew I was a robber first time that he saw me stealing hearts and running off and never sayin' sorry; but if I'm a thief, then he can join the heist, and we'll move to an island, and he can be my jailer, Burton to this Taylor; every love I've known in comparison is a failure; I forget their names now, I'm so very tame now; never be the same now
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--quote-colour); display: inline-block; color: var(--other-colour); position: relative; margin-right: 6px;]history[/border]Don't blame me, love made me crazy; if it doesn't, you ain't doin' it right; Lord, save me, my drug is my baby; I'd be usin' for the rest of my life
I've been breakin' hearts a long time, and toyin' with them older guysl just playthings for me to use; something happened for the first time, in the darkest little paradise; shakin, pacin', I just need you
For you, I would cross the line; I would waste my time, I would lose my mind; they say she's gone too far this time
[border= /*heading*/ 0; box-sizing: border-box; padding: 0 6px 0 6px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; background: var(--other-colour); display: inline-block; color: var(--quote-colour); position: relative; margin-right: 6px;]significant relationships[/border]
[B]Andrea Swift:[/B] I would be complex; I would be cool; they'd say I played the field before I found someone to commit to, and that would be okay for me to do; every conquest I had made would make me more of a boss to you
[B]Scott Swift:[/B] I'd be a fearless leader; I'd be an alpha type; when everyone believes ya, what's that like?
[B]Austin Swift:[/B] I'm so sick of running as fast as I can, wondering if I'd get there quicker; if I was a man; and I'm so sick of them coming at me again 'cause if I was a man then I'd be the man[COMMENT]
--------------TAB 4 ENDS HERE--------------
[/COMMENT][/border][/border][/border][/tab][/tabs][/border][border= /*button container*/ 0; box-sizing: border-box; padding: 4px 0 4px 0; position: absolute; top: 4px; left: 0; height: 111px; width: 35px; background: var(--background-colour); transparent; opacity: 1; pointer-events: none; display: flex; flex-direction: column; z-index: 2;][border= /*button 1*/ 0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: var(--quote-colour); position: relative; border-radius: 100%; align-self: flex-end; margin-bottom: 8px;][/border][border= /*button 2*/ 0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: var(--other-colour); position: relative; border-radius: 100%; margin-bottom: 10px;][/border][border= /*button 3*/ 0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: var(--quote-colour); position: relative; border-radius: 100%; margin-bottom: 8px;][/border][border= /*button 4*/ 0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: var(--other-colour); position: relative; border-radius: 100%; align-self: flex-end;][/border][/border][border= /*pics border*/ 0; box-sizing: border-box; padding: 0; height: 119px; width: 119px; background: var(--quote-colour); position: relative; border-radius: 100%; margin-left: -30px; margin-right: 15px; margin-top: -4px;][/border][border= /*quote box*/ 0; box-sizing: border-box; padding: 4px 0 4px 0; height: 111px; flex: 1; position: relative;][border= /*QUOTE*/ 0; box-sizing: border-box; padding: 0 2px 0 0; height: 100%; width: 100%; display: flex; text-align: right; justify-content: flex-end; align-items: center; font-weight: bold; font-size: 19px; font-style: oblique; line-height: 21px; letter-spacing: 0.02em;][COMMENT]
--------------ADD A QUOTE/LYRIC HERE--------------
[/COMMENT][font=UnifrakturMaguntia]honey, i rose up from the dead (i do it all the time)[/font][/border][/border][border=
/*cover*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 10px; opacity: 0.5px; background: var(--background-colour); left: 0; top: 130px; position: absolute; z-index: 1;][/border][/border][/border][border= /*credit*/ 0; box-sizing: border-box; padding: 9px 0 0 0; text-align: center; font-size: 7px;][url=https://www.rpnation.com/threads/the-dark-ages-mobile-friendly.471463/#post-10440573]code[/url] by valen t.[/border][COMMENT]
------the 5 variable values (starting with "--") are meant to be filled in with your own links + colours; for me, the "quote-colour" is the brown/gold, while the "other-colour" is the black-------
[/COMMENT][border= /*whole container*/ 0;
--quote-colour: #D4AD98;
--other-colour: #171B16;
--ycs-picture: url(https://64.media.tumblr.com/eff377cc7669e41af8b32ccbfb453c78/tumblr_phyywn6nUe1xxmeipo5_1280.jpg) 0 0;
--background-colour: #F0F0F1;
--text-colour: #BA9785;
box-sizing: border-box; padding: 40px 0 40px 0; max-width: 400px; height: auto; display: flex; background: var(--background-colour); flex-direction: column; align-items: center; justify-content: center; margin: auto; overflow: hidden;][border= /*TITLE*/ 0; box-sizing: border-box; padding: 5px; width: calc(100% - 80px); font-size: 9px; text-align: center; background: var(--quote-colour); font-weight: bold; letter-spacing: 0.05em; border-right: 10px solid var(--other-colour); border-left: 10px solid var(--other-colour); margin-bottom: 11px; position: relative; color: var(--other-colour); text-transform: uppercase;][COMMENT]
--------------A TITLE FOR YC--------------
[/COMMENT]heartbreak queen[/border][border=
/*bottom*/ 0; box-sizing: border-box; padding: 4px 0 0 0; width: calc(100% - 80px); height: 420px; background: transparent; position: relative; overflow: auto; display: flex; overflow: hidden;][border= /*tabs container*/ 0; box-sizing: border-box; padding: 0; width: 100px; height: auto; background: transparent; margin-left: -35px;][tabs][tab=.][border= /*mood*/ 0; box-sizing: border-box; padding: 5px; width: 100%; position: absolute; bottom: 0; right: 0; z-index: 3; font-size: 9px; text-align: center; background: var(--quote-colour); letter-spacing: 0.05em; border-right: 10px solid var(--other-colour); border-left: 10px solid var(--other-colour); color: var(--other-colour); height: 26px; overflow: hidden;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0; width: 50%;][COMMENT]
--------------YC'S MOOD--------------
[/COMMENT][B]MOOD:[/B] You are somebody that I don't know but you're takin' shots at me like it's Patrón and I'm just like, damn, it's 7 AM[/border][/border][/border][/tab][tab=.][border=
/*outfit*/ 0; box-sizing: border-box; padding: 5px; width: 100%; position: absolute; bottom: 0; right: 0; z-index: 3; font-size: 9px; text-align: center; background: var(--quote-colour); letter-spacing: 0.05em; border-right: 10px solid var(--other-colour); border-left: 10px solid var(--other-colour); color: var(--other-colour); height: 26px; overflow: hidden;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0; width: 50%;][COMMENT]
--------------YC'S OUTFIT--------------
[/COMMENT][B]OUTFIT:[/B] [URL='https://www.youtube.com/watch?v=Dkk9gvTmCXY']You Need To Calm Down[/URL][/border][/border][/border][/tab][tab=.][border=
/*location*/ 0; box-sizing: border-box; padding: 5px; width: 100%; position: absolute; bottom: 0; right: 0; z-index: 3; font-size: 9px; text-align: center; background: var(--quote-colour); letter-spacing: 0.05em; border-right: 10px solid var(--other-colour); border-left: 10px solid var(--other-colour); color: var(--other-colour); height: 26px; overflow: hidden;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0; width: 50%;][COMMENT]
--------------YC'S LOCATION--------------
[/COMMENT][B]LOCATION:[/B] Say it in the street, that's a knock-out but you say it in a Tweet, that's a cop-out and I'm just like, "Hey, are you okay?"[/border][/border][/border][/tab][tab=.][border=
/*interactions*/ 0; box-sizing: border-box; padding: 5px; width: 100%; position: absolute; bottom: 0; right: 0; z-index: 3; font-size: 9px; text-align: center; background: var(--quote-colour); letter-spacing: 0.05em; border-right: 10px solid var(--other-colour); border-left: 10px solid var(--other-colour); color: var(--other-colour); height: 26px; overflow: hidden;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0; width: 50%;][COMMENT]
--------------YC'S INTERACTIONS--------------
[/COMMENT][B]INTERACTIONS:[/B] And I ain't tryna mess with your self-expression but I've learned a lesson that stressin' and obsessin' 'bout somebody else is no fun and snakes and stones never broke my bones[/border][/border][/border][/tab][/tabs][/border][border=
/*button container*/ 0; box-sizing: border-box; padding: 4px 0 4px 0; position: absolute; top: 4px; left: 0; height: 111px; width: 35px; background: var(--background-colour); transparent; opacity: 1; pointer-events: none; display: flex; flex-direction: column; z-index: 2;][border= /*button 1*/ 0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: var(--quote-colour); position: relative; border-radius: 100%; align-self: flex-end; margin-bottom: 8px;][/border][border= /*button 2*/ 0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: var(--other-colour); position: relative; border-radius: 100%; margin-bottom: 10px;][/border][border= /*button 3*/ 0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: var(--quote-colour); position: relative; border-radius: 100%; margin-bottom: 8px;][/border][border= /*button 4*/ 0; box-sizing: border-box; padding: 0; height: 20px; width: 20px; background: var(--other-colour); position: relative; border-radius: 100%; align-self: flex-end;][/border][/border][border=/*YC'S PIC*/ 4px solid var(--quote-colour); box-sizing: border-box; padding: 0; height: 119px; width: 119px; background: var(--ycs-picture); background-size: cover; position: relative; border-radius: 100%; margin-left: -30px; margin-right: 15px; margin-top: -4px;][/border][border= /*quote box*/ 0; box-sizing: border-box; padding: 4px 0 4px 0; height: 111px; flex: 1; position: relative;][border= /*QUOTE*/ 0; box-sizing: border-box; padding: 0 2px 0 0; height: 100%; width: 100%; display: flex; text-align: right; justify-content: flex-end; align-items: center; font-weight: bold; font-size: 19px; font-style: oblique; line-height: 21px; letter-spacing: 0.02em; color: var(--text-colour);][COMMENT]
--------------ADD A QUOTE/LYRIC HERE--------------
[/COMMENT][font=UnifrakturMaguntia]honey, i rose up from the dead (i do it all the time)[/font][/border][/border][border=
/*cover*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 10px; opacity: 0.5px; background: var(--background-colour); left: 0; top: 130px; position: absolute; z-index: 1;][/border][border= /*TEXT*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 250px; position: absolute; bottom: 38px; left: 0; background: var(--background-colour); z-index: 2; overflow: auto;][border=0; box-sizing; border-box; padding: 0; width: 50%; font-size: 11px; text-align: justify; color: var(--text-colour);][COMMENT]
--------------YOU CAN START TYPING IN YOUR POST FROM HERE--------------
[/COMMENT]I would be complex; I would be cool; they'd say I played the field before I found someone to commit to and that would be okay for me to do; every conquest I had made would make me more of a boss to you
I'd be a fearless leader; I'd be an alpha type; when everyone believes ya, what's that like?
I'm so sick of running as fast as I can, wondering if I'd get there quicker if I was a man, and I'm so sick of them coming at me again 'cause if I was a man then I'd be the man; I'd be the man; I'd be the man
They'd say I hustled; put in the work; they wouldn't shake their heads and question how much of this I deserve; what I was wearing, if I was rude, could all be separated from my good ideas and power moves; and they would toast to me, oh, let the players play; I'd be just like Leo, in Saint-Tropez
I'm so sick of running as fast as I can, wondering if I'd get there quicker if I was a man, and I'm so sick of them coming at me again 'cause if I was a man then I'd be the man; I'd be the man; I'd be the man
What's it like to brag about raking in dollars and getting bitches and models? And it's all good if you're bad, and it's okay if you're mad
If I was out flashin' my dollas, I'd be a bitch, not a baller; they'd paint me out to be bad so it's okay that I'm mad; I'm so sick of running as fast as I can, wondering if I'd get there quicker if I was a man (you know that); and I'm so sick of them coming at me again (coming at me again) 'cause if I was a man (if I was man) then I'd be the man (then I'd be the man)
I'm so sick of running as fast as I can, wondering if I'd get there quicker if I was a man (hey)
And I'm so sick of them coming at me again (coming at me again) 'cause if I was a man (if I was man) then I'd be the man; I'd be the man; I'd be the man (oh); I'd be the man (yeah); I'd be the man (I'd be the man)[COMMENT]
--------------DON'T TYPE ANYTHING PAST THIS COMMENT--------------
[/COMMENT][/border][/border][/border][/border][border= /*credit*/ 0; box-sizing: border-box; padding: 9px 0 0 0; text-align: center; font-size: 7px;][url=https://www.rpnation.com/threads/the-dark-ages-mobile-friendly.471463/#post-10440573]code[/url] by valen t.[/border]
(hint: they're on the left !)
Uxie
bc i used a code of theirs to learn 
[COMMENT]
-------------the 10 variable tags (the ones starting with "--" are meant to be filled in with your own colours + links-------------
[/COMMENT][border=0;
--name-n-quote-bg-colour: #5A493C;
--1-accordion-pic: url(https://64.media.tumblr.com/4f3cf242add10423885700b0dad97f8a/c05d4efdddf9c80b-0f/s1280x1920/14c02ad385862f4ee1efc2eacba18b9dafc1dd27.jpg) 50% 50%;
--1-accordion-bg-colour: #957161;
--2-accordion-pic: url(https://64.media.tumblr.com/452e3a9f14d69b7a96f67ff6aea3afd0/c05d4efdddf9c80b-1f/s1280x1920/4b75b0513df9f5cb01698ec4759b8af847096a57.jpg) 50% 20%;
--2-accordion-bg-colour: #86827B;
--3-accordion-pic: url(https://64.media.tumblr.com/d2300dfcf025e63946412de33d7c3ae5/c05d4efdddf9c80b-bc/s1280x1920/f587f78ad26233d461d754ec75444cac785594da.jpg) 50% 50%;
--3-accordion-bg-colour: #96999A;
--4-accordion-pic: url(https://64.media.tumblr.com/db7e40c405ca81346d930f35e8feb8ad/c05d4efdddf9c80b-ab/s1280x1920/c829119e49ee9b7c0224d633f3a4b573fee4daef.jpg) 50% 50%;
--4-accordion-bg-colour: #998674;
--text-colour: white;
box-sizing: border-box; padding: 0;][border= /*container*/ 0; box-sizing: border-box; padding: 0; display: flex; position: relative; margin: auto; height: 460px; max-width: 500px; overflow: hidden;][border= /*left*/ 0; box-sizing: border-box; padding: 0; height: 100%; flex: 2; position: relative; overflow: hidden;][border= /*accordion holder*/ 0; box-sizing: border-box; padding: 0; height: 131.75px; width: 100%; position: relative; overflow: hidden; margin: -16.75px 0 0 0; z-index: 6;][accordion=100%]{slide=[border= /*text container*/ 0; box-sizing: border-box; padding: 10px 0 10px 0; width: calc(100% + 15px); height: 117.75px; background: var(--1-accordion-bg-colour); position: relative; margin: -6.75px 0 0 -7px; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; overflow: auto; height: 100%;][border= /*text*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; width: 50%; font-size: 10px; font-weight: normal; text-align: left; font-variant: none; line-height: 14px; color: var(--text-colour);][COMMENT]
-------------type in your 1st accordion's deets here-------------
[/COMMENT][B]MOOD:[/B] Donec posuere nisl tortor
[B]OUTFIT:[/B] Donec aliquam vestibulum ex
[B]LOCATION:[/B] Vivamus quis aliquet est[COMMENT]
-------------don't type anything past this comment-------------
[/COMMENT][/border][/border][/border]}[border= /*slide*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 115.75px; background: pink; position: relative;][/border]{/slide}{slide=[border=/*PIC 1*/ 0; box-sizing: border-box; padding: 0; pointer-events: none; position: absolute; height: 118px; width: calc(100% + 3px); background: var(--1-accordion-pic); background-size: cover; top: -123.75px; left: -1px;][/border]}two{/slide}[/accordion][/border][border= /*accordion holder*/ 0; box-sizing: border-box; padding: 0; height: 131.75px; width: 100%; position: relative; overflow: hidden; margin: -16.75px 0 0 0; z-index: 5;][accordion=100%]{slide=[border= /*text container*/ 0; box-sizing: border-box; padding: 10px 0 10px 0; width: calc(100% + 15px); height: 117.75px; background: var(--2-accordion-bg-colour); position: relative; margin: -6.75px 0 0 -7px; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; overflow: auto; height: 100%;][border= /*text*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; width: 50%; font-size: 10px; font-weight: normal; text-align: left; font-variant: none; line-height: 14px; color: var(--text-colour);][COMMENT]
-------------type in your 2nd accordion's deets here-------------
[/COMMENT][B]INTERACTIONS:[/B] Aliquam erat volutpat. Quisque malesuada nunc vel convallis vestibulum
[B]MENTIONS:[/B] Donec cursus justo eu aliquet venenatis. Integer consequat[COMMENT]
-------------don't type anything past this comment-------------
[/COMMENT][/border][/border][/border]}[border= /*slide*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 115.75px; background: pink; position: relative;][/border]{/slide}{slide=[border= /*PIC 2*/ 0; box-sizing: border-box; padding: 0; pointer-events: none; position: absolute; height: 117.75px; width: calc(100% + 3px); background: var(--2-accordion-pic); background-size: cover; top: -123.75px; left: -1px;][/border]}two{/slide}[/accordion][/border][border=/*accordion holder*/ 0; box-sizing: border-box; padding: 0; height: 131.75px; width: 100%; position: relative; overflow: hidden; margin: -16.75px 0 0 0; z-index: 4;][accordion=100%]{slide=[border= /*text container*/ 0; box-sizing: border-box; padding: 10px 0 10px 0; width: calc(100% + 15px); height: 117.75px; background: var(--3-accordion-bg-colour); position: relative; margin: -6.75px 0 0 -7px; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; overflow: auto; height: 100%;][border= /*text*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; width: 50%; font-size: 10px; font-weight: normal; text-align: left; font-variant: none; line-height: 14px; color: var(--text-colour);][COMMENT]
-------------type in your 3rd accordion's deets here-------------
[/COMMENT][B]TAGS:[/B]
[USER=68743]@VALEN T.[/USER]
[USER=68743]@VALEN T.[/USER]
[USER=68743]@VALEN T.[/USER]
[USER=68743]@VALEN T.[/USER]
[USER=68743]@VALEN T.[/USER][COMMENT]
-------------don't type anything past this comment-------------
[/COMMENT][/border][/border][/border]}[border=0; box-sizing: border-box; padding: 0; width: 100%; height: 115.75px; background: pink; position: relative;][/border]{/slide}{slide=[border=/*PIC 3*/ 0; box-sizing: border-box; padding: 0; pointer-events: none; position: absolute; height: 116.75px; width: calc(100% + 3px); background: var(--3-accordion-pic); background-size: cover; top: -123px; left: -1px;][/border]}two{/slide}[/accordion][/border][border=/*accordion holder*/ 0; box-sizing: border-box; padding: 0; height: 131.75px; width: 100%; position: relative; overflow: hidden; margin: -16.75px 0 0 0; z-index: 3;][accordion=100%]{slide=[border= /*text container*/ 0; box-sizing: border-box; padding: 10px 0 10px 0; width: calc(100% + 15px); height: 117.75px; background: var(--4-accordion-bg-colour); position: relative; margin: -6.75px 0 0 -7px; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; overflow: auto; height: 100%;][border= /*text*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; width: 50%; font-size: 10px; font-weight: normal; text-align: left; font-variant: none; line-height: 14px; color: var(--text-colour);][COMMENT]
-------------type in your 4th accordion's deets here-------------
[/COMMENT][B][plain]TL;DR:[/plain][/B] Donec posuere nisl tortor. Donec aliquam vestibulum ex. Vivamus quis aliquet est. Aliquam erat volutpat. Quisque malesuada nunc vel convallis vestibulum. Donec cursus justo eu aliquet venenatis[COMMENT]
-------------don't type anything past this comment-------------
[/COMMENT][/border][/border][/border]}[border=0; box-sizing: border-box; padding: 0; width: 100%; height: 115.75px; background: pink; position: relative;][/border]{/slide}{slide=[border=/*PIC 4*/ 0; box-sizing: border-box; padding: 0; pointer-events: none; position: absolute; height: 117.75px; width: calc(100% + 3px); background: var(--4-accordion-pic); background-size: cover; top: -123.75px; left: -1px;][/border]}two{/slide}[/accordion][/border][/border][border=/*right*/ 0; box-sizing: border-box; padding: 0; height: 100%; flex: 5; overflow: hidden;][border= /*flex*/ 0; box-sizing: border-box; padding: 0; height: 100%; width: 100%; position: relative; display: flex; flex-direction: column;][border= /*NAME*/ 0; box-sizing: border-box; padding: 0 10px 1px 10px; width: 100%; background: var(--name-n-quote-bg-colour); text-align: center; font-weight: bold; text-transform: uppercase; font-size: 26px; color: var(--text-colour); font-style: oblique; line-height: 26px; position: relative; margin-bottom: 10px;][COMMENT]
-------------type in yc's name here-------------
[/COMMENT]asiya[COMMENT]
-------------don't type anything after this comment-------------
[/COMMENT][/border][border=/*text*/ 0; box-sizing: border-box; padding: 0; width: 200%; position: relative; flex: 1; overflow: auto;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0 0 0 10px; width: 50%; position: relative; text-align: justify; font-size: 11px; line-height: 15px;][COMMENT]
-------------start typing in your ic post from here-------------
[/COMMENT]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere nisl tortor. Donec aliquam vestibulum ex. Vivamus quis aliquet est. Aliquam erat volutpat. Quisque malesuada nunc vel convallis vestibulum. Donec cursus justo eu aliquet venenatis. Integer consequat, est sit amet dignissim tristique, tortor ipsum pretium lorem, non ornare justo nisi id mauris. Vestibulum ut dapibus leo. Aliquam tempor et orci a posuere. Morbi vel pretium turpis. Curabitur egestas ipsum non augue maximus congue.
Morbi elit mauris, fringilla at aliquam et, semper ut turpis. In sit amet vehicula nisl. Maecenas magna turpis, luctus non malesuada ut, tristique eu turpis. Nulla malesuada et sem vitae euismod. Duis pharetra odio a tortor posuere laoreet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse consectetur lorem quis mauris dignissim, quis tristique nisi mollis. Vivamus efficitur lorem ut massa gravida consectetur. Quisque mattis maximus luctus. Proin fermentum ligula bibendum velit volutpat, sed dapibus mi iaculis. In dictum varius ullamcorper. Sed tristique sit amet dui ac faucibus.
Proin ut nisi sed felis dictum tincidunt id consectetur sem. Sed sit amet mi euismod, dignissim nibh id, faucibus ex. Quisque sit amet condimentum sapien. Sed nisl sapien, cursus et odio id, tristique scelerisque lacus. Nullam in dapibus sapien. Sed odio erat, faucibus et accumsan ut, varius in sem. Cras vitae nibh id elit vestibulum congue vitae eu diam. Donec volutpat odio eget dolor semper, lacinia vehicula lectus ullamcorper. Proin sodales velit lorem, ac consectetur diam suscipit sit amet. Maecenas pharetra blandit lectus, quis interdum odio consequat id. Praesent maximus mattis justo ut imperdiet. Ut finibus posuere euismod. Fusce et felis eu lectus pretium vestibulum. Cras luctus augue non diam dignissim sollicitudin. Donec tristique diam metus. Nullam egestas quis leo nec laoreet.[COMMENT]
-------------don't type anything after this comment-------------
[/COMMENT][/border][/border][border= /*QUOTE*/ 0; box-sizing: border-box; padding: 10px; width: 100%; height: 115px; background: var(--name-n-quote-bg-colour); position: relative; margin-top: 10px; font-weight: bold; color: var(--text-colour); text-transform: uppercase; text-align: right; display: flex; justify-content: flex-end; align-items: center; font-style: oblique; font-size: 14px; line-height: 14px;][COMMENT]
-------------add a quote/lyric here-------------
[/COMMENT]it may be quite simple but now that it's done
I hope you don't mind
That I put down in words
How wonderful life is while you're in the world[COMMENT]
-------------don't type anything after this comment-------------
[/COMMENT][/border][/border][/border][/border][border=/*credit*/ 0; box-sizing: border-box; padding: 9px 0 0 0; max-width: 500px; margin: auto; position: relative; display: flex;][border=0; box-sizing: border-box; padding: 0; flex: 2;][/border][border=0; box-sizing: border-box; padding: 0; flex: 5; font-size: 7px; line-height: 11px; text-align: center;][URL='https://www.rpnation.com/threads/the-dark-ages-mobile-friendly.471463/page-2#post-10452145']code[/URL] by valen t.[/border][/border][/border]
[COMMENT]
-------------------the five variable tags (the ones starting with "--" are meant to be filled in with your own colours + links; i'd suggest keeping the "text-bg-colour" light-------------------
[/COMMENT][border= /*container*/ 0;
--text-bg-colour: #F3ECEA;
--rp-details-bg-colour: #363A34;
--rp-details-text-colour: white;
--ycs-picture: url(https://i.imgur.com/wW1IS4k.jpg) 50% 70%;
--picture-border-colour: #F9BD4B;
box-sizing: border-box; padding: 0; max-width: 570px; height: 350px; position: relative; margin: auto; display: flex; align-items: center; overflow: hidden;][border=
/*left*/ 0; box-sizing: border-box; padding: 0; flex: 15; height: calc(100% - 50px); position: relative; overflow: hidden; font-size: 12px;][border= /*flex*/ 0; box-sizing: border-box; padding: 10px; height: 100%; width: 100%; background: var(--text-bg-colour); position: relative; overflow: hidden; display: flex; flex-direction: column;][border= /*QUOTE*/ 0; box-sizing: border-box; padding: 7px 10px 17px 10px; font-weight: bold; font-style: oblique; width: 100%; text-transform: uppercase; font-size: 20px; height: auto; line-height: 20px; text-align: left; color: black;][COMMENT]
-------------------THE QUOTE GOES HERE-------------------
[/COMMENT]painted in your [color=#F57F32]c[/color][color=#F6933A]o[/color][color=#F7A842]l[/color][color=#F9BD4B]o[/color][color=#DABC42]u[/color][color=#BBBB39]r[/color][color=#B6CC6B]s[/color][COMMENT]
-------------------DON'T TYPE ANYTHING AFTER THIS-------------------
[/COMMENT][/border][border= /*text container*/ 0; box-sizing: border-box; padding: 0; width: 200%; flex: 1; position: relative; font-size: 10px; overflow: auto; line-height: 15px; text-align: justify; color: #222421;][border= /*text*/ 0; box-sizing: border-box; padding: 0; width: 50%; position: relative;][COMMENT]
-------------------YOU CAN START TYPING YOUR CS/POST AFTER THIS COMMENT ENDS-------------------
[/COMMENT]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere nisl tortor. Donec aliquam vestibulum ex. Vivamus quis aliquet est. Aliquam erat volutpat. Quisque malesuada nunc vel convallis vestibulum. Donec cursus justo eu aliquet venenatis. Integer consequat, est sit amet dignissim tristique, tortor ipsum pretium lorem, non ornare justo nisi id mauris. Vestibulum ut dapibus leo. Aliquam tempor et orci a posuere. Morbi vel pretium turpis. Curabitur egestas ipsum non augue maximus congue.
Morbi elit mauris, fringilla at aliquam et, semper ut turpis. In sit amet vehicula nisl. Maecenas magna turpis, luctus non malesuada ut, tristique eu turpis. Nulla malesuada et sem vitae euismod. Duis pharetra odio a tortor posuere laoreet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse consectetur lorem quis mauris dignissim, quis tristique nisi mollis. Vivamus efficitur lorem ut massa gravida consectetur. Quisque mattis maximus luctus. Proin fermentum ligula bibendum velit volutpat, sed dapibus mi iaculis. In dictum varius ullamcorper. Sed tristique sit amet dui ac faucibus.
Proin ut nisi sed felis dictum tincidunt id consectetur sem. Sed sit amet mi euismod, dignissim nibh id, faucibus ex. Quisque sit amet condimentum sapien. Sed nisl sapien, cursus et odio id, tristique scelerisque lacus. Nullam in dapibus sapien. Sed odio erat, faucibus et accumsan ut, varius in sem. Cras vitae nibh id elit vestibulum congue vitae eu diam. Donec volutpat odio eget dolor semper, lacinia vehicula lectus ullamcorper. Proin sodales velit lorem, ac consectetur diam suscipit sit amet. Maecenas pharetra blandit lectus, quis interdum odio consequat id. Praesent maximus mattis justo ut imperdiet. Ut finibus posuere euismod. Fusce et felis eu lectus pretium vestibulum. Cras luctus augue non diam dignissim sollicitudin. Donec tristique diam metus. Nullam egestas quis leo nec laoreet.[COMMENT]
-------------------DONT TYPE ANYTHING AFTER THIS-------------------
[/COMMENT][/border][/border][/border][/border][border= /*right*/ 0; box-sizing: border-box; padding: 0; width: 165px; height: 100%; position: relative; overflow: hidden;][border= /*flex*/ 0; box-sizing: border-box; padding: 10px; height: 100%; width: 100%; position: relative; background: var(--rp-details-bg-colour); position: relative; display: flex; flex-direction: column; overflow: hidden;][border= /*PIC*/ 4px solid var(--picture-border-colour); box-sizing: border-box; padding: 0; width: 100%; height: 150px; position: relative; background: var(--ycs-picture); background-size: cover;][/border][COMMENT][border= /*NAME*/ 0; box-sizing: border-box; padding: 7px 3px 7px 0; width: 100%; height: auto; font-weight: bold; text-transform: uppercase; font-style: oblique; font-size: 20px; text-align: right; position: relative; line-height: 20px; color: var(--picture-border-colour);]
-------------------YC'S FIRST NAME/NICKNAME GOES HERE-------------------
[/COMMENT]ephrata[/border][border=
/*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; flex: 1; position: relative; font-size: 10px; overflow: auto; line-height: 14px; text-align: left; color: var(--rp-details-text-colour);][border= /*text*/ 0; box-sizing: border-box; padding: 0; width: 50%; position: relative;][COMMENT]
-------------------THE EXTRA (RP) INFO GOES HERE-------------------
---------idk man what you can add here depends on what you use this code as (a cs or an ic post)---------
[/COMMENT][color=#F9BD4B][b]MOOD:[/b][/color] Lorem ipsum dolor sit amet, consectetur adipiscing elit
[color=#F9BD4B][b]LOCATION:[/b][/color] Donec posuere nisl tortor
[color=#F9BD4B][B]OUTFIT:[/B][/color] Donec aliquam vestibulum ex
[color=#F9BD4B][B]INTERACTIONS:[/B][/color] Vivamus quis aliquet est
[color=#F9BD4B][B]MENTIONS:[/B][/color] Aliquam erat volutpat
[color=#F9BD4B][B]TAGS:[/B][/color] Quisque malesuada nunc vel convallis vestibulum
[color=#F9BD4B][B][plain]TL;DR:[/plain][/B][/color] Donec cursus justo eu aliquet venenatis[COMMENT]
-------------------DON'T TYPE ANYTHING AFTER THIS-------------------
[/COMMENT][/border][/border][/border][/border][border= /*extra*/ 0; box-sizing: border-box; padding: 0; flex: 1; height: calc(100% - 50px); background: var(--text-bg-colour); position: relative;][/border][/border][border= /*credit*/ 0; box-sizing: border-box; padding: 9px 0 0 0; max-width: 570px; margin: auto; position: relative; display: flex;][border=0; box-sizing: border-box; padding: 0; flex: 15;][/border][border=0; box-sizing: border-box; padding: 0; width: 165px; text-align: center; font-size: 7px;][url=https://www.rpnation.com/threads/the-dark-ages-mobile-friendly.471463/page-2#post-10452160]code[/url] by valen t.[/border][border=0; box-sizing: border-box; padding: 0; flex: 1;][/border][/border]
[COMMENT]
--------the 6 variable values (starting with "--" are meant to be filled in with your own colours + links; the "darkest-triangle" is the one on the top right--------
[/COMMENT][border=/*2NG LIGHTEST BG*/ 0;
--quote-colour: #DDAAB3;
--darkest-triangle: #9A031D;
--picture-border-colour: #B34256;
--ycs-picture: url(https://i.pinimg.com/564x/5d/5d/c7/5d5dc7f00ccaabef6a94d17c116144ae.jpg) 50% 50%;
--text-background-colour: #F8EDEF;
--text-colour: #260107;
box-sizing: border-box; padding: 0; position: relative; margin: auto; max-width: 450px; height: 570px; display: flex; overflow: hidden; background: var(--quote-colour);][border= /*TOP RIGHT TRIANGLE*/ 0; box-sizing: border-box; padding: 0; position: absolute; top: 0; right: 0; width: 0; height: 0; border-top: 170px solid var(--darkest-triangle); border-left: 390px solid transparent; z-index: 4;][/border][border= /*TOP LEFT TRIANGLE*/ 0; box-sizing: border-box; padding: 0; position: absolute; top: 0; left: 0; width: 0; height: 0; border-top: 200px solid var(--picture-border-colour); border-right: 200px solid transparent; z-index: 3;][/border][border= /*YC'S PROFILE PIC*/ 3px solid var(--picture-border-colour); box-sizing: border-box; padding: 0; position: absolute; height: 90px; width: 90px; border-radius: 100%; background: var(--ycs-picture); background-size: 110%; z-index: 5; top: 80px; left: 30px;][/border][border= /*rp detail box*/ 0; box-sizing: border-box; padding: 0; position: relative; height: 100%; width: 140px; overflow: hidden; z-index: 2;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0 0 0 10px; position: absolute; bottom: 10px; left: 0; width: 200%; height: 345px; overflow: auto;][border= /*more hidden scroll*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; position: relative; width: 130px; font-size: 11px; text-transform: uppercase; text-align: justify; line-height: 15px; color: var(--text-background-colour);][COMMENT]
----------------THESE ARE THE RP DETAILS----------------
--------e.g. mood, location, tags, etc--------
[/COMMENT][border= /*DETAIL*/ 0; box-sizing: border-box; padding: 0 0 1px 3px; position: relative; width: calc(100% + 20px); border-bottom: 2px solid var(--text-background-colour); font-weight: bold; margin-left: -10px; margin-bottom: 6px; letter-spacing: 0.07em;]name[/border]first middle last
[border= /*DETAIL*/ 0; box-sizing: border-box; padding: 0 0 1px 3px; position: relative; width: calc(100% + 20px); border-bottom: 2px solid var(--text-background-colour); font-weight: bold; margin-left: -10px; margin-bottom: 6px; letter-spacing: 0.07em;]mood[/border]whatever
[border= /*DETAIL*/ 0; box-sizing: border-box; padding: 0 0 1px 3px; position: relative; width: calc(100% + 20px); border-bottom: 2px solid var(--text-background-colour); font-weight: bold; margin-left: -10px; margin-bottom: 6px; letter-spacing: 0.07em;]outfit[/border]whatever
[border= /*DETAIL*/ 0; box-sizing: border-box; padding: 0 0 1px 3px; position: relative; width: calc(100% + 20px); border-bottom: 2px solid var(--text-background-colour); font-weight: bold; margin-left: -10px; margin-bottom: 6px; letter-spacing: 0.07em;]location[/border]wherever
[border= /*DETAIL*/ 0; box-sizing: border-box; padding: 0 0 1px 3px; position: relative; width: calc(100% + 20px); border-bottom: 2px solid var(--text-background-colour); font-weight: bold; margin-left: -10px; margin-bottom: 6px; letter-spacing: 0.07em;]interactions[/border]whoever
[border= /*DETAIL*/ 0; box-sizing: border-box; padding: 0 0 1px 3px; position: relative; width: calc(100% + 20px); border-bottom: 2px solid var(--text-background-colour); font-weight: bold; margin-left: -10px; margin-bottom: 6px; letter-spacing: 0.07em;]mentions[/border]whoever
[border= /*DETAIL*/ 0; box-sizing: border-box; padding: 0 0 1px 3px; position: relative; width: calc(100% + 20px); border-bottom: 2px solid var(--text-background-colour); font-weight: bold; margin-left: -10px; margin-bottom: 6px; letter-spacing: 0.07em;]tags[/border]whoever
[border= /*DETAIL*/ 0; box-sizing: border-box; padding: 0 0 1px 3px; position: relative; width: calc(100% + 20px); border-bottom: 2px solid var(--text-background-colour); font-weight: bold; margin-left: -10px; margin-bottom: 6px; letter-spacing: 0.07em;][plain]tl;dr[/plain][/border]whatever
[/border][/border][/border][border=
/*POST TEXT CONTAINER*/ 0; box-sizing: border-box; padding: 0; position: relative; height: 100%; flex: 13; z-index: 2; overflow: hidden; background: var(--text-background-colour);][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; position: absolute; bottom: 20px; left: 0; height: 380px; width: 200%; overflow: auto; text-align: justify;][border= /*more hidden scroll*/ 0; box-sizing: border-box; padding: 0 20px 0 20px; width: 50%; font-size: 11px; line-height: 17px; color: var(--text-colour);][COMMENT]
----------------YOU CAN START TYPING IN YOUR ACTUAL IC REPLY AFTER THIS COMMENT----------------
[/COMMENT]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere nisl tortor. Donec aliquam vestibulum ex. Vivamus quis aliquet est. Aliquam erat volutpat. Quisque malesuada nunc vel convallis vestibulum. Donec cursus justo eu aliquet venenatis. Integer consequat, est sit amet dignissim tristique, tortor ipsum pretium lorem, non ornare justo nisi id mauris. Vestibulum ut dapibus leo. Aliquam tempor et orci a posuere. Morbi vel pretium turpis. Curabitur egestas ipsum non augue maximus congue.
Morbi elit mauris, fringilla at aliquam et, semper ut turpis. In sit amet vehicula nisl. Maecenas magna turpis, luctus non malesuada ut, tristique eu turpis. Nulla malesuada et sem vitae euismod. Duis pharetra odio a tortor posuere laoreet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse consectetur lorem quis mauris dignissim, quis tristique nisi mollis. Vivamus efficitur lorem ut massa gravida consectetur. Quisque mattis maximus luctus. Proin fermentum ligula bibendum velit volutpat, sed dapibus mi iaculis. In dictum varius ullamcorper. Sed tristique sit amet dui ac faucibus.
Proin ut nisi sed felis dictum tincidunt id consectetur sem. Sed sit amet mi euismod, dignissim nibh id, faucibus ex. Quisque sit amet condimentum sapien. Sed nisl sapien, cursus et odio id, tristique scelerisque lacus. Nullam in dapibus sapien. Sed odio erat, faucibus et accumsan ut, varius in sem. Cras vitae nibh id elit vestibulum congue vitae eu diam. Donec volutpat odio eget dolor semper, lacinia vehicula lectus ullamcorper. Proin sodales velit lorem, ac consectetur diam suscipit sit amet. Maecenas pharetra blandit lectus, quis interdum odio consequat id. Praesent maximus mattis justo ut imperdiet. Ut finibus posuere euismod. Fusce et felis eu lectus pretium vestibulum. Cras luctus augue non diam dignissim sollicitudin. Donec tristique diam metus. Nullam egestas quis leo nec laoreet.[/border][/border][/border][border=
/*SHORT QUOTE*/ 0; box-sizing: border-box; padding: 20px 20px 20px 10px; position: absolute; top: 0; right: 0; height: 170px; width: calc(100% - 140px); z-index: 6; font-weight: bold; text-transform: uppercase; font-size: 130%; color: var(--quote-colour); display: flex; line-height: 90%; align-items: flex-end;][border=0; box-sizing: border-box; padding: 0; height: auto;][COMMENT]
----------------ADD A SHORT QUOTE/LYRIC HERE----------------
[/COMMENT]i shine the brightest when i'm just me[/border][/border][/border][border=
/*credits*/ 0; box-sizing: border-box; padding: 9px 0 0 0; position: relative; max-width: 450px; margin: auto; display: flex;][border=0; box-sizing; border-box; padding: 0; width: 140px;][/border][border=0; box-sizing: border-box; padding: 0; flex: 1; font-size: 7px; text-align: center;][url=https://www.rpnation.com/threads/the-dark-ages-mobile-friendly.471463/page-2#post-10461526]code[/url] by valen t.[/border][/border][COMMENT]
----------the four variant properties (the ones starting with "--" are meant to filled in with your own colours + urls unless you want to keep the current ones----------
[/COMMENT][border=/*container*/ 0;
--accent-colour: #90BDC5;
--background-colour: #E6E6E6;
--iphone-lockscreen-wallpaper: url(https://64.media.tumblr.com/75a6bf9d3b0fec4c5cecfe86768ff770/tumblr_pc4wpnCAdL1x4bsero1_1280.jpg) 50% 50%;
--twitter-profile-picture: url(https://64.media.tumblr.com/1096990840dbe6a22b0aed1b7e7ea239/tumblr_pc4wpnCAdL1x4bsero2_1280.jpg) 50% 50%;
box-sizing: border-box; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; height: auto; max-width: 520px; position: relative; margin: auto; overflow: hidden; cursor: default;][border= /*left*/ 0; box-sizing: border-box; padding: 0; width: 240px; height: 490px; position: relative; display: flex; flex-direction: column; align-items: center; margin: 5px; overflow: hidden;][border= /*NAME*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: auto; line-height: 12px; font-size: 14px; font-style: oblique; text-transform: uppercase; position: relative; margin-bottom: 3px; text-align: center; color: var(--accent-colour); font-weight: bold;][COMMENT]
--------------------YC'S NAME GOES HERE--------------------
[/COMMENT]wong yuk-hei[/border][border=
/*accordion holder*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 330px; border-radius: 10px; position: relative; margin-bottom: 10px; overflow: hidden;][border=
0; box-sizing: border-box; padding: 0; position: relative; margin: auto; width: 100%; height: calc(100% + 15px); overflow: hidden; margin: -15px 0 0 0;][accordion=100%]{slide=[border=
/*IPHONE TEXT BG*/ 0; box-sizing: border-box; padding: 10px 0 0 0; position: relative; height: 331px; width: calc(100% + 14px); background: var(--background-colour); margin: -7px 0 0 -7px; display: flex; flex-direction: column; overflow: hidden; font-weight: normal; font-variant: normal; text-align: justify;][border=
/*top hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; flex: 1; position: relative; overflow: auto; margin-bottom: 10px;][border= /*more top hidden scroll*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; width: 240px; font-size: 12px; color: black; line-height: 16px;][COMMENT]
--------------------YOU CAN START TYPING IN YOUR CS AFTER THIS COMMENT--------------------
----------copy + paste the "detail" tags to add more cs info----------
[/COMMENT][border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px; z-index: 2;]name[/border] wong yuk-hei
[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px; z-index: 2;]alias[/border] lucas
[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px; z-index: 2;]nickname(s)[/border] xuxi, foodcas, kaka
[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px; z-index: 2;]age[/border] 21
[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px; z-index: 2;]d.o.b.[/border] 25 january
[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px; z-index: 2;]gender[/border] male
[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px; z-index: 2;]pronouns[/border] he/him
[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px; z-index: 2;]sexuality[/border] Lorem ipsum dolor sit amet, consectetur adipiscing elit
[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px; z-index: 2;]romantic orientation[/border] Donec posuere nisl tortor
[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px; z-index: 2;]race[/border] Donec aliquam vestibulum ex
[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px; z-index: 2;]p.o.b.[/border] Vivamus quis aliquet est
[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px; z-index: 2;]academic level[/border] Aliquam erat volutpat
[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px; z-index: 2;]occupation[/border] Quisque malesuada nunc vel convallis vestibulum[COMMENT]
--------------------DON'T TYPE ANYTHING AFTER THIS COMMENT--------------------
[/COMMENT][/border][/border][border= /*pics holder*/ 0; box-sizing: border-box; padding: 10px 20px 10px 20px; width: 100%; height: 93px; position: relative; display: flex; justify-content: space-between;][COMMENT]
--------------------THESE CIRCLES ARE 3 SMALL PICS--------------------
----------you can make them a solid colour too (instead of a pic) if you'd like, by replacing "url(---) 50% 50%; background-size: cover;" with a HEX value----------
[/COMMENT][border= /*CIRCLE 1*/ 3px solid var(--accent-colour); box-sizing: border-box; padding: 0; height: 66px; width: 66px; position: relative; border-radius: 100%; background: url(https://64.media.tumblr.com/75a6bf9d3b0fec4c5cecfe86768ff770/tumblr_pc4wpnCAdL1x4bsero1_1280.jpg) 50% 50%; background-size: cover; margin-right: 10px;][/border][border=
/*CIRCLE 2*/ 3px solid var(--accent-colour); box-sizing: border-box; padding: 0; height: 39px; width: 39px; position: relative; border-radius: 100%; background: url(https://64.media.tumblr.com/53d5052f00597350a949b4ab17a71498/tumblr_pc4wpnCAdL1x4bsero4_1280.jpg) 50% 50%; background-size: cover;align-self: center;][/border][border=
/*CIRCLE 3*/ 3px solid var(--accent-colour); box-sizing: border-box; padding: 0; height: 23px; width: 23px; position: relative; border-radius: 100%; background: url(https://64.media.tumblr.com/e3b320b2052829c83e0222d130de9f93/tumblr_pc4wpnCAdL1x4bsero6_1280.jpg) 50% 50%; background-size: cover;][/border] [/border][/border]}[border=
/*ignore*/ 0; box-sizing: border-box; padding: 0; position: relative; height: 331px; width: 100%;][/border]{/slide}{slide=[border= /*IPHONE LOCKSCREEN*/ 0; box-sizing: border-box; padding: 40px 0 40px 0; position: absolute; height: 331.75px; width: calc(100% + 2px); background: var(--iphone-lockscreen-wallpaper); background-size: cover; left: -1px; top: -337.75px; pointer-events: none; border-radius: 9px; display: flex; flex-direction: column; color: white; text-align: center; font-weight: normal; font-variant: normal; z-index: 4;][border=
/*TIME*/ 0; box-sizing: border-box; padding: 0; position: relative; font-size: 40px; width: 100%; line-height: 28px; margin-bottom: 15px;][font=Arimo]1:27[/font][/border][border=
/*DATE*/ 0; box-sizing: border-box; padding: 0; position: relative; font-size: 15px; width: 100%; line-height: 15px;][font=Varta]Monday, January 27[/font][/border][border=
/*swipe*/ 0; box-sizing: border-box; padding: 0; position: relative; font-size: 13px; width: 100%; line-height: 13px; flex: 1;][border= /*flex*/ 0; box-sizing: border-box; padding: 0; height: 100%; width: 100%; display: flex; align-items: flex-end; justify-content: center;][border= /*right arrow*/ 0; box-sizing: border-box; padding: 0 6px 2px 0; position: relative;][fa]fa-chevron-right[/fa][/border][font=Varta]slide to unlock[/font][/border][/border][/border]}{/slide}[/accordion][/border][/border][border=
/*VISAGE CS BOX*/ 0; box-sizing: border-box; padding: 10px 0 10px 0; width: 100%; flex: 1; background: var(--background-colour); position: relative; overflow: hidden; border-radius: 10px;][border=
/*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; position: relative; overflow: auto;][border= /*more hidden scroll*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; width: 240px; position: relative; font-size: 12px; color: black; line-height: 16px;][COMMENT]
--------------------YOU CAN START TYPING IN YOUR CS AFTER THIS COMMENT--------------------
[/COMMENT][border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px; z-index: 2;]face claim[/border] wong yuk-hei (lucas)
[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px; z-index: 2;]eyes[/border] lorem ipsum dolor sit amet, consectetur adipiscing elit
[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px; z-index: 2;]hair[/border] donec posuere nisl tortor. Donec aliquam vestibulum ex
[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px; z-index: 2;]skin[/border] vivamus quis aliquet est
[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px; z-index: 2;]height[/border] aliquam erat volutpat
[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px; z-index: 2;]weight[/border] quisque malesuada nunc vel convallis vestibulum
[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px; z-index: 2;]build[/border] donec cursus justo eu aliquet venenatis
[border= /*detail*/ 0; box-sizing: border-box; padding: 0 7px 0 7px; position: relative; display: inline-block; background: var(--accent-colour); border-radius: 3px; text-transform: uppercase; font-size: 13px; margin-right: 4px; z-index: 2;]distinguishing features[/border] integer consequat, est sit amet dignissim tristique, tortor ipsum pretium lorem, non ornare justo nisi id mauris[COMMENT]
--------------------DON'T TYPE ANYTHING AFTER THIS COMMENT--------------------
[/COMMENT][/border][/border][/border][/border][border= /*right*/ 0; box-sizing: border-box; padding: 0; width: 240px; height: 490px; position: relative; margin: 5px; overflow: hidden; display: flex; flex-direction: column;][border=
/*TWITTER BACKGROUND*/ 0; box-sizing: border-box; padding: 0 0 11px 0; position: relative; width: 100%; height: 211px; background: var(--background-colour); display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; margin-bottom: 10px;][border=
/*TWITTER HEADER*/ 0; box-sizing: border-box; padding: 0 0 0 20px; position: relative; width: 100%; height: 70px; background: var(--accent-colour); display: flex; align-items: flex-end; margin-bottom: 30px;][border=
/*PROFILE PIC*/ 3px solid var(--accent-colour); box-sizing: border-box; padding: 0; width: 70px; height: 70px; background: var(--twitter-profile-picture); background-size: cover; position: relative; border-radius: 5px; margin-bottom: -20px; margin-right: 6px;][/border][COMMENT]
--------------------YC'S TWITTER HANDLE/USERNAME GOES HERE--------------------
[/COMMENT][border= /*USERNAME*/ 0; box-sizing: border-box; padding: 0 0 1px 0; position: relative; flex: 1; height: auto; font-style: oblique; font-size: 13px; color: black;][plain]@lucas_xx444[/plain][/border][/border][border=
/*twitter posts*/ 0; box-sizing: border-box; padding: 0; width: 200%; position: relative; flex: 1; overflow: auto;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; width: 240px; position: relative;][COMMENT]
--------------------YC'S TWITTER PICTURES--------------------
----------if you want to add more pics, the "pic holder" tag is important to copy + paste along with the two "pic" ones----------
[/COMMENT][border= /*pic holder*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 100px; display: flex; position: relative;][border=
/*PIC*/ 0; box-sizing: border-box; padding: 0; flex: 1; background: url(https://64.media.tumblr.com/690b7fd5fc2c38b0d4b81b8a0d713ca9/tumblr_pc4wpnCAdL1x4bsero5_1280.jpg) 50% 50%; background-size: cover; border-radius: 5px; position: relative; margin-right: 10px;][/border][border=
/*PIC*/ 0; box-sizing: border-box; padding: 0; flex: 1; background: url(https://64.media.tumblr.com/dab5b069c6de9241248443c1f811a90b/tumblr_pc4wpnCAdL1x4bsero3_500.jpg) 50% 50%; background-size: cover; border-radius: 5px; position: relative;][/border][/border][border=
/*pic holder*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 100px; display: flex; position: relative; margin-top: 10px;][border=
/*PIC*/ 0; box-sizing: border-box; padding: 0; flex: 1; background: url(https://64.media.tumblr.com/54768e62a1170ce8512440aba2c95c73/tumblr_pc4wpnCAdL1x4bsero9_500.jpg) 50% 50%; background-size: cover; border-radius: 5px; position: relative; margin-right: 10px;][/border][border=
/*PIC*/ 0; box-sizing: border-box; padding: 0; flex: 1; background: url(https://64.media.tumblr.com/24536f0286feb02dbc64a29e77be22e3/tumblr_pc4wpnCAdL1x4bsero8_1280.jpg) 50% 50%; background-size: cover; border-radius: 5px; position: relative;][/border][/border][COMMENT]
----------here i left the second "url(---) 50% 50%;" empty bc i didn't want to add a pic BUT THE "PIC HOLDER" TAG IS STILL IMPORTANT----------
[/COMMENT][border=/*pic holder*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 100px; display: flex; position: relative; margin-top: 10px;][border=
/*PIC*/ 0; box-sizing: border-box; padding: 0; flex: 1; background: url(https://64.media.tumblr.com/ee35beb1c5e6f1d8208b380c219c070c/tumblr_pc4wpnCAdL1x4bsero7_1280.jpg) 50% 50%; background-size: cover; border-radius: 5px; position: relative; margin-right: 10px;][/border][border=
/*PIC*/ 0; box-sizing: border-box; padding: 0; flex: 1; background: url() 50% 50%; background-size: cover; border-radius: 5px; position: relative;][/border][/border][COMMENT]
--------------------DON'T ADD ANY PICS AFTER THIS COMMENT--------------------
[/COMMENT][/border][/border][/border][COMMENT]
--------------------ADD A SHORT QUOTE HERE--------------------
[/COMMENT][border= /*QUOTE*/ 0; box-sizing: border-box; padding: 10px 13.5px 10px 10px; position: relative; width: 100%; height: auto; background: var(--accent-colour); border-radius: 10px; margin-bottom: 10px; font-style: oblique; text-transform: uppercase; font-size: 15px; line-height: 17px; text-align: justify; color: white;]we have the opportunity to create the world: let it all be in awe[/border][border=
/*HISTORY + PERSONA BOX*/ 0; box-sizing: border-box; padding: 0 0 10px 0; position: relative; width: 100%; flex: 1; background: var(--background-colour); border-radius: 10px; overflow: hidden;][border=
/*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; position: relative; overflow: auto;][border= /*more hidden scroll*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; width: 240px; position: relative; font-size: 12px; text-align: justify; line-height: 16px; color: black;][COMMENT]
--------------------YOU CAN START TYPING IN YOUR CS FROM HERE--------------------
----------the "title holder" + "title" tags go together for the big titles like "personality" and "history"; you can add more titles of these by copying those 2 tags----------
[/COMMENT][border= /*TITLE HOLDER*/ 0; box-sizing: border-box; padding: 0 0 10px 0; width: calc(100% + 20px); height: auto; margin-left: -10px; position: sticky; top: 0; background: var(--background-colour); z-index: 3;][border= /*TITLE*/ 0; box-sizing: border-box; padding: 3px 0 3px 0; width: 100%; height: auto; text-transform: uppercase; position: relative; background: var(--accent-colour); text-align: center; font-size: 25px; line-height: 25px;]personality[/border][/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere nisl tortor. Donec aliquam vestibulum ex. Vivamus quis aliquet est. Aliquam erat volutpat. Quisque malesuada nunc vel convallis vestibulum. Donec cursus justo eu aliquet venenatis. Integer consequat, est sit amet dignissim tristique, tortor ipsum pretium lorem, non ornare justo nisi id mauris. Vestibulum ut dapibus leo. Aliquam tempor et orci a posuere. Morbi vel pretium turpis. Curabitur egestas ipsum non augue maximus congue.
[border=/*TITLE HOLDER*/ 0; box-sizing: border-box; padding: 0 0 10px 0; width: calc(100% + 20px); height: auto; margin-left: -10px; position: sticky; top: 0; background: var(--background-colour); z-index: 3;][border= /*TITLE*/ 0; box-sizing: border-box; padding: 3px 0 3px 0; width: 100%; height: auto; text-transform: uppercase; position: relative; background: var(--accent-colour); text-align: center; font-size: 25px; line-height: 25px;]history[/border][/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere nisl tortor. Donec aliquam vestibulum ex. Vivamus quis aliquet est. Aliquam erat volutpat. Quisque malesuada nunc vel convallis vestibulum. Donec cursus justo eu aliquet venenatis. Integer consequat, est sit amet dignissim tristique, tortor ipsum pretium lorem, non ornare justo nisi id mauris. Vestibulum ut dapibus leo. Aliquam tempor et orci a posuere. Morbi vel pretium turpis. Curabitur egestas ipsum non augue maximus congue.[COMMENT]
--------------------DON'T TYPE ANYTHING PAST THIS COMMENT--------------------
[/COMMENT][/border][/border][/border][/border][/border][border= /*credit*/ 0; box-sizing: border-box; padding: 1px 0 0 0; position: relative; font-size: 7px; text-align: center;][URL='https://www.rpnation.com/threads/the-dark-ages-mobile-friendly.471463/page-2#post-10474687']code[/URL] by valen t.[/border]
weldherwings
for letting us know variables are still a thing [COMMENT]
--------the 9 variable values (the ones starting with "--") are meant to be filled in with your own colours + links; i recommend keeping the "name-shadow-colour" a light colour--------
[/COMMENT][font=Times New Roman][border= /*container*/ 0;
--main-bg-colour: #DAD4D3;
--name-shadow-colour: #F8F6F6;
--left-accordion-colour: #6A5542;
--middle-accordion-colour: #474C3F;
--right-accordion-colour: #23433C;
--top-left-moodboard-pic: url(https://i.pinimg.com/564x/f5/bd/7d/f5bd7db00154043621c2a079788ed4de.jpg) 50% 50%;
--top-right-moodboard-pic: url(https://i.pinimg.com/564x/13/dd/b2/13ddb23f4d4ba95075b87e67a3116d4c.jpg) 50% 50%;
--bottom-left-moodboard-pic: url(https://i.pinimg.com/564x/fe/6f/a8/fe6fa847968878cade18095d35788975.jpg) 50% 50%;
--bottom-right-moodboard-pic: url(https://i.pinimg.com/564x/f7/ca/50/f7ca506f71fdeb0256ea4a9841aa755a.jpg) 50% 50%;
box-sizing: border-box; padding: 0; max-width: 700px; min-height: 466px; position: relative; margin: auto; display: flex; flex-wrap: wrap; overflow: hidden; justify-content: center; align-items: center; color: black;][border= /*left*/ 0; box-sizing: border-box; padding: 30px; width: 350px; height: 466px; background: var(--main-bg-colour); display: flex; flex-direction: column; overflow: hidden;][border= /*pic container*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 137px; position: relative; display: flex; margin-bottom: 5px;][border= /*TOP LEFT*/ 0; box-sizing: border-box; padding: 0; flex: 1; background: var(--top-left-moodboard-pic); background-size: cover; position: relative; margin-right: 5px; overflow: hidden;][/border][border= /*TOP RIGHT*/ 0; box-sizing: border-box; padding: 0; flex: 1; background: var(--top-right-moodboard-pic); background-size: cover;][/border][/border][border= /*pic container*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 137px; position: relative; display: flex; margin-bottom: 30px;][border= /*BOTTOM LEFT*/ 0; box-sizing: border-box; padding: 0; flex: 1; background: var(--bottom-left-moodboard-pic); background-size: cover; position: relative; margin-right: 5px;][/border][border= /*BOTTOM RIGHT*/ 0; box-sizing: border-box; padding: 0; flex: 1; background: var(--bottom-right-moodboard-pic); background-size: cover;][/border][/border][border= /*rp deets*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 97px; display: flex;][border= /*left acc*/ 0; box-sizing: border-box; padding: 0; flex: 1; position: relative; margin-right: 5px; overflow: hidden;][border= /*accordion holder*/ 0; box-sizing: border-box; padding: 0; height: calc(100% + 15px); width: 100%; position: relative; overflow: hidden; margin: -15px 0 0 0; background: green;][accordion=100%]{slide=[border=0; box-sizing: border-box; padding: 5px 0 5px 0; position: relative; height: 98px; width: calc(100% + 14px); background: var(--name-shadow-colour); margin: -7px 0 0 -7px; font-weight: normal; font-variant: normal; overflow: hidden;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0 5px 0 5px; width: 50%; color: black; font-size: 11px; line-height: 11px; letter-spacing: 0.01em;][COMMENT]
--------this is the "basics" (mood + outfit + location) accordion--------
[/COMMENT][b][color=#6A5542]MOOD:[/color][/b] Lorem ipsum dolor sit amet, consectetur adipiscing elit
[b][color=#6A5542]OUTFIT:[/color][/b] Nunc maximus malesuada mauris, ac commodo ex semper sed
[b][color=#6A5542]LOCATION:[/color][/b] Integer nisi ipsum, blandit vel porttitor pretium, vestibulum in est[COMMENT]
--------don't type anything after this comment--------
[/COMMENT][/border][/border][/border]}[border= /*ignore*/ 0; box-sizing: border-box; padding: 0; position: relative; height: 98px; width: 100%;][/border]{/slide}{slide=[border= /*MOOD + OUTFIT + LOCATION*/ 0; box-sizing: border-box; padding: 0; position: absolute; height: 99px; width: calc(100% + 2px); background: var(--left-accordion-colour); background-size: cover; left: -1px; top: -105px; pointer-events: none; font-size: 10px; letter-spacing: 0.2em; font-variant: normal; text-align: center; text-transform: uppercase; display: flex; align-items: center; justify-content: center; color: var(--name-shadow-colour);]basics[/border]}{/slide}[/accordion][/border][/border][border= /*middle acc*/ 0; box-sizing: border-box; padding: 0; flex: 1; position: relative; margin-right: 5px; overflow: hidden;][border= /*accordion holder*/ 0; box-sizing: border-box; padding: 0; height: calc(100% + 15px); width: 100%; position: relative; overflow: hidden; margin: -15px 0 0 0; background: green;][accordion=100%]{slide=[border=0; box-sizing: border-box; padding: 5px 0 5px 0; position: relative; height: 98px; width: calc(100% + 14px); background: var(--name-shadow-colour); margin: -7px 0 0 -7px; font-weight: normal; font-variant: normal; overflow: hidden;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0 5px 0 5px; width: 50%; color: black; font-size: 11px; line-height: 11px; letter-spacing: 0.01em;][COMMENT]
--------this is the "tags" (mentions + interactions) accordion--------
[/COMMENT][b][color=#474C3F]MENTIONS:[/color][/b]
[USER=68743]@VALEN T.[/USER]
[USER=68743]@VALEN T.[/USER]
[b][color=#474C3F]INT:[/color][/b]
[USER=68743]@VALEN T.[/USER]
[USER=68743]@VALEN T.[/USER][COMMENT]
--------don't type anything after this comment--------
[/COMMENT][/border][/border][/border]}[border= /*ignore*/ 0; box-sizing: border-box; padding: 0; position: relative; height: 98px; width: 100%;][/border]{/slide}{slide=[border= /*INTERACTIONS + MENTIONS*/ 0; box-sizing: border-box; padding: 0; position: absolute; height: 99px; width: calc(100% + 2px); background: var(--middle-accordion-colour); background-size: cover; left: -1px; top: -105px; pointer-events: none; font-size: 10px; letter-spacing: 0.2em; font-variant: normal; text-align: center; text-transform: uppercase; display: flex; align-items: center; justify-content: center; color: var(--name-shadow-colour);]tags[/border]}{/slide}[/accordion][/border][/border][border= /*right acc*/ 0; box-sizing: border-box; padding: 0; flex: 1; overflow: hidden;][border= /*accordion holder*/ 0; box-sizing: border-box; padding: 0; height: calc(100% + 15px); width: 100%; position: relative; overflow: hidden; margin: -15px 0 0 0; background: green;][accordion=100%]{slide=[border=0; box-sizing: border-box; padding: 5px 0 5px 0; position: relative; height: 98px; width: calc(100% + 14px); background: var(--name-shadow-colour); margin: -7px 0 0 -7px; font-weight: normal; font-variant: normal; overflow: hidden;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0 5px 0 5px; width: 50%; color: black; font-size: 11px; line-height: 11px; letter-spacing: 0.01em;][COMMENT]
--------this is the post tldr accordion--------
[/COMMENT][b][color=#23433C][plain]TL;DR[/plain][/color][/b] Sed fermentum tortor nulla, vel sodales nibh bibendum eu. Maecenas a lacus a libero blandit commodo. In lobortis aliquam urna, id tempor ex semper at[COMMENT]
--------don't type anything after this comment--------
[/COMMENT][/border][/border][/border]}[border= /*ignore*/ 0; box-sizing: border-box; padding: 0; position: relative; height: 98px; width: 100%;][/border]{/slide}{slide=[border= /*POST TLDR*/ 0; box-sizing: border-box; padding: 0; position: absolute; height: 99px; width: calc(100% + 2px); background: var(--right-accordion-colour); background-size: cover; left: -1px; top: -105px; pointer-events: none; font-size: 10px; letter-spacing: 0.2em; font-variant: normal; text-align: center; text-transform: uppercase; display: flex; align-items: center; justify-content: center; color: var(--name-shadow-colour);][plain]tl;dr[/plain][/border]}{/slide}[/accordion][/border][/border][/border][/border][border= /*right*/ 0; box-sizing: border-box; padding: 30px; width: 350px; height: 466px; background: var(--main-bg-colour); display: flex; flex-direction: column; overflow: hidden;][border= /*name*/ 0; box-sizing: border-box; padding: 0; width: 100%; text-transform: uppercase; font-weight: bold; text-align: right; font-size: 28px; line-height: 23px; position: relative; margin: -1.4px 0 10px 0; letter-spacing: 0.02em; text-shadow: 3px 0 var(--name-shadow-colour);][COMMENT]
--------add yc's name--------
[/COMMENT]medusa[/border][border=
/*line*/ 0; box-sizing: border-box; padding: 0; width: calc(100% + 30px); height: 4px; background: var(--name-shadow-colour); position: relative; margin: 0 0 13px 0;][/border][border=/*quote*/ 0; box-sizing: border-box; padding: 0; width: 100%; font-style: oblique; font-size: 14px; line-height: 14px; text-align: right; letter-spacing: 0.03em; margin: 0 0 30px 0; position: relative;][COMMENT]
--------add a short quote--------
[/COMMENT]mirror, mirror, can't you see: what you show is killing me[/border][border=
/*text*/ 0; box-sizing: border-box; padding: 0; flex: 1; position: relative; text-align: justify; overflow: auto; width: 200%;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 50%; font-size: 12px; line-height: 14px;][COMMENT]
--------start your ic post from here--------
[/COMMENT]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut varius enim. Integer viverra erat vel dolor commodo congue. Proin viverra magna eget egestas bibendum. Aenean id pellentesque massa. Aenean consequat nulla id molestie vulputate. Nam sem leo, malesuada in ante eu, euismod auctor diam. Suspendisse condimentum dolor id mi bibendum pellentesque. Nunc maximus malesuada mauris, ac commodo ex semper sed. Integer nisi ipsum, blandit vel porttitor pretium, vestibulum in est. In hac habitasse platea dictumst. Quisque laoreet nisl vel gravida fringilla. Sed fermentum tortor nulla, vel sodales nibh bibendum eu. Maecenas a lacus a libero blandit commodo. In lobortis aliquam urna, id tempor ex semper at. Integer gravida felis tortor, et posuere orci rutrum id. Morbi non metus felis.
Nulla blandit, massa vitae posuere dignissim, elit quam posuere nibh, non vulputate nibh lorem vel ante. Nunc in justo rhoncus leo bibendum tempor nec ac erat. Vivamus pellentesque aliquam lacus, sed vulputate velit bibendum ac. Aliquam a malesuada risus, sed ullamcorper metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras varius sapien ut quam vestibulum, ultrices faucibus enim mattis. Proin sagittis neque lorem, ac facilisis mauris porta vel. Nam tincidunt erat in nisi egestas, sit amet blandit magna maximus. Donec nisl purus, rhoncus finibus consectetur non, tincidunt quis dui.
Proin at nisl eget massa ultrices hendrerit. In varius ipsum lacus, sit amet sollicitudin nisi condimentum consectetur. Nulla auctor, metus ac suscipit feugiat, enim lectus consequat risus, id sollicitudin arcu felis at elit. Ut vel quam et nulla sagittis euismod. Curabitur commodo elementum consequat. Fusce scelerisque ut dolor ac aliquet. Nullam tincidunt ornare facilisis. Sed bibendum nisl vel lacinia dapibus. Sed eget massa vitae enim tincidunt eleifend.[COMMENT]
--------don't type anything after this comment--------
[/COMMENT][/border][/border][/border][/border][/font][border= /*credit*/ 0; box-sizing: border-box; padding: 9px 0 0 0; text-align: center; font-size: 7px;][url=https://www.rpnation.com/threads/the-dark-ages-mobile-friendly.471463/page-2#post-10489438]code[/url] by valen t.[/border][COMMENT]
---------------the four variable values (the ones starting with "--") are meant to be filled in with your own colours + links; i'd recommend "plain-background-colour" keeping a light colour---------------
[/COMMENT][border=0;
--accent-colour: #18BFC9;
--plain-background-colour: #F0F1F1;
--big-background-picture: url(https://64.media.tumblr.com/0343db626454fcb4fe2f6143cb5ac545/09b78395067bd903-af/s1280x1920/f65361b4e0251154474dabcf07964fc834bbd049.jpg) 100% 100%;
--ycs-picture: url(https://64.media.tumblr.com/934a0fb43791e8418237c55311b778f8/09b78395067bd903-bc/s1280x1920/d5642b1900ff45670de458bd6cd1d2f9f15875c0.jpg) 50% 50%;
box-sizing: border-box; padding: 0; max-width: 950px; min-height: 530px; position: relative; margin: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; overflow: hidden; color: black;][border= /*left*/ 0; box-sizing: border-box; padding: 0; width: 475px; height: 530px; position: relative; background: var(--plain-background-colour); display: flex; flex-direction: column; align-items: center; justify-content: center;][border= /*title*/ 0; box-sizing: border-box; padding: 0 2px 0 0; font-size: 30px; line-height: 28px; font-weight: bold; position: relative; z-index: 3;][COMMENT]
---------------add yc's title here---------------
[/COMMENT][font=Dancing Script]The [color=#18BFC9]Blue[/color] Prince[/font][/border][border=
/*ycs picture*/ 0; box-sizing: border-box; padding: 0; height: 200px; width: 200px; background: var(--ycs-picture); background-size: cover; position: relative; margin: -3.5px 0 12px 0; z-index: 2;][/border][border= /*quote*/ 0; box-sizing: border-box; padding: 0; height: auto; width: 200px; position: relative; margin-bottom: 12px; text-align: center; text-transform: uppercase; font-size: 12px; line-height: 16px; letter-spacing: 0.04em; font-weight: bold; color: var(--accent-colour);][COMMENT]
---------------add a short quote here---------------
[/COMMENT]in time, even the sharpest thorns can become soft[/border][border=
/*rp details container*/ 0; box-sizing: border-box; padding: 0; height: 66px; width: 200px; position: relative; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; overflow: auto; height: 100%; position: relative;][border= /*hidden scroll cont*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 200px; text-transform: uppercase; text-align: center; font-size: 11px; line-height: 15px;][COMMENT]
---------------add your rp details (e.g. mood, location, interactions, etc) here---------------
---------------ctrl c + v the "deet" tag to add more rp details---------------
[/COMMENT][border=/*deet*/ 0; box-sizing: border-box; padding: 0 9px 0 9px; display: inline-block; position: relative; border-radius: 10px; border-right: 2px solid var(--accent-colour); border-left: 2px solid var(--accent-colour);][b][color=#18BFC9]mood:[/color][/b] [color=transparent].[/color] whatever[/border]
[border= /*deet*/ 0; box-sizing: border-box; padding: 0 9px 0 9px; display: inline-block; position: relative; border-radius: 10px; border-right: 2px solid var(--accent-colour); border-left: 2px solid var(--accent-colour);][b][color=#18BFC9]location:[/color][/b] [color=transparent].[/color] wherever[/border]
[border= /*deet*/ 0; box-sizing: border-box; padding: 0 9px 0 9px; display: inline-block; position: relative; border-radius: 10px; border-right: 2px solid var(--accent-colour); border-left: 2px solid var(--accent-colour);][b][color=#18BFC9]outfit:[/color][/b] [color=transparent].[/color] whatever[/border]
[border= /*deet*/ 0; box-sizing: border-box; padding: 0 9px 0 9px; display: inline-block; position: relative; border-radius: 10px; border-right: 2px solid var(--accent-colour); border-left: 2px solid var(--accent-colour);][b][color=#18BFC9]mentions:[/color][/b] [color=transparent].[/color] whoever[/border]
[border= /*deet*/ 0; box-sizing: border-box; padding: 0 9px 0 9px; display: inline-block; position: relative; border-radius: 10px; border-right: 2px solid var(--accent-colour); border-left: 2px solid var(--accent-colour);][b][color=#18BFC9]interactions:[/color][/b] [color=transparent].[/color] whoever[/border]
[border= /*deet*/ 0; box-sizing: border-box; padding: 0 9px 0 9px; display: inline-block; position: relative; border-radius: 10px; border-right: 2px solid var(--accent-colour); border-left: 2px solid var(--accent-colour);][b][color=#18BFC9]tags:[/color][/b] [color=transparent].[/color] [USER=68743]@VALEN T.[/USER][/border][COMMENT]
---------------don't type anything after this comment---------------
[/COMMENT][/border][/border][/border][/border][border= /*right*/ 0; box-sizing: border-box; padding: 20px; width: 475px; height: 530px; position: relative; background: var(--big-background-picture); background-size: cover; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto; position: relative;][border= /*hidden scroll cont*/ 0; box-sizing: border-box; padding: 0; width: 50%; height: 490px; display: flex; align-items: center; justify-content: center; position: relative;][border= /*quotation mark border*/ 0; box-sizing: border-box; padding: 0; width: 121px; height: 121px; border-radius: 100%; position: absolute; border-right: 4px solid var(--accent-colour); border-top: 4px solid transparent; border-bottom: 4px solid transparent; animation: fa-spin 7s linear infinite;][/border][border= /*quotation mark*/ 0; box-sizing: border-box; padding: 0; width: 100px; height: 100px; border-radius: 100%; position: relative; background: url(https://i.imgur.com/MM2ehKT.png) 50% 50% var(--plain-background-colour) no-repeat; background-size: 50%;][/border][/border][border= /*ic post bg*/ 0; box-sizing: border-box; padding: 20px 0 20px 0; width: 50%; height: 490px; background: var(--plain-background-colour); overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border= /*hidden scroll cont*/ 0; box-sizing: border-box; padding: 0 20px 0 20px; width: 50%; font-size: 12px; line-height: 16px; text-align: justify;][COMMENT]
---------------add your ic post here---------------
[/COMMENT]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elit metus, semper id fringilla vitae, fermentum a urna. Cras pretium ipsum leo, in elementum lacus placerat sed. Nullam fermentum quam et elit blandit imperdiet. Duis volutpat rhoncus mauris at rhoncus. Maecenas vel varius lectus. Donec a placerat diam. Nam interdum pretium ornare. Sed a rhoncus felis. Curabitur sodales at ex at scelerisque. Donec posuere arcu non tempor vestibulum. Etiam rhoncus mi laoreet, pulvinar nulla non, porttitor dui. Donec elit metus, faucibus non magna sed, sollicitudin imperdiet lectus. Morbi vitae sem ex.
Cras et tempus nisl. Nullam blandit a felis non euismod. Fusce vel eros enim. Phasellus eleifend porttitor semper. Sed ac semper massa, vel faucibus tortor. Donec iaculis id magna eget dignissim. Quisque id quam eros. Donec aliquam, ligula nec consectetur dictum, purus nibh pretium tortor, in volutpat lorem neque non lacus. Aliquam laoreet egestas enim. Fusce aliquam convallis metus ut euismod. Quisque suscipit tempor felis sed lobortis. Praesent ac condimentum dolor. Pellentesque sollicitudin vehicula orci, sed accumsan sem ullamcorper vel. Fusce a sapien rhoncus, mattis urna eu, sagittis lacus. Ut ac faucibus felis, a dignissim augue. Sed maximus et odio at iaculis.
Praesent aliquam ipsum mi, sed varius velit finibus id. Cras malesuada tellus a risus posuere, at vehicula eros dictum. Vestibulum interdum urna ut condimentum tempor. Donec bibendum vehicula scelerisque. Suspendisse porta rhoncus auctor. Ut ut massa nisl. Ut condimentum lacus venenatis ante dapibus, id rhoncus nisl laoreet. Mauris egestas ante est, vitae lacinia nisi ullamcorper quis. Ut et dignissim sapien. Integer non hendrerit quam. Aliquam purus justo, bibendum sit amet risus eu, finibus lobortis nulla.[COMMENT]
---------------don't type anything after this---------------
[/COMMENT][/border][/border][/border][/border][/border][/border][border=0; box-sizing: border-box; padding: 9px 0 0 0; text-align: center; font-size: 7px;][url=https://www.rpnation.com/threads/the-dark-ages-mobile-friendly.471463/page-2#post-10498689]code[/url] by valen t.[/border][COMMENT]
------the 10 variable values (starting with a "--") are meant to be filled in with your own urls + colours; the "butterfly-colour" can be altered by changing the "0deg" value to anything else between 0 and 360, 0 = pink btw; i have the "text-and-border-colour" set to white right now bc my background is dark but feel free to change it !-------
[/COMMENT][border=/*container*/ 0;
--main-background: url(https://i.imgur.com/hkNWXrA.png) 100% 50%;
--accent-colour: #B47C89;
--butterfly-button: url(https://i.imgur.com/E2RMKAB.png) 50% 50% no-repeat;
--butterfly-colour: hue-rotate(0deg);
--basics-tab-pic: url(https://64.media.tumblr.com/aacdfd7cf8ffe2c7b42c2d42904090fb/tumblr_owrw72FYce1v10vito5_540.jpg) 50% 50%;
--visage-tab-pic: url(https://64.media.tumblr.com/047ba15014ac24279f8bf979f2a1ab6e/tumblr_p4hc7kVJIA1vkla08o9_1280.jpg) 0 0;
--persona-tab-pic: url(https://i.imgur.com/mPao4wY.jpg) 50% 50%;
--powers-tab-pic: url(https://64.media.tumblr.com/a210b73d59e49bd271b8569ba256bb2a/tumblr_par9qqxfBv1xxhd8mo1_640.jpg) 50% 50%;
--history-tab-pic: url(https://i.imgur.com/49PwLxV.jpg) 50% 50%;
--text-and-border-colour: white;
box-sizing: border-box; padding: 0; position: relative; margin: auto; max-width: 650px; height: 430px; overflow: hidden; display: flex; justify-content: flex-end; align-items: flex-end; color: var(--text-and-border-colour);][border= /*tabs container*/ 0; box-sizing: border-box; padding: 18px 0 0 0; width: 69.5px; z-index: 2; margin-bottom: 0px; height: 350px;][border= /*cover*/ 0; box-sizing: border-box; padding: 0; height: 34px; position: absolute; right: 0; bottom: 42px; width: 60px;][/border][border= /*cover*/ 0; box-sizing: border-box; padding: 0; height: 34px; position: absolute; right: 0; bottom: 100px; width: 60px;][/border][border= /*cover*/ 0; box-sizing: border-box; padding: 0; height: 34px; position: absolute; right: 0; bottom: 158px; width: 60px;][/border][border= /*cover*/ 0; box-sizing: border-box; padding: 0; height: 34px; position: absolute; right: 0; bottom: 216px; width: 60px;][/border][border= /*cover*/ 0; box-sizing: border-box; padding: 0; height: 34px; position: absolute; right: 0; bottom: 274px; width: 60px;][/border][tabs][tab=.][font=Times New Roman][border= /*BACKGROUND*/ 0; box-sizing: border-box; padding: 0; position: absolute; top: 0; left: 0; margin: auto; width: 100%; height: 100%; background: var(--main-background); background-size: cover; overflow: hidden; display: flex; justify-content: flex-end; pointer-events: none;][border= /*TAB 1*/ 0; box-sizing: border-box; padding: 0; position: relative; width: calc(100% - 90px); height: calc(100% - 40px); display: flex; flex-direction: column; align-items: center; justify-content: center; margin-right: 20px; margin-top: 20px; text-align: center; font-weight: bold; text-transform: uppercase; font-size: 10px; letter-spacing: 0.3em;][COMMENT]
----------------YC'S INTRO PAGE----------------
------e.g. name + god(dess)-------
[/COMMENT]goddess of spring[border=" /*YC'S NAME*/ 0; box-sizing: border-box; padding: 10px 0 10px 0; font-size: 30px; letter-spacing: 0.07em; font-style: oblique; text-shadow: -3px 0 var(--accent-colour);"]persephone[/border]queen of underworld[/border][border=
/*right*/ 0; box-sizing: border-box; padding: 0 0 18px 0; width: 50px; height: 100%; overflow: hidden; border-left: 1px solid var(--text-and-border-colour); position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%;][border= /*BUTTON 1*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 2*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 3*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 4*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 5*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 6*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative;][/border][/border][/border][/font][/tab] [tab=.]null[/tab][tab=.][font=Times New Roman][border= /*BACKGROUND*/ 0; box-sizing: border-box; padding: 0; position: absolute; top: 0; left: 0; margin: auto; width: 100%; height: 100%; background: var(--main-background); background-size: cover; overflow: hidden; display: flex; justify-content: flex-end; pointer-events: none;][border= /*TAB 2*/ 0; box-sizing: border-box; padding: 0; position: absolute; width: calc(100% - 90px); height: 390px; top: 20px; left: 20px; display: flex; flex-direction: column; overflow: hidden; pointer-events: auto;][border= /*PIC*/ 1px solid var(--text-and-border-colour); box-sizing: border-box; padding: 0; height: 150px; width: 170px; background: var(--basics-tab-pic); background-size: cover; position: absolute; top: 0; left: 0; z-index: 2;][/border][border= /*QUOTE*/ 0; box-sizing: border-box; padding: 0 20px 0 0; position: relative; width: calc(100% - 20px); height: 100px; display: flex; align-items: flex-end; text-transform: uppercase; font-size: 24px; font-style: oblique; font-weight: bold; text-align: right; justify-content: flex-end; line-height: 24px; z-index: 4; align-self: flex-end; text-shadow: -3px 0 var(--accent-colour);][COMMENT]
----------------SHORT QUOTE/LYRIC ON THE BASICS TAB----------------
[/COMMENT]don't be so shy[/border][border=
/*text container*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 100%; height: 302px; z-index: 3; margin-top: -12px; display: flex; overflow: hidden;][border=
/*TAB TITLE*/ 0; box-sizing: border-box; padding: 20px 0 0 20px; line-height: 20px; font-size: 20px; position: relative; writing-mode: vertical-rl; transform: scale(1, -1) rotateY(180deg); height: 100%; background: transparent; text-transform: uppercase; margin-left: -3px;]basics[/border][border=/*text box*/ 1px solid var(--text-and-border-colour); box-sizing: border-box; padding: 20px 0 10px 0; position: relative; height: 100%; flex: 1; background: rgba(0, 0, 0, 0.4); text-align: justify; margin-left: -2px; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 200%; height: 100%; overflow: auto;][border= /*more hidden scroll*/ 0; box-sizing: border-box; padding: 50px 10px 0 10px; position: relative; width: 50%; font-size: 14px; line-height: 18px;][COMMENT]
----------------START TYPING IN YOUR CS' "BASICS" DETAILS AFTER THIS----------------
------copy the "info" tag (with the "underline" + "heading" ones) to add more details------
[/COMMENT][border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]name[/border][/border]Colours ill bethink ere in bawd
[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]alias[/border][/border]It quoth that king ope hence that, matter like with daughter wilt brow, thus grace
[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]age[/border][/border]The commend the purpose warrant o' it, head e'en to Corse apace fellow, yet lief
[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]gender[/border][/border]O! it o' lief base heavy fool oft leave
[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]pronouns[/border][/border]Peace upon hold base with fool
[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]romantic orientation[/border][/border]Avaunt! that to false sad e'en knave wilt leave
[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]p.o.b.[/border][/border]And it become dead, thy chide fain quoth
[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]race[/border][/border]Her nature perchance thy content counterfeit the fortune discover nature
[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]nationality[/border][/border]Sir therefore fright nay for morn
[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]occupation[/border][/border]O! it hence heavy envious too queen perforce befall
[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]religion[/border][/border]O! a to forth nay heavy wench anon stand
[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]disorders[/border][/border]Faith wilt best very of sword[COMMENT]
----------------DON'T TYPE ANY CS DETAILS AFTER THIS COMMENT----------------
[/COMMENT][/border][/border][/border][/border][/border][border= /*right*/ 0; box-sizing: border-box; padding: 0 0 18px 0; width: 50px; height: 100%; overflow: hidden; border-left: 1px solid var(--text-and-border-colour); position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%;][border= /*BUTTON 1*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 2*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 3*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 4*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 5*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 6*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative;][/border][/border][/border][/font][/tab][tab=.]null[/tab][tab=.][font=Times New Roman][border= /*BACKGROUND*/ 0; box-sizing: border-box; padding: 0; position: absolute; top: 0; left: 0; margin: auto; width: 100%; height: 100%; background: var(--main-background); background-size: cover; overflow: hidden; display: flex; justify-content: flex-end; pointer-events: none;][border= /*TAB 3*/ 0; box-sizing: border-box; padding: 0; position: absolute; width: calc(100% - 90px); height: 390px; top: 20px; left: 20px; display: flex; flex-direction: column; overflow: hidden; pointer-events: auto;][border= /*PIC*/ 1px solid var(--text-and-border-colour); box-sizing: border-box; padding: 0; height: 150px; width: 170px; background: var(--visage-tab-pic); background-size: cover; position: absolute; top: 0; left: 0; z-index: 2;][/border][border= /*QUOTE*/ 0; box-sizing: border-box; padding: 0 20px 0 0; position: relative; width: calc(100% - 20px); height: 100px; display: flex; align-items: flex-end; text-transform: uppercase; font-size: 24px; font-style: oblique; font-weight: bold; text-align: right; justify-content: flex-end; line-height: 24px; z-index: 4; align-self: flex-end; text-shadow: -3px 0 var(--accent-colour);][COMMENT]
----------------SHORT QUOTE/LYRIC ON THE "VISAGE" TAB----------------
[/COMMENT]there's a pleasure[/border][border=
/*text container*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 100%; height: 302px; z-index: 3; margin-top: -12px; display: flex; overflow: hidden;][border=
/*TAB TITLE*/ 0; box-sizing: border-box; padding: 20px 0 0 20px; line-height: 20px; font-size: 20px; position: relative; writing-mode: vertical-rl; transform: scale(1, -1) rotateY(180deg); height: 100%; background: transparent; text-transform: uppercase; margin-left: -3px;]visage[/border][border= /*text box*/ 1px solid var(--text-and-border-colour); box-sizing: border-box; padding: 20px 0 10px 0; position: relative; height: 100%; flex: 1; background: rgba(0, 0, 0, 0.4); text-align: justify; margin-left: -2px; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 200%; height: 100%; overflow: auto;][border= /*more hidden scroll*/ 0; box-sizing: border-box; padding: 50px 10px 0 10px; position: relative; width: 50%; font-size: 14px; line-height: 18px;][COMMENT]
----------------START TYPING IN YOUR CS' "VISAGE" DETAILS AFTER THIS----------------
[/COMMENT][border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]face claim[/border][/border]He wit why thy arrant wont that purpose art thee
[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]Eyes[/border][/border]A did the visage art for the, morn very to visage why hand, fain indeed
[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]height[/border][/border]A sup the colours is with that, honour undone hence office ill intent, something like
[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]build[/border][/border]Wench peradventure prate false to master
[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]body mods.[/border][/border]That sup that fortune art o' that, suit meet of blood thus hand, would ill
[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]birthmark[/border][/border]Peradventure a be ill, I rather tis live
[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]scars[/border][/border]Apparel thus methink brave into honour[COMMENT]
----------------DON'T TYPE ANY CS DETAILS AFTER THIS COMMENT----------------
[/COMMENT][/border][/border][/border][/border][/border][border= /*right*/ 0; box-sizing: border-box; padding: 0 0 18px 0; width: 50px; height: 100%; overflow: hidden; border-left: 1px solid var(--text-and-border-colour); position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%;][border= /*BUTTON 1*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 2*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 3*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 4*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 5*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 6*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative;][/border][/border][/border][/font][/tab][tab=.]null[/tab][tab=.][font=Times New Roman][border= /*BACKGROUND*/ 0; box-sizing: border-box; padding: 0; position: absolute; top: 0; left: 0; margin: auto; width: 100%; height: 100%; background: var(--main-background); background-size: cover; overflow: hidden; display: flex; justify-content: flex-end; pointer-events: none;][border= /*TAB 4*/ 0; box-sizing: border-box; padding: 0; position: absolute; width: calc(100% - 90px); height: 390px; top: 20px; left: 20px; display: flex; flex-direction: column; overflow: hidden; pointer-events: auto;][border= /*PIC*/ 1px solid var(--text-and-border-colour); box-sizing: border-box; padding: 0; height: 150px; width: 170px; background: var(--persona-tab-pic); background-size: cover; position: absolute; top: 0; left: 0; z-index: 2;][/border][border= /*QUOTE*/ 0; box-sizing: border-box; padding: 0 20px 0 0; position: relative; width: calc(100% - 20px); height: 100px; display: flex; align-items: flex-end; text-transform: uppercase; font-size: 24px; font-style: oblique; font-weight: bold; text-align: right; justify-content: flex-end; line-height: 24px; z-index: 4; align-self: flex-end; text-shadow: -3px 0 var(--accent-colour);][COMMENT]
----------------SHORT QUOTE/LYRIC ON THE PERSONA TAB----------------
[/COMMENT]in hiding from the sun[/border][border=
/*text container*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 100%; height: 302px; z-index: 3; margin-top: -12px; display: flex; overflow: hidden;][border=
/*TAB TITLE*/ 0; box-sizing: border-box; padding: 20px 0 0 20px; line-height: 20px; font-size: 20px; position: relative; writing-mode: vertical-rl; transform: scale(1, -1) rotateY(180deg); height: 100%; background: transparent; text-transform: uppercase; margin-left: -3px;]persona[/border][border= /*text box*/ 1px solid var(--text-and-border-colour); box-sizing: border-box; padding: 20px 0 10px 0; position: relative; height: 100%; flex: 1; background: rgba(0, 0, 0, 0.4); text-align: justify; margin-left: -2px; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 200%; height: 100%; overflow: auto;][border= /*more hidden scroll*/ 0; box-sizing: border-box; padding: 50px 10px 0 10px; position: relative; width: 50%; font-size: 14px; line-height: 18px;][COMMENT]
----------------START TYPING IN YOUR CS' "PERSONA" DETAILS AFTER THIS----------------
[/COMMENT][border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]personality[/border][/border]That attend that gods befall in it, livery arrant for visage perforce visage, fain gentle. That bethink that world best into it, fellow false with faith forsooth day, upon mine. Thine head straight him several stand that colours chide duke. He fortune thus I mine prate it place let field. His Corse thus whose envious may it office might head. Yet that scape afeard, thou art and leave
[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]recast[/border][/border]Thine colours tis thou undone dost a remembrance hold father. A is the gage chide with it, office arrant for Caesar belike gage, nor nay. It bethink it noble leave of a, peace envious to father fain fortune, perchance mere. Sir yet best present o' livery. His Corse thus whose envious may it office might head. Yet that scape afeard, thou art and leave
[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]headcanons[/border][/border]France still forswear several to humour. Me pate yet me content dost it knave be peace. O! it for several several mine purpose presently lie. Nature oft commend ere o' duke. His Corse thus whose envious may it office might head. Yet that scape afeard, thou art and leave
[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]consonance[/border][/border]Thine lady nor thy brave speak that suit speak matter. Thus that attend indeed, I want straight mark. Nor that pray like, I fare straight doth. Perchance the commend envious, whom dost presently befall. His Corse thus whose envious may it office might head. Yet that scape afeard, thou art and leave[COMMENT]
----------------DON'T TYPE ANY CS DETAILS AFTER THIS COMMENT----------------
[/COMMENT][/border][/border][/border][/border][/border][border= /*right*/ 0; box-sizing: border-box; padding: 0 0 18px 0; width: 50px; height: 100%; overflow: hidden; border-left: 1px solid var(--text-and-border-colour); position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%;][border= /*BUTTON 1*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 2*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 3*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 4*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 5*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 6*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative;][/border][/border][/border][/font][/tab][tab=.]null[/tab][tab=.][font=Times New Roman][border= /*BACKGROUND*/ 0; box-sizing: border-box; padding: 0; position: absolute; top: 0; left: 0; margin: auto; width: 100%; height: 100%; background: var(--main-background); background-size: cover; overflow: hidden; display: flex; justify-content: flex-end; pointer-events: none;][border=
/*TAB 5*/ 0; box-sizing: border-box; padding: 0; position: absolute; width: calc(100% - 90px); height: 390px; top: 20px; left: 20px; display: flex; flex-direction: column; overflow: hidden; pointer-events: auto;][border= /*PIC*/ 1px solid var(--text-and-border-colour); box-sizing: border-box; padding: 0; height: 150px; width: 170px; background: var(--powers-tab-pic); background-size: cover; position: absolute; top: 0; left: 0; z-index: 2;][/border][border= /*QUOTE*/ 0; box-sizing: border-box; padding: 0 20px 0 0; position: relative; width: calc(100% - 20px); height: 100px; display: flex; align-items: flex-end; text-transform: uppercase; font-size: 24px; font-style: oblique; font-weight: bold; text-align: right; justify-content: flex-end; line-height: 24px; z-index: 4; align-self: flex-end; text-shadow: -3px 0 var(--accent-colour);][COMMENT]
----------------SHORT QUOTE/LYRIC ON THE POWERS TAB----------------
[/COMMENT]i was never one[/border][border=
/*text container*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 100%; height: 302px; z-index: 3; margin-top: -12px; display: flex; overflow: hidden;][border=
/*TAB TITLE*/ 0; box-sizing: border-box; padding: 20px 0 0 20px; line-height: 20px; font-size: 20px; position: relative; writing-mode: vertical-rl; transform: scale(1, -1) rotateY(180deg); height: 100%; background: transparent; text-transform: uppercase; margin-left: -3px;]powers[/border][border= /*text box*/ 1px solid var(--text-and-border-colour); box-sizing: border-box; padding: 20px 0 10px 0; position: relative; height: 100%; flex: 1; background: rgba(0, 0, 0, 0.4); text-align: justify; margin-left: -2px; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 200%; height: 100%; overflow: auto;][border= /*more hidden scroll*/ 0; box-sizing: border-box; padding: 50px 10px 0 10px; position: relative; width: 50%; font-size: 14px; line-height: 18px;][COMMENT]
----------------START TYPING IN YOUR CS' "POWERS" DETAILS AFTER THIS----------------
[/COMMENT][border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]teleac[/border][/border]Colours ill bethink ere in bawd
[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]endower[/border][/border]It quoth that king ope hence that, matter like with daughter wilt brow, thus grace
[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]primary power[/border][/border]Morn unto may ere for prince. The wot that thee warrant hence that, office mere to physic tis noble, upon indeed. A pray the daughter back of a, lord present of thee aye morrow, straight nay. Peradventure a be ill, I rather tis live. It might the colours be in the, sir gentle into Caesar till office, fain sad
[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]limitations[/border][/border]Vaunt! the hence envious arrant brave brow presently be. Whom lord would my sad scape that issue ope lady. Marvellous a quoth lief, he did still mark. Apparel thus methink brave into honour. Fool something pray very to thee
[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]secondary powers[/border][/border]Not it prate mere, you back ill owe. Matter something pray present hence hand. Lady forsooth prate meet o' apparel. A ope that humour stand into the, head grace with bawd not livery, something too. That attend that gods befall in it, livery arrant for visage perforce visage, fain gentle
[border= /*info*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*heading*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px;]atrophy[/border][/border]It speak the hand prate hence a, fellow mere of habit unto lady, belike undone. Field thus discover meet hence bawd. Glass not lie very for remembrance. O! the into grace dead too words merely prate. Faith apace rather gentle o' apparel[COMMENT]
----------------DON'T TYPE ANY CS DETAILS AFTER THIS COMMENT----------------
[/COMMENT][/border][/border][/border][/border][/border][border= /*right*/ 0; box-sizing: border-box; padding: 0 0 18px 0; width: 50px; height: 100%; overflow: hidden; border-left: 1px solid var(--text-and-border-colour); position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%;][border= /*BUTTON 1*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 2*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 3*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 4*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 5*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 6*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative;][/border][/border][/border][/font][/tab][tab=.]null[/tab][tab=.][font=Times New Roman][border= /*BACKGROUND*/ 0; box-sizing: border-box; padding: 0; position: absolute; top: 0; left: 0; margin: auto; width: 100%; height: 100%; background: var(--main-background); background-size: cover; overflow: hidden; display: flex; justify-content: flex-end; pointer-events: none;][border=
/*TAB 6*/ 0; box-sizing: border-box; padding: 0; position: absolute; width: calc(100% - 90px); height: 390px; top: 20px; left: 20px; display: flex; flex-direction: column; overflow: hidden; pointer-events: auto;][border= /*PIC*/ 1px solid var(--text-and-border-colour); box-sizing: border-box; padding: 0; height: 150px; width: 170px; background: var(--history-tab-pic); background-size: cover; position: absolute; top: 0; left: 0; z-index: 2;][/border][border= /*QUOTE*/ 0; box-sizing: border-box; padding: 0 20px 0 0; position: relative; width: calc(100% - 20px); height: 100px; display: flex; align-items: flex-end; text-transform: uppercase; font-size: 24px; font-style: oblique; font-weight: bold; text-align: right; justify-content: flex-end; line-height: 24px; z-index: 4; align-self: flex-end; text-shadow: -3px 0 var(--accent-colour);][COMMENT]
----------------SHORT QUOTE/LYRIC ON THE "HISTORY" TAB----------------
[/COMMENT]for pretty weather[/border][border=
/*text container*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 100%; height: 302px; z-index: 3; margin-top: -12px; display: flex; overflow: hidden;][border=
/*TAB TITLE*/ 0; box-sizing: border-box; padding: 20px 0 0 20px; line-height: 20px; font-size: 20px; position: relative; writing-mode: vertical-rl; transform: scale(1, -1) rotateY(180deg); height: 100%; background: transparent; text-transform: uppercase; margin-left: -3px;]interview[/border][border= /*text box*/ 1px solid var(--text-and-border-colour); box-sizing: border-box; padding: 20px 0 10px 0; position: relative; height: 100%; flex: 1; background: rgba(0, 0, 0, 0.4); text-align: justify; margin-left: -2px; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 200%; height: 100%; overflow: auto;][border= /*more hidden scroll*/ 0; box-sizing: border-box; padding: 50px 10px 0 10px; position: relative; width: 50%; font-size: 14px; line-height: 18px;][COMMENT]
----------------START TYPING IN YOUR CS' "HISTORY" DETAILS AFTER THIS----------------
--------copy the "question" tag (along with the "tag" + "underline" + "letter q" ones) to add more questions; you can also scrap this entire section for a "history" one by replacing the mentioned tags with the old "info" (with the "underline" + "heading") tags we've been using so far--------
[/COMMENT][border= /*question*/ 0; box-sizing: border-box; padding: 0; display: flex; position: relative; align-items: flex-start;][border= /*tag*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*letter q*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px; margin-top: -1px;]Q.[/border][/border]The commend the purpose warrant o' it, head e'en to Corse apace fellow, yet lief?[/border]
[I]"My fool yet my brave doth it Caesar scape suit. That want a knave hast of it, pate sad o' France and sword, upon afeard. Colours ill bethink ere in bawd. It quoth that king ope hence that, matter like with daughter wilt brow, thus grace. The commend the purpose warrant o' it, head e'en to Corse apace fellow, yet lief"[/I]
[border= /*question*/ 0; box-sizing: border-box; padding: 0; display: flex; position: relative; align-items: flex-start;][border= /*tag*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*letter q*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px; margin-top: -1px;]Q.[/border][/border]O! it o' lief base heavy fool oft leave?[/border]
[I]"O! it o' lief base heavy fool oft leave. Peace upon hold base with fool. Avaunt! that to false sad e'en knave wilt leave. And it become dead, thy chide fain quoth. Her nature perchance thy content counterfeit the fortune discover nature"[/I]
[border= /*question*/ 0; box-sizing: border-box; padding: 0; display: flex; position: relative; align-items: flex-start;][border= /*tag*/ 0; box-sizing: border-box; padding: 0 3px 0 10px; margin-right: 10px; position: relative; display: inline-block;][border= /*underline*/ 0; box-sizing: border-box; padding: 0; width: 100%; background: var(--accent-colour); height: 8px; position: absolute; left: 0; bottom: 0; z-index: 2;][/border][border= /*letter q*/ 0; box-sizing: border-box; padding: 0; position: relative; z-index: 3; text-transform: uppercase; font-size: 17px; margin-top: -1px;]Q.[/border][/border]Peace upon hold base with fool?[/border]
[I]"Sir therefore fright nay for morn. O! it hence heavy envious too queen perforce befall. O! a to forth nay heavy wench anon stand. Faith wilt best very of sword. He wit why thy arrant wont that purpose art thee"[/I][COMMENT]
----------------DON'T TYPE ANY CS DETAILS AFTER THIS COMMENT----------------
[/COMMENT][/border][/border][/border][/border][/border][border= /*right*/ 0; box-sizing: border-box; padding: 0 0 18px 0; width: 50px; height: 100%; overflow: hidden; border-left: 1px solid var(--text-and-border-colour); position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%;][border= /*BUTTON 1*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 2*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 3*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 4*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 5*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative; margin-bottom: 34px;][/border][border= /*BUTTON 6*/ 0; box-sizing: border-box; padding: 0; height: 24px; width: 24px; background: var(--butterfly-button); filter: var(--butterfly-colour); background-size: contain; position: relative;][/border][/border][/border][/font][/tab][/tabs][/border][border= /*GLITTER*/ 0; box-sizing: border-box; padding: 0; height: 100%; width: 100%; position: absolute; background: url(https://i.gifer.com/origin/d2/d2faff75e02534a3c687da2b7c4a95ab_w200.gif) 0 0 repeat; background-size: 14%; top: 0; left: 0; overflow: hidden; z-index: 3; pointer-events: none;][/border][/border][border= /*credit*/ 0; box-sizing: border-box; padding: 9px 0 0 0; text-align: center; font-size: 7px;][url=https://www.rpnation.com/threads/the-dark-ages-mobile-friendly.471463/page-2#post-10502547]code[/url] by valen t.[/border][COMMENT]
----------------the 5 variable tags (the ones starting with "--") are meant to be filled in with your own links + colours + % values; i'd recommend keeping the "background-colour" a light colour; the "ycs-picture" you use HAS to be a square; the % value for "health-bar-length" can be anywhere from 0% to 100%----------------
[/COMMENT][border=0;
--background-image: url(https://i.pinimg.com/564x/be/79/97/be799789498fe5188a291560a7c78db9.jpg) 50% 30%;
--background-colour: #F0F1F1;
--ycs-picture: url(https://i.pinimg.com/564x/16/07/07/160707e7f7b96c4fd6e1e22aa1429f14.jpg);
--health-bar-length: 70%;
--health-bar-colour: #CAAE83;
box-sizing: border-box; padding: 0; width: 100%; position: relative; height: auto; color: black;][border= /*background image*/ 0; box-sizing: border-box; padding: 0; position: relative; margin: auto; max-width: 430px; height: 180px; background: var(--background-image); background-size: cover;][border= /*hidden scroll container*/ 0; box-sizing: border-box; padding: 0; position: relative; width: 150px; height: 100%; overflow: hidden; margin: auto;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border= /*hidden scroll cont*/ 0; box-sizing: border-box; padding: 105px 0 0 0; width: 150px;][border= /*ycs pic top half*/ 5px solid var(--background-colour); box-sizing: border-box; padding: 0; width: 150px; height: 80px; position: relative; margin: auto; background: var(--ycs-picture); background-position: 50% 0; background-size: cover; border-top-left-radius: 75px; border-top-right-radius: 75px; z-index: 2;][/border][border= /*rp details container*/ 0; box-sizing: border-box; padding: 5px 0 5px 0; width: 150px; height: 80px; background: var(--health-bar-colour); position: relative; z-index: 3; margin-top: -5px; border-right: 5px solid var(--background-colour); border-left: 5px solid var(--background-colour); overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border= /*hidden scroll cont*/ 0; box-sizing: border-box; padding: 0 5px 0 5px; width: 140px; font-size: 10px; line-height: 14px; color: white; letter-spacing: 0.02em;][COMMENT]
----------------add your rp details here----------------
[/COMMENT][b]LOCATION:[/b] Lorem ipsum dolor sit amet, consectetur adipiscing elit
[b]INTERACTIONS:[/b]
[USER=68743]@VALEN T.[/USER][COMMENT]
----------------don't type anything after this----------------
[/COMMENT][/border][/border][/border][/border][/border][/border][/border][border= /*container*/ 0; box-sizing: border-box; padding: 0 20px 20px 20px; position: relative; margin: auto; max-width: 430px; height: auto; background: var(--background-colour); background-size: cover; overflow: hidden;][border= /*ycs pic bottom half*/ 5px solid var(--background-colour); box-sizing: border-box; padding: 0; width: 150px; height: 80px; position: relative; margin: auto; background: var(--ycs-picture); background-position: 50% 100%; background-size: cover; border-bottom-left-radius: 75px; border-bottom-right-radius: 75px; z-index: 2; margin-top: -5px;][/border][border= /*name*/ 0; box-sizing: border-box; padding: 0; position: relative; margin: 15px 20px 20px 20px; text-transform: uppercase; font-weight: bold; font-size: 28px; text-align: center; line-height: 22px;][COMMENT]
----------------add yc's name here----------------
[/COMMENT][font=Roboto]helen of troy[/font][/border][border=
/*bar border*/ 2px solid black; box-sizing: border-box; padding: 0; width: calc(100% - 80px); height: 12px; position: relative; border-radius: 100px; margin: 0 40px 0 40px; overflow: hidden; display: flex; align-items: center;][border= /*bar bg*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; width: var(--health-bar-length); position: relative; text-align: center; font-weight: bold; line-height: 8px; font-size: 8px; text-transform: uppercase; letter-spacing: 0.5em; background: var(--health-bar-colour); margin-top: -1px;]health[/border][/border][border=
/*text container*/ 0; box-sizing: border-box; padding: 0; width: 200%; height: 230px; overflow: auto; position: relative; margin: 20px 0 10px 10px;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0 20px 0 0; width: 50%; text-align: justify; font-size: 12px; line-height: 16px;][COMMENT]
----------------start ic post from here----------------
[/COMMENT]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere nisl tortor. Donec aliquam vestibulum ex. Vivamus quis aliquet est. Aliquam erat volutpat. Quisque malesuada nunc vel convallis vestibulum. Donec cursus justo eu aliquet venenatis. Integer consequat, est sit amet dignissim tristique, tortor ipsum pretium lorem, non ornare justo nisi id mauris. Vestibulum ut dapibus leo. Aliquam tempor et orci a posuere. Morbi vel pretium turpis. Curabitur egestas ipsum non augue maximus congue.
Morbi elit mauris, fringilla at aliquam et, semper ut turpis. In sit amet vehicula nisl. Maecenas magna turpis, luctus non malesuada ut, tristique eu turpis. Nulla malesuada et sem vitae euismod. Duis pharetra odio a tortor posuere laoreet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse consectetur lorem quis mauris dignissim, quis tristique nisi mollis. Vivamus efficitur lorem ut massa gravida consectetur. Quisque mattis maximus luctus. Proin fermentum ligula bibendum velit volutpat, sed dapibus mi iaculis. In dictum varius ullamcorper. Sed tristique sit amet dui ac faucibus.
Proin ut nisi sed felis dictum tincidunt id consectetur sem. Sed sit amet mi euismod, dignissim nibh id, faucibus ex. Quisque sit amet condimentum sapien. Sed nisl sapien, cursus et odio id, tristique scelerisque lacus. Nullam in dapibus sapien. Sed odio erat, faucibus et accumsan ut, varius in sem. Cras vitae nibh id elit vestibulum congue vitae eu diam. Donec volutpat odio eget dolor semper, lacinia vehicula lectus ullamcorper. Proin sodales velit lorem, ac consectetur diam suscipit sit amet. Maecenas pharetra blandit lectus, quis interdum odio consequat id. Praesent maximus mattis justo ut imperdiet. Ut finibus posuere euismod. Fusce et felis eu lectus pretium vestibulum. Cras luctus augue non diam dignissim sollicitudin. Donec tristique diam metus. Nullam egestas quis leo nec laoreet.[COMMENT]
----------------don't type anything after this----------------
[/COMMENT][/border][/border][/border][/border][border= /*credit*/ 0; box-sizing: border-box; padding: 9px 0 0 0; font-size: 7px; text-align: center;][url=https://www.rpnation.com/threads/the-dark-ages-mobile-friendly.471463/page-2#post-10504832]code[/url] by valen t.[/border]