[comment][font=Work Sans][font=Roboto][font=Archivo Black]fonts[/font][/font][/font][/comment][border=none; padding: 0px;

--accent: #4a7d77;
--bg: #000;
--color: #fff;
--dark-1: #121212;
--dark-2: #1e1e1e;
--bg-2: #fff;
--credit: #555;

--name: Archivo Black;
--body: Roboto;
--heading: Work Sans;


--img1: url(https://i.imgur.com/qvvKPhR.jpg);
--img2: url(https://i.imgur.com/vb71Na4.jpg);
--img3: url(https://i.imgur.com/wNUR5Y4.jpg);
--img4: url(https://i.imgur.com/mIO7Cq5.jpg);
--img5: url(https://i.imgur.com/3RO1IKg.jpg);
--img6: url(https://i.imgur.com/FY4QMDo.jpg);


--rimg1: url(https://www.unfe.org/wp-content/uploads/2019/04/SM-placeholder-1024x512.png);
--rimg2: url(https://www.unfe.org/wp-content/uploads/2019/04/SM-placeholder-1024x512.png);
--rimg3: url(https://www.unfe.org/wp-content/uploads/2019/04/SM-placeholder-1024x512.png);


background: var(--bg); font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-size: 12px; font-family: var(--body); color: var(--color); max-width: 800px; margin: auto; padding: 10px; box-sizing: border-box;][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; position: relative; width: 100%;][comment]


-------left filler-------[/comment][border=none; padding: 0px; margin: 10px; background: var(--bg-2); height: 400px; width: 370px; flex-grow: 1; overflow: hidden;][border=none; padding: 0px; width: 30px; height: 100%; background: grey; overflow: hidden; line-height: 370%; display: flex; justify-content: center; padding-top: 215px;][tabs][comment]






------tab one-----[/comment][tab=.][border=none; padding: 0px; position: absolute; bottom: 0; left:0; right: 0; top: 0; letter-spacing: 0; pointer-events: none; background: var(--bg); line-height: 20px; opacity: 1;][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap;][comment]


---------tab buttons // remember to change them on each tab so they match!------[/comment][border=none; padding: 0px; margin: 10px; background: var(--bg); height: 400px; width: 270px; flex-grow: 1; display: flex; flex-direction: row;][border=none; padding: 0px; height: 100%; display: flex; flex-direction: column-reverse; margin-right: -50px;][comment]
----------fourth tab--------[/comment][border=none; padding: 0px; height: 30px; width: 30px; border: 1px solid var(--accent); text-align: center; font-family: var(--heading); text-transform: uppercase; display: flex; flex-direction: column; justify-content: space-evenly; margin-top: 20px; font-weight: bold; box-sizing: border-box;]04[/border][comment]
----------third tab----------[/comment][border=none; padding: 0px; height: 30px; width: 30px; border: 1px solid var(--accent); text-align: center; font-family: var(--heading); text-transform: uppercase; display: flex; flex-direction: column; justify-content: space-evenly; margin-top: 20px; font-weight: bold; box-sizing: border-box;]03[/border][comment]
-----------second tab--------[/comment][border=none; padding: 0px; height: 30px; width: 30px; border: 1px solid var(--accent); text-align: center; font-family: var(--heading); text-transform: uppercase; display: flex; flex-direction: column; justify-content: space-evenly; margin-top: 20px; font-weight: bold; box-sizing: border-box;]02[/border][comment]
----------selected tab--------[/comment][border=none; padding: 0px; height: 30px; width: 100px; background: var(--accent); text-align: center; font-family: var(--heading); text-transform: uppercase; display: flex; flex-direction: column; justify-content: space-evenly; margin-top: 20px; position: relative; z-index: 2; font-weight: bold; letter-spacing: 1px; box-sizing: border-box;]general[/border][comment]


-------name // please try not to make this more than 5 or 6 characters! and also remember to change it in each tab c: you can have different names in each tab too if you'd like!------[/comment][border=none; padding: 0px; height: 200px; width: 30px; text-align: right; text-transform: uppercase; display: flex; flex-direction: column; justify-content: space-evenly; position: relative; z-index: 2; writing-mode: vertical-lr; transform: rotate(-180deg); font-family: var(--name); -webkit-text-stroke: 1.5px var(--bg-2); color: transparent; letter-spacing: 3px; font-size: 39px; box-sizing: border-box;]sehun[/border][/border][comment]


------image one----[/comment][border=none; padding: 0px; width: 100%; background: var(--img1); background-size: cover; background-position: 50% 0%;][/border][/border][comment]


---------basic details------[/comment][border=none; padding: 0px; height: 420px; width: 490px; flex-grow: 1; pointer-events: auto;][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 210px; overflow: hidden;][border=none; padding: 0px; height: 100%; width: 200%; overflow-y: auto;][border=none; padding: 0px; height: auto; width: 50%; box-sizing: border-box; text-align: justify;][comment]


--------full name------[/comment][border=none; padding: 0px; display: flex; flex-direction: row; justify-content: space-evenly; flex-wrap: wrap;][border=none; padding: 0px; margin: 10px; height: 50px; background: var(--dark-1); width: 225px; flex-grow: 1; box-sizing: border-box; padding: 5px 10px;][border=none; padding: 0px; font-family: var(--heading); font-size: 14px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; color: var(--accent);]full name[/border]full name comes here[/border][comment]


-----age------[/comment][border=none; padding: 0px; margin: 10px; height: 50px; background: var(--dark-1); width: 225px; flex-grow: 1; box-sizing: border-box; padding: 5px 10px;][border=none; padding: 0px; font-family: var(--heading); font-size: 14px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; color: var(--accent);]age[/border]age comes here[/border][/border][comment]


--------gender------[/comment][border=none; padding: 0px; display: flex; flex-direction: row; justify-content: space-evenly; flex-wrap: wrap;][border=none; padding: 0px; margin: 10px; height: 50px; background: var(--dark-1); width: 225px; flex-grow: 1; box-sizing: border-box; padding: 5px 10px;][border=none; padding: 0px; font-family: var(--heading); font-size: 14px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; color: var(--accent);]gender[/border]gender comes here[/border][comment]


-----sexuality------[/comment][border=none; padding: 0px; margin: 10px; height: 50px; background: var(--dark-1); width: 225px; flex-grow: 1; box-sizing: border-box; padding: 5px 10px;][border=none; padding: 0px; font-family: var(--heading); font-size: 14px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; color: var(--accent);]sexuality[/border]sexuality comes here[/border][/border][comment]


--------d.o.b------[/comment][border=none; padding: 0px; display: flex; flex-direction: row; justify-content: space-evenly; flex-wrap: wrap;][border=none; padding: 0px; margin: 10px; height: 50px; background: var(--dark-1); width: 225px; flex-grow: 1; box-sizing: border-box; padding: 5px 10px;][border=none; padding: 0px; font-family: var(--heading); font-size: 14px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; color: var(--accent);]date of birth[/border]date of birth comes here[/border][comment]


-----p.o.b------[/comment][border=none; padding: 0px; margin: 10px; height: 50px; background: var(--dark-1); width: 225px; flex-grow: 1; box-sizing: border-box; padding: 5px 10px;][border=none; padding: 0px; font-family: var(--heading); font-size: 14px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; color: var(--accent);]place of birth[/border]place of birth comes here[/border][/border][comment]


-------end of basic details-----[/comment][/border][/border][/border][comment]


------role & misc info-----[/comment][border=none; padding: 0px; margin: 10px; height: 190px; display: flex; flex-direction: row;][border=none; padding: 0px; width: 100%; margin-right: 20px;][border=none; padding: 0px; font-family: var(--heading); font-size: 14px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; border: 1px solid var(--accent); box-sizing: border-box; height: 50px; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; padding: 0px 5px;]oenun dokkaebi — 외눈도깨비[/border][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 120px; margin-top: 20px; overflow: hidden;][border=none; padding: 0px; height: 100%; width: 200%; overflow-y: auto;][border=none; padding: 0px; height: auto; width: 50%; box-sizing: border-box; text-align: justify;][comment]


---------misc info begins here-------[/comment][border=none; padding: 0px; display: inline; color: var(--accent); font-weight: bold; text-transform: uppercase; font-family: var(--heading);]ethnicity.[/border] Lorem ipsum dolor sit amet.


[border=none; padding: 0px; display: inline; color: var(--accent); font-weight: bold; text-transform: uppercase; font-family: var(--heading);]occupation.[/border] Suspendisse mauris sem, consectetur vel ultrices quis, tincidunt quis magna.


[border=none; padding: 0px; display: inline; color: var(--accent); font-weight: bold; text-transform: uppercase; font-family: var(--heading);]known languages.[/border] Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.


[border=none; padding: 0px; display: inline; color: var(--accent); font-weight: bold; text-transform: uppercase; font-family: var(--heading);]etc.[/border] Lorem ipsum dolor sit amet.
[/border][/border][/border][/border][comment]


-------image two-----[/comment][border=none; padding: 0px; width: 140px; height: 100%; background: var(--img2); background-size: cover; background-position: 40% 50%;][/border][/border][comment]


------end of general-------[/comment][/border][comment]


---------end of tab one-------[/comment][/border][/border][/tab][comment]






------tab two-----[/comment][tab=.][border=none; padding: 0px; position: absolute; bottom: 0; left:0; right: 0; top: 0; letter-spacing: 0; pointer-events: none; background: var(--bg); line-height: 20px;][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap;][comment]


---------tab buttons------[/comment][border=none; padding: 0px; margin: 10px; background: var(--bg); height: 400px; width: 320px; flex-grow: 1; display: flex; flex-direction: row;][border=none; padding: 0px; height: 100%; display: flex; flex-direction: column-reverse; margin-right: -50px;][comment]
----------fourth tab--------[/comment][border=none; padding: 0px; height: 30px; width: 30px; border: 1px solid var(--accent); text-align: center; font-family: var(--heading); text-transform: uppercase; display: flex; flex-direction: column; justify-content: space-evenly; margin-top: 20px; font-weight: bold; box-sizing: border-box;]04[/border][comment]
----------third tab--------[/comment][border=none; padding: 0px; height: 30px; width: 30px; border: 1px solid var(--accent); text-align: center; font-family: var(--heading); text-transform: uppercase; display: flex; flex-direction: column; justify-content: space-evenly; margin-top: 20px; font-weight: bold; box-sizing: border-box;]03[/border][comment]
----------selected tab--------[/comment][border=none; padding: 0px; height: 30px; width: 100px; background: var(--accent); text-align: center; font-family: var(--heading); text-transform: uppercase; display: flex; flex-direction: column; justify-content: space-evenly; margin-top: 20px; position: relative; z-index: 2; font-weight: bold; letter-spacing: 1px; box-sizing: border-box;]visage[/border][comment]
----------first tab--------[/comment][border=none; padding: 0px; height: 30px; width: 30px; border: 1px solid var(--accent); text-align: center; font-family: var(--heading); text-transform: uppercase; display: flex; flex-direction: column; justify-content: space-evenly; margin-top: 20px; font-weight: bold; box-sizing: border-box;]01[/border][comment]


-------name------[/comment][border=none; padding: 0px; height: 200px; width: 30px; text-align: right; text-transform: uppercase; display: flex; flex-direction: column; justify-content: space-evenly; position: relative; z-index: 2; writing-mode: vertical-lr; transform: rotate(-180deg); font-family: var(--name); -webkit-text-stroke: 1.5px var(--bg-2); color: transparent; letter-spacing: 3px; font-size: 39px; box-sizing: border-box;]sehun[/border][/border][comment]


-------image three & four-----[/comment][border=none; padding: 0px; width: 100%; background: var(--bg);][border=none; padding: 0px; height: 190px; background: var(--img3); background-size: cover; background-position: 50% 100%;][/border][border=none; padding: 0px; height: 190px; background: var(--img4); background-size: cover; background-position: 50% 20%; margin-top: 20px;][/border][/border][/border][comment]


---------appearance details------[/comment][border=none; padding: 0px; margin: 10px; height: 400px; width: 420px; flex-grow: 1; pointer-events: auto;][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 400px; overflow: hidden;][border=none; padding: 0px; height: 100%; width: 200%; overflow-y: auto;][border=none; padding: 0px; height: auto; width: 50%; box-sizing: border-box; text-align: justify;][comment]


--------height-----[/comment][border=none; padding: 0px; display: flex; flex-direction: row;][border=none; padding: 0px; min-width: 20px; box-sizing: border-box; padding: 6px; border: 1px solid var(--accent); font-family: var(--heading); text-transform: uppercase; writing-mode: vertical-lr; transform: rotate(-180deg); display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-size: 12px; font-weight: bold; margin-right: 20px;]ht[/border][border=none; padding: 0px; background: var(--dark-1); box-sizing: border-box; width: 100%; padding: 10px; display: flex; flex-direction: column; justify-content: space-evenly;]Lorem ipsum dolor sit amet.[/border][/border][comment]


--------weight-----[/comment][border=none; padding: 0px; display: flex; flex-direction: row; margin-top: 20px;][border=none; padding: 0px; min-width: 20px; box-sizing: border-box; padding: 6px; border: 1px solid var(--accent); font-family: var(--heading); text-transform: uppercase; writing-mode: vertical-lr; transform: rotate(-180deg); display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-size: 12px; font-weight: bold; margin-right: 20px;]wt[/border][border=none; padding: 0px; background: var(--dark-2); box-sizing: border-box; width: 100%; padding: 10px; display: flex; flex-direction: column; justify-content: space-evenly;]Lorem ipsum dolor sit amet.[/border][/border][comment]


--------hair-----[/comment][border=none; padding: 0px; display: flex; flex-direction: row; margin-top: 20px;][border=none; padding: 0px; min-width: 20px; box-sizing: border-box; padding: 6px; border: 1px solid var(--accent); font-family: var(--heading); text-transform: uppercase; writing-mode: vertical-lr; transform: rotate(-180deg); display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-size: 12px; font-weight: bold; margin-right: 20px;]hair[/border][border=none; padding: 0px; background: var(--dark-1); box-sizing: border-box; width: 100%; padding: 10px; display: flex; flex-direction: column; justify-content: space-evenly;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mauris sem.[/border][/border][comment]


--------eyes-----[/comment][border=none; padding: 0px; display: flex; flex-direction: row; margin-top: 20px;][border=none; padding: 0px; min-width: 20px; box-sizing: border-box; padding: 6px; border: 1px solid var(--accent); font-family: var(--heading); text-transform: uppercase; writing-mode: vertical-lr; transform: rotate(-180deg); display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-size: 12px; font-weight: bold; margin-right: 20px;]eyes[/border][border=none; padding: 0px; background: var(--dark-2); box-sizing: border-box; width: 100%; padding: 10px; display: flex; flex-direction: column; justify-content: space-evenly;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mauris sem, consectetur vel ultrices quis. [/border][/border][comment]


--------body-----[/comment][border=none; padding: 0px; display: flex; flex-direction: row; margin-top: 20px;][border=none; padding: 0px; min-width: 20px; box-sizing: border-box; padding: 6px; border: 1px solid var(--accent); font-family: var(--heading); text-transform: uppercase; writing-mode: vertical-lr; transform: rotate(-180deg); display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-size: 12px; font-weight: bold; margin-right: 20px;]body[/border][border=none; padding: 0px; background: var(--dark-1); box-sizing: border-box; width: 100%; padding: 10px; display: flex; flex-direction: column; justify-content: space-evenly;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mauris sem, consectetur vel ultrices quis, tincidunt quis magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed facilisis ante mollis finibus hendrerit. [/border][/border][comment]


--------mods-----[/comment][border=none; padding: 0px; display: flex; flex-direction: row; margin-top: 20px;][border=none; padding: 0px; min-width: 20px; box-sizing: border-box; padding: 6px; border: 1px solid var(--accent); font-family: var(--heading); text-transform: uppercase; writing-mode: vertical-lr; transform: rotate(-180deg); display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-size: 12px; font-weight: bold; margin-right: 20px;]mods[/border][border=none; padding: 0px; background: var(--dark-2); box-sizing: border-box; width: 100%; padding: 10px; display: flex; flex-direction: column; justify-content: space-evenly;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mauris sem, consectetur vel ultrices quis, tincidunt quis magna. Class aptent taciti sociosqu. [/border][/border][comment]


--------faceclaim-----[/comment][border=none; padding: 0px; display: flex; flex-direction: row; margin-top: 20px;][border=none; padding: 0px; min-width: 20px; box-sizing: border-box; padding: 6px; border: 1px solid var(--accent); font-family: var(--heading); text-transform: uppercase; writing-mode: vertical-lr; transform: rotate(-180deg); display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; font-size: 12px; font-weight: bold; margin-right: 20px;]fc[/border][border=none; padding: 0px; background: var(--dark-1); box-sizing: border-box; width: 100%; padding: 10px; display: flex; flex-direction: column; justify-content: space-evenly;]Lorem ipsum dolor sit amet.[/border][/border][comment]


----------end of appearance---------[/comment][/border][/border][/border][/border][comment]


---------end of tab two-------[/comment][/border][/border][/tab][comment]






------tab three-----[/comment][tab=.][border=none; padding: 0px; position: absolute; bottom: 0; left:0; right: 0; top: 0; letter-spacing: 0; pointer-events: none; background: var(--bg); line-height: 20px;][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap;][comment]


---------tab buttons------[/comment][border=none; padding: 0px; margin: 10px; background: var(--bg); height: 400px; width: 310px; flex-grow: 1; display: flex; flex-direction: row;][border=none; padding: 0px; height: 100%; display: flex; flex-direction: column-reverse; margin-right: -50px;][comment]
----------fourth tab--------[/comment][border=none; padding: 0px; height: 30px; width: 30px; border: 1px solid var(--accent); text-align: center; font-family: var(--heading); text-transform: uppercase; display: flex; flex-direction: column; justify-content: space-evenly; margin-top: 20px; font-weight: bold; box-sizing: border-box;]04[/border][comment]
----------selected tab--------[/comment][border=none; padding: 0px; height: 30px; width: 100px; background: var(--accent); text-align: center; font-family: var(--heading); text-transform: uppercase; display: flex; flex-direction: column; justify-content: space-evenly; margin-top: 20px; position: relative; z-index: 2; font-weight: bold; letter-spacing: 1px; box-sizing: border-box;]persona[/border][comment]
----------second tab--------[/comment][border=none; padding: 0px; height: 30px; width: 30px; border: 1px solid var(--accent); text-align: center; font-family: var(--heading); text-transform: uppercase; display: flex; flex-direction: column; justify-content: space-evenly; margin-top: 20px; font-weight: bold; box-sizing: border-box;]02[/border][comment]
----------first tab--------[/comment][border=none; padding: 0px; height: 30px; width: 30px; border: 1px solid var(--accent); text-align: center; font-family: var(--heading); text-transform: uppercase; display: flex; flex-direction: column; justify-content: space-evenly; margin-top: 20px; font-weight: bold; box-sizing: border-box;]01[/border][comment]


-------name------[/comment][border=none; padding: 0px; height: 200px; width: 30px; text-align: right; text-transform: uppercase; display: flex; flex-direction: column; justify-content: space-evenly; position: relative; z-index: 2; writing-mode: vertical-lr; transform: rotate(-180deg); font-family: var(--name); -webkit-text-stroke: 1.5px var(--bg-2); color: transparent; letter-spacing: 3px; font-size: 39px; box-sizing: border-box;]sehun[/border][/border][comment]


--------persona misc------[/comment][border=none; padding: 0px; width: 100%; background: var(--bg); pointer-events: auto;][border=none; padding: 0px; height: 280px; width: 100%; position: relative;][border=none; padding: 0px; display: flex; justify-content: center;][border=none; padding: 0px; height: 30px; width: 210px; overflow: hidden; margin-top: 15px;][tabs]


--------likes & dislikes------[/comment][tab=fillersss][border=none; padding: 0px; position: absolute; bottom: 0; left:0; right: 0; top: 0; letter-spacing: 0; pointer-events: none; opacity: 1; background: var(--bg);][border=none; padding: 0px; box-sizing: border-box; height: 100%; padding: 15px; background: linear-gradient(to right, var(--accent) 1px, transparent 1px) 0 0, linear-gradient(to right, var(--accent) 1px, transparent 1px) 0 100%, linear-gradient(to left, var(--accent) 1px, transparent 1px) 100% 0, linear-gradient(to left, var(--accent) 1px, transparent 1px) 100% 100%, linear-gradient(to bottom, var(--accent) 1px, transparent 1px) 0 0, linear-gradient(to bottom, var(--accent) 1px, transparent 1px) 100% 0, linear-gradient(to top, var(--accent) 1px, transparent 1px) 0 100%, linear-gradient(to top, var(--accent) 1px, transparent 1px) 100% 100%; background-repeat: no-repeat; background-size: 15px 15px;][border=none; padding: 0px; height: 20px; display: flex; justify-content: center; letter-spacing: 1px;][border=none; padding: 0px; display: inline-block; font-family: var(--heading); background: var(--accent); border: 1px solid var(--accent); text-transform: uppercase; margin-right: 10px; padding: 0px 5px; display: flex; flex-direction: column; justify-content: space-evenly; box-sizing: border-box;]likes & dislikes[/border][border=none; padding: 0px; display: inline-block; font-family: var(--heading); border: 1px solid var(--accent); background: var(--bg); text-transform: uppercase; padding: 0px 5px; display: flex; flex-direction: column; justify-content: space-evenly; box-sizing: border-box;]misc[/border][/border][border=none; padding: 0px; height: 213px; margin-top: 15px; pointer-events: auto;][comment]


--------likes-------[/comment][border=none; padding: 0px; font-family: var(--heading); font-size: 14px; height: 18px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; color: var(--accent); box-sizing: border-box; padding-left: 10px;]likes[/border][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 76px; overflow: hidden; margin-top: 5px;][border=none; padding: 0px; height: 100%; width: 200%; overflow-y: auto;][border=none; padding: 0px; height: auto; width: 50%; box-sizing: border-box; text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mauris sem, consectetur vel ultrices quis, tincidunt quis magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed facilisis ante mollis finibus hendrerit. Sed vestibulum egestas elit, id rutrum eros tincidunt dapibus. Nulla iaculis malesuada mattis. Nunc vulputate quam elit, et semper odio rhoncus ac. Nulla porttitor libero nec feugiat elementum.[/border][/border][/border][comment]


--------dislikes-------[/comment][border=none; padding: 0px; font-family: var(--heading); font-size: 14px; height: 18px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; color: var(--accent); box-sizing: border-box; padding-left: 10px; margin-top: 15px;]dislikes[/border][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 76px; overflow: hidden; margin-top: 5px;][border=none; padding: 0px; height: 100%; width: 200%; overflow-y: auto;][border=none; padding: 0px; height: auto; width: 50%; box-sizing: border-box; text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mauris sem, consectetur vel ultrices quis, tincidunt quis magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed facilisis ante mollis finibus hendrerit. Sed vestibulum egestas elit, id rutrum eros tincidunt dapibus. Nulla iaculis malesuada mattis. Nunc vulputate quam elit, et semper odio rhoncus ac. Nulla porttitor libero nec feugiat elementum.[/border][/border][/border][comment]


--------[/comment][/border][/border][/border][/tab][comment]


---------misc---------[/comment][tab=.][border=none; padding: 0px; position: absolute; bottom: 0; left:0; right: 0; top: 0; letter-spacing: 0; pointer-events: none; background: var(--bg);][border=none; padding: 0px; box-sizing: border-box; height: 100%; padding: 15px; background: linear-gradient(to right, var(--accent) 1px, transparent 1px) 0 0, linear-gradient(to right, var(--accent) 1px, transparent 1px) 0 100%, linear-gradient(to left, var(--accent) 1px, transparent 1px) 100% 0, linear-gradient(to left, var(--accent) 1px, transparent 1px) 100% 100%, linear-gradient(to bottom, var(--accent) 1px, transparent 1px) 0 0, linear-gradient(to bottom, var(--accent) 1px, transparent 1px) 100% 0, linear-gradient(to top, var(--accent) 1px, transparent 1px) 0 100%, linear-gradient(to top, var(--accent) 1px, transparent 1px) 100% 100%; background-repeat: no-repeat; background-size: 15px 15px;][border=none; padding: 0px; height: 20px; display: flex; justify-content: center; letter-spacing: 1px;][border=none; padding: 0px; display: inline-block; font-family: var(--heading); background: var(--bg); border: 1px solid var(--accent); text-transform: uppercase; margin-right: 10px; padding: 0px 5px; display: flex; flex-direction: column; justify-content: space-evenly; box-sizing: border-box;]likes & dislikes[/border][border=none; padding: 0px; display: inline-block; font-family: var(--heading); background: var(--accent); border: 1px solid var(--accent); text-transform: uppercase; padding: 0px 5px; display: flex; flex-direction: column; justify-content: space-evenly; box-sizing: border-box;]misc[/border][/border][border=none; padding: 0px; height: 213px; margin-top: 15px; pointer-events: auto; box-sizing: border-box; width: 100%; overflow: hidden;][border=none; padding: 0px; height: 100%; width: 200%; overflow-y: auto;][border=none; padding: 0px; height: auto; width: 50%; box-sizing: border-box; text-align: justify;][comment]


--------hobbies-------[/comment][border=none; padding: 0px; font-family: var(--heading); font-size: 14px; height: 28px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; color: var(--accent); box-sizing: border-box; padding-left: 10px; padding-bottom: 10px; margin-bottom: -15px; top: 0; position: sticky; background: var(--bg);]hobbies[/border]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mauris sem, consectetur vel ultrices quis, tincidunt quis magna.


[comment]--------habits-------[/comment][border=none; padding: 0px; font-family: var(--heading); font-size: 14px; height: 28px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; color: var(--accent); box-sizing: border-box; padding-left: 10px; padding-bottom: 10px; margin-bottom: -15px; top: 0; position: sticky; background: var(--bg);]habits[/border]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mauris sem, consectetur vel ultrices quis, tincidunt quis magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed facilisis ante mollis finibus hendrerit. Sed vestibulum egestas elit, id rutrum eros tincidunt dapibus.


[comment]--------fears-------[/comment][border=none; padding: 0px; font-family: var(--heading); font-size: 14px; height: 28px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; color: var(--accent); box-sizing: border-box; padding-left: 10px; padding-bottom: 10px; margin-bottom: -15px; top: 0; position: sticky; background: var(--bg);]fears[/border]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mauris sem, consectetur vel ultrices quis, tincidunt quis magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.


[comment]--------fun facts-------[/comment][border=none; padding: 0px; font-family: var(--heading); font-size: 14px; height: 28px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; color: var(--accent); box-sizing: border-box; padding-left: 10px; padding-bottom: 10px; margin-bottom: -15px; top: 0; position: sticky; background: var(--bg);]fun facts[/border]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mauris sem, consectetur vel ultrices quis, tincidunt quis magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
[/border][/border][/border][/border][/border][/tab][comment]


---------end of persona misc------[/comment][/tabs][/border][/border][/border][comment]


---------image five-----[/comment][border=none; padding: 0px; margin-top: 20px; height: 100px; background: var(--img5); background-size: cover; background-position: 50% 0%;][/border][/border][/border][comment]


---------personality------[/comment][border=none; padding: 0px; margin: 10px; background: var(--bg); height: 400px; width: 430px; flex-grow: 1; display: flex; flex-direction: row; pointer-events: auto;][border=none; padding: 0px; width: 100%; margin-right: 20px;][border=none; padding: 0px; font-family: var(--heading); font-size: 14px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; border: 1px solid var(--accent); box-sizing: border-box; height: 40px; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center;]personality[/border][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 340px; margin-top: 20px; overflow: hidden;][border=none; padding: 0px; height: 100%; width: 200%; overflow-y: auto;][border=none; padding: 0px; height: auto; width: 50%; box-sizing: border-box; text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in semper risus. Morbi porttitor metus in velit hendrerit, ac ultricies mauris pretium. Aenean sagittis magna non lorem dignissim, in posuere tellus tincidunt. In hac habitasse platea dictumst. Aliquam in consequat libero. Mauris non gravida felis. Sed erat augue, mattis eu fringilla nec, porttitor eu est. Vestibulum vestibulum diam vitae lorem efficitur luctus. Pellentesque sed fermentum dolor. Curabitur sodales arcu sapien, porta mollis sapien vulputate a. Maecenas eu augue vitae tortor molestie scelerisque. Suspendisse quis egestas lacus.


Donec enim nisl, imperdiet nec ligula vel, rhoncus laoreet orci. Ut varius eros leo, at faucibus leo facilisis eu. Sed sed sem in turpis semper ultrices. Nulla eleifend nunc eu metus mattis malesuada. In id nisl efficitur, maximus libero vitae, venenatis eros. Nunc iaculis sagittis libero, vitae dignissim eros lobortis ut. Etiam ultrices sem a lobortis sollicitudin. Mauris ut ornare augue. Phasellus nulla ligula, dictum et consectetur non, cursus sagittis elit. Nunc id lorem ut ligula viverra suscipit. Quisque eu sapien blandit, vulputate leo eget, hendrerit dolor.


Phasellus mattis sodales velit, a consequat orci feugiat et. Phasellus auctor ligula ac felis rhoncus tincidunt. Mauris tempor felis sit amet eros varius, sit amet maximus risus tincidunt. Sed eu mi consequat, aliquet tellus vel, dignissim erat. Sed tincidunt urna arcu, in bibendum diam ullamcorper volutpat. Curabitur bibendum suscipit justo, id rutrum est viverra ac. Vivamus non nulla euismod, imperdiet nibh bibendum, dignissim sem. Duis rutrum ligula nec tempus semper. In euismod id arcu vel luctus. Donec orci nisl, aliquam et lacus nec, suscipit faucibus velit. Proin sodales magna a orci iaculis malesuada. Cras vitae ornare magna.[/border][/border][/border][/border][comment]


-------image six-----[/comment][border=none; padding: 0px; width: 140px; height: 100%; background: var(--img6); background-size: cover; background-position: 50% 50%;][/border][comment]


--------end of personality-----[/comment][/border][comment]


---------end of tab three-------[/comment][/border][/border][/tab][comment]






------tab four-----[/comment][tab=.][border=none; padding: 0px; position: absolute; bottom: 0; left:0; right: 0; top: 0; letter-spacing: 0; pointer-events: none; background: var(--bg); line-height: 20px;][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap;][comment]


---------tab buttons------[/comment][border=none; padding: 0px; margin: 10px; background: var(--bg); height: 400px; width: 290px; flex-grow: 1; display: flex; flex-direction: row;][border=none; padding: 0px; height: 100%; display: flex; flex-direction: column-reverse; margin-right: -50px;][comment]
----------selected tab--------[/comment][border=none; padding: 0px; height: 30px; width: 100px; background: var(--accent); text-align: center; font-family: var(--heading); text-transform: uppercase; display: flex; flex-direction: column; justify-content: space-evenly; margin-top: 20px; position: relative; z-index: 2; font-weight: bold; letter-spacing: 1px; box-sizing: border-box;]history[/border][comment]
----------third tab--------[/comment][border=none; padding: 0px; height: 30px; width: 30px; border: 1px solid var(--accent); text-align: center; font-family: var(--heading); text-transform: uppercase; display: flex; flex-direction: column; justify-content: space-evenly; margin-top: 20px; font-weight: bold; box-sizing: border-box;]03[/border][comment]
----------second tab--------[/comment][border=none; padding: 0px; height: 30px; width: 30px; border: 1px solid var(--accent); text-align: center; font-family: var(--heading); text-transform: uppercase; display: flex; flex-direction: column; justify-content: space-evenly; margin-top: 20px; font-weight: bold; box-sizing: border-box;]02[/border][comment]
----------first tab--------[/comment][border=none; padding: 0px; height: 30px; width: 30px; border: 1px solid var(--accent); text-align: center; font-family: var(--heading); text-transform: uppercase; display: flex; flex-direction: column; justify-content: space-evenly; margin-top: 20px; font-weight: bold; box-sizing: border-box;]01[/border][comment]


-------name------[/comment][border=none; padding: 0px; height: 200px; width: 30px; text-align: right; text-transform: uppercase; display: flex; flex-direction: column; justify-content: space-evenly; position: relative; z-index: 2; writing-mode: vertical-lr; transform: rotate(-180deg); font-family: var(--name); -webkit-text-stroke: 1.5px var(--bg-2); color: transparent; letter-spacing: 3px; font-size: 39px; box-sizing: border-box;]sehun[/border][/border][comment]


--------relationships-------[/comment][border=none; padding: 0px; width: 100%; background: var(--bg); pointer-events: auto;][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 350px; overflow: hidden;][border=none; padding: 0px; height: 100%; width: 200%; overflow-y: auto;][border=none; padding: 0px; height: auto; width: 50%; box-sizing: border-box; text-align: justify;][comment]


-------first relationship--------[/comment][border=none; padding: 0px; height: 165px; display: flex; flex-direction: row;][border=none; padding: 0px; min-width: 80px; background: var(--rimg1); background-size: cover; background-position: 50% 50%; margin-right: 15px;][/border][border=none; padding: 0px; height: 165px; width: 100%;][border=none; padding: 0px; background: var(--dark-2); font-family: var(--heading); text-transform: uppercase; letter-spacing: 1px; color: var(--accent); height: 25px; font-weight: bold; box-sizing: border-box; padding: 0px 7px; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 11px;]character name[/border][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 125px; overflow: hidden; margin-top: 15px;][border=none; padding: 0px; height: 100%; width: 200%; overflow-y: auto;][border=none; padding: 0px; height: auto; width: 50%; box-sizing: border-box; text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in semper risus. Morbi porttitor metus in velit hendrerit, ac ultricies mauris pretium. Aenean sagittis magna non lorem dignissim, in posuere tellus tincidunt. In hac habitasse platea dictumst. Aliquam in consequat libero. Mauris non gravida felis. Sed erat augue, mattis eu fringilla nec, porttitor eu est. Vestibulum vestibulum diam vitae lorem efficitur luctus. Pellentesque sed fermentum dolor. Curabitur sodales arcu sapien, porta mollis sapien vulputate a. Maecenas eu augue vitae tortor molestie scelerisque. Suspendisse quis egestas lacus.[/border][/border][/border][/border][/border][comment]


-------second relationship--------[/comment][border=none; padding: 0px; height: 165px; display: flex; flex-direction: row; margin-top: 20px;][border=none; padding: 0px; min-width: 80px; background: var(--rimg2); background-size: cover; background-position: 50% 50%; margin-right: 15px;][/border][border=none; padding: 0px; height: 165px; width: 100%;][border=none; padding: 0px; background: var(--dark-2); font-family: var(--heading); text-transform: uppercase; letter-spacing: 1px; color: var(--accent); height: 25px; font-weight: bold; box-sizing: border-box; padding: 0px 7px; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 11px;]character name[/border][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 125px; overflow: hidden; margin-top: 15px;][border=none; padding: 0px; height: 100%; width: 200%; overflow-y: auto;][border=none; padding: 0px; height: auto; width: 50%; box-sizing: border-box; text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in semper risus. Morbi porttitor metus in velit hendrerit, ac ultricies mauris pretium. Aenean sagittis magna non lorem dignissim, in posuere tellus tincidunt. In hac habitasse platea dictumst. Aliquam in consequat libero. Mauris non gravida felis. Sed erat augue, mattis eu fringilla nec, porttitor eu est. Vestibulum vestibulum diam vitae lorem efficitur luctus. Pellentesque sed fermentum dolor. Curabitur sodales arcu sapien, porta mollis sapien vulputate a. Maecenas eu augue vitae tortor molestie scelerisque. Suspendisse quis egestas lacus.[/border][/border][/border][/border][/border][comment]


-------third relationship // copy me and paste below to add more! remember to change the image variable (--rimg3) to (--rimg4) for the next one, and so on!--------[/comment][border=none; padding: 0px; height: 165px; display: flex; flex-direction: row; margin-top: 20px;][border=none; padding: 0px; min-width: 80px; background: var(--rimg3); background-size: cover; background-position: 50% 50%; margin-right: 15px;][/border][border=none; padding: 0px; height: 165px; width: 100%;][border=none; padding: 0px; background: var(--dark-2); font-family: var(--heading); text-transform: uppercase; letter-spacing: 1px; color: var(--accent); height: 25px; font-weight: bold; box-sizing: border-box; padding: 0px 7px; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 11px;]character name[/border][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 125px; overflow: hidden; margin-top: 15px;][border=none; padding: 0px; height: 100%; width: 200%; overflow-y: auto;][border=none; padding: 0px; height: auto; width: 50%; box-sizing: border-box; text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in semper risus. Morbi porttitor metus in velit hendrerit, ac ultricies mauris pretium. Aenean sagittis magna non lorem dignissim, in posuere tellus tincidunt. In hac habitasse platea dictumst. Aliquam in consequat libero. Mauris non gravida felis. Sed erat augue, mattis eu fringilla nec, porttitor eu est. Vestibulum vestibulum diam vitae lorem efficitur luctus. Pellentesque sed fermentum dolor. Curabitur sodales arcu sapien, porta mollis sapien vulputate a. Maecenas eu augue vitae tortor molestie scelerisque. Suspendisse quis egestas lacus.[/border][/border][/border][/border][/border][comment]


------end of rships-------[/comment][/border][/border][/border][comment]


-------credit-------[/comment][border=none; padding: 0px; display: flex; flex-direction: row; margin-top: 20px;][border=none; padding: 0px; min-width: 50px; margin-right: 20px;][/border][border=none; padding: 0px; background: var(--dark-1); height: 30px; width: 100%; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--credit); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;]coded by natasha[/border][/border][comment]


--------end of left side-------[/comment][/border][/border][comment]


-------history-----[/comment][border=none; padding: 0px; margin: 10px; background: var(--bg); height: 400px; width: 450px; flex-grow: 1; pointer-events: auto;][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 400px; overflow: hidden;][border=none; padding: 0px; height: 100%; width: 200%; overflow-y: auto;][border=none; padding: 0px; height: auto; width: 50%; box-sizing: border-box; text-align: justify;][comment]


--------first part of background--------[/comment][border=none; padding: 0px; background: var(--bg); top: 0%; position: sticky; display: flex; flex-direction: row; height: 40px;][border=none; padding: 0px; height: 30px; min-width: 30px;][border=none; padding: 0px; width: 30px; height: 30px; box-sizing: border-box; background: var(--accent); display: flex; flex-direction: column; justify-content: space-evenly; text-align: center;][fa]far fa-sparkles[/fa][/border][/border][border=none; padding: 0px; width: 25px; height: 30px; display: flex; flex-direction: column; justify-content: space-evenly;][border=none; padding: 0px; height: 1px; background: var(--accent);][/border][/border][border=none; padding: 0px; width: 100%; height: 30px; text-align: center;][border=none; padding: 0px; height: 30px; border: 1px solid var(--accent); display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--heading); box-sizing: border-box; text-transform: uppercase; letter-spacing: 1px; font-weight: bold;]the first part of life[/border][/border][/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in semper risus. Morbi porttitor metus in velit hendrerit, ac ultricies mauris pretium. Aenean sagittis magna non lorem dignissim, in posuere tellus tincidunt. In hac habitasse platea dictumst. Aliquam in consequat libero. Mauris non gravida felis. Sed erat augue, mattis eu fringilla nec, porttitor eu est. Vestibulum vestibulum diam vitae lorem efficitur luctus. Pellentesque sed fermentum dolor. Curabitur sodales arcu sapien, porta mollis sapien vulputate a. Maecenas eu augue vitae tortor molestie scelerisque. Suspendisse quis egestas lacus.[comment]


--------second part of background--------[/comment][border=none; padding: 0px; background: var(--bg); top: 0%; position: sticky; display: flex; flex-direction: row; height: 40px; margin-top: 20px;][border=none; padding: 0px; height: 30px; min-width: 30px;][border=none; padding: 0px; width: 30px; height: 30px; box-sizing: border-box; background: var(--accent); display: flex; flex-direction: column; justify-content: space-evenly; text-align: center;][fa]far fa-sparkles[/fa][/border][/border][border=none; padding: 0px; width: 25px; height: 30px; display: flex; flex-direction: column; justify-content: space-evenly;][border=none; padding: 0px; height: 1px; background: var(--accent);][/border][/border][border=none; padding: 0px; width: 100%; height: 30px; text-align: center;][border=none; padding: 0px; height: 30px; border: 1px solid var(--accent); display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--heading); box-sizing: border-box; text-transform: uppercase; letter-spacing: 1px; font-weight: bold;]halfway through it all[/border][/border][/border]Donec enim nisl, imperdiet nec ligula vel, rhoncus laoreet orci. Ut varius eros leo, at faucibus leo facilisis eu. Sed sed sem in turpis semper ultrices. Nulla eleifend nunc eu metus mattis malesuada. In id nisl efficitur, maximus libero vitae, venenatis eros. Nunc iaculis sagittis libero, vitae dignissim eros lobortis ut. Etiam ultrices sem a lobortis sollicitudin. Mauris ut ornare augue. Phasellus nulla ligula, dictum et consectetur non, cursus sagittis elit. Nunc id lorem ut ligula viverra suscipit. Quisque eu sapien blandit, vulputate leo eget, hendrerit dolor.[comment]


--------third part of background--------[/comment][border=none; padding: 0px; margin-top: 20px; background: var(--bg); top: 0%; position: sticky; display: flex; flex-direction: row; height: 40px;][border=none; padding: 0px; height: 30px; min-width: 30px;][border=none; padding: 0px; width: 30px; height: 30px; box-sizing: border-box; background: var(--accent); display: flex; flex-direction: column; justify-content: space-evenly; text-align: center;][fa]far fa-sparkles[/fa][/border][/border][border=none; padding: 0px; width: 25px; height: 30px; display: flex; flex-direction: column; justify-content: space-evenly;][border=none; padding: 0px; height: 1px; background: var(--accent);][/border][/border][border=none; padding: 0px; width: 100%; height: 30px; text-align: center;][border=none; padding: 0px; height: 30px; border: 1px solid var(--accent); display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--heading); box-sizing: border-box; text-transform: uppercase; letter-spacing: 1px; font-weight: bold;]what happens next?[/border][/border][/border]Phasellus mattis sodales velit, a consequat orci feugiat et. Phasellus auctor ligula ac felis rhoncus tincidunt. Mauris tempor felis sit amet eros varius, sit amet maximus risus tincidunt. Sed eu mi consequat, aliquet tellus vel, dignissim erat. Sed tincidunt urna arcu, in bibendum diam ullamcorper volutpat. Curabitur bibendum suscipit justo, id rutrum est viverra ac. Vivamus non nulla euismod, imperdiet nibh bibendum, dignissim sem. Duis rutrum ligula nec tempus semper. In euismod id arcu vel luctus. Donec orci nisl, aliquam et lacus nec, suscipit faucibus velit. Proin sodales magna a orci iaculis malesuada. Cras vitae ornare magna.[comment]


----------[/comment][/border][/border][/border][comment]


-------end of background--------[/comment][/border][comment]


---------end of tab four-------[/comment][/border][/border][/tab][comment]






------end of tabs-----[/comment][/tabs][/border][/border][comment]




-------right filler-------[/comment][border=none; padding: 0px; margin: 10px; background: var(--bg-2); height: 400px; width: 370px; flex-grow: 1;]left[/border][comment]


--------end of code-------[/comment][/border][/border]