[comment]
[font=Oswald]title[/font]
[font=Montserrat]subtitles & headings[/font]
[font=Roboto]body[/font]
[/comment][border=none; padding: 0px;

--accent: #d13f3f;
--bg: #111;
--header: #000;
--color: #ddd;
--unselected: #444;
--credit: #fff;

--title: Oswald;
--heading: Montserrat;
--body: Roboto;

--img1: url(https://i.stack.imgur.com/y9DpT.jpg);
--img2: url(https://i.stack.imgur.com/y9DpT.jpg);
--img3: url(https://i.stack.imgur.com/y9DpT.jpg);
--img4: url(https://i.stack.imgur.com/y9DpT.jpg);

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

------character name and role ------[/comment][border=none; padding: 0px; margin: 10px; width: 500px; height: 100px; background: var(--bg); flex-grow: 1; line-height: 20px; box-sizing: border-box;][border=none; padding: 0px; font-size: 40px; font-family: var(--title); text-transform: uppercase; color: var(--accent); margin-top: 25px;]character name[/border][border=none; padding: 0px; text-transform: uppercase; font-family: var(--heading);  font-size: 13px; letter-spacing: 3px; font-weight: bold; margin-top: 20px; padding-left: 5px;]the role name[/border][/border][comment]

------tabs start here------[/comment][border=none; padding: 0px; margin: 10px; width: 140px; flex-grow: 1;][border=none; padding: 0px; height: 70px; max-width: 255px; overflow: hidden; margin: auto; margin-top: 15px;][border=none; padding: 0px; margin: auto; margin: -7px 0px 0px 0px; letter-spacing: -10px; line-height: 40px;][tabs][comment]



-----first tab------[/comment][tab=.][border=none; padding: 0px; position: absolute; bottom: 0; left:0; right: 0; top: 0;  letter-spacing: 0px; line-height: 20px; pointer-events: none;][border=none; padding: 0px; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; padding: 10px;][comment]

-----filler (ignore)-----[/comment][border=none; padding: 0px; margin: 10px; width: 500px; height: 100px; flex-grow: 1;][/border][comment]

-------tab buttons-----[/comment][border=none; padding: 0px; margin: 10px; width: 140px; flex-grow: 1; background: var(--bg);][border=none; padding: 0px; height: 90px; margin-top: -5px;box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;][comment]
-------button one------[/comment][border=none; padding: 0px; width: 45px; height: 45px; box-sizing: border-box; background: var(--bg); color: var(--accent); border: 1px solid var(--accent); text-align: center; align-items: center; font-size: 20px; margin: 5px; display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--title); text-transform: uppercase; font-weight: bold;]i[/border][comment]
-------button two------[/comment][border=none; padding: 0px; width: 45px; height: 45px; box-sizing: border-box; background: var(--bg); color: var(--unselected); border: 1px solid var(--unselected); text-align: center; align-items: center; font-size: 20px; margin: 5px; display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--title); text-transform: uppercase; font-weight: bold;]ii[/border][comment]
-------button three------[/comment][border=none; padding: 0px; width: 45px; height: 45px; box-sizing: border-box; background: var(--bg); color: var(--unselected); border: 1px solid var(--unselected); text-align: center; align-items: center; font-size: 20px; margin: 5px; display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--title); text-transform: uppercase; font-weight: bold;]iii[/border][comment]
-------button four------[/comment][border=none; padding: 0px; width: 45px; height: 45px; box-sizing: border-box; background: var(--bg); color: var(--unselected); border: 1px solid var(--unselected); text-align: center; align-items: center; font-size: 20px; margin: 5px; display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--title); text-transform: uppercase; font-weight: bold;]iv[/border][comment]
-----end of buttons------[/comment][/border][/border][comment]

---------end of the header-------[/comment][/border][comment]


------beginning of main content area------[/comment][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; background: var(--bg); padding: 10px; box-sizing: border-box; border-top: 1px solid #333;][comment]

-------first image-------[/comment][border=none; padding: 0px; margin: 10px; width: 230px; height: 399px; background: var(--img1); background-size: cover; background-position: 50% 0%; flex-grow: 1;][/border][comment]

-------right side-------[/comment][border=none; padding: 0px; width: 430px; height: 419px; background: var(--bg); flex-grow: 1; pointer-events: auto;][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 419px; 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; line-height: 22px;][comment]


-----------full name------[/comment][border=none; padding: 0px; margin: 10px; height: 63.8px; display: flex; flex-direction: column; justify-content: space-evenly; box-sizing: border-box; border: 1px solid var(--unselected); padding: 15px;][border=none; padding: 0px; font-family: var(--heading); color: var(--accent); text-transform: uppercase; font-weight: bold; font-size: 13px;]full name[/border] full name comes here[/border][comment]

-----------nicknames------[/comment][border=none; padding: 0px; margin: 10px; margin-top: 20px; height: 63.8px; display: flex; flex-direction: column; justify-content: space-evenly; box-sizing: border-box; border: 1px solid var(--unselected); padding: 15px;][border=none; padding: 0px; font-family: var(--heading); color: var(--accent); text-transform: uppercase; font-weight: bold; font-size: 13px;]nicknames[/border] nicknames come here[/border][comment]

--------age--------[/comment][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap;][border=none; padding: 0px; width: 195px; margin: 10px; height: 63.8px; display: flex; flex-direction: column; justify-content: space-evenly; box-sizing: border-box; border: 1px solid var(--unselected); padding: 15px; flex-grow: 1;][border=none; padding: 0px; font-family: var(--heading); color: var(--accent); text-transform: uppercase; font-weight: bold; font-size: 13px;]age[/border] age comes here[/border][comment]

--------date of birth--------[/comment][border=none; padding: 0px; width: 195px; margin: 10px; height: 63.8px; display: flex; flex-direction: column; justify-content: space-evenly; box-sizing: border-box; border: 1px solid var(--unselected); padding: 15px; flex-grow: 1;][border=none; padding: 0px; font-family: var(--heading); color: var(--accent); text-transform: uppercase; font-weight: bold; font-size: 13px;]date of birth[/border] date of birth comes here[/border][/border][comment]

--------gender--------[/comment][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap;][border=none; padding: 0px; width: 195px; margin: 10px; height: 63.8px; display: flex; flex-direction: column; justify-content: space-evenly; box-sizing: border-box; border: 1px solid var(--unselected); padding: 15px; flex-grow: 1;][border=none; padding: 0px; font-family: var(--heading); color: var(--accent); text-transform: uppercase; font-weight: bold; font-size: 13px;]gender[/border] gender comes here[/border][comment]

--------sexuality--------[/comment][border=none; padding: 0px; width: 195px; margin: 10px; height: 63.8px; display: flex; flex-direction: column; justify-content: space-evenly; box-sizing: border-box; border: 1px solid var(--unselected); padding: 15px; flex-grow: 1;][border=none; padding: 0px; font-family: var(--heading); color: var(--accent); text-transform: uppercase; font-weight: bold; font-size: 13px;]sexuality[/border] sexuality comes here[/border][/border][comment]

-----------ethnicity------[/comment][border=none; padding: 0px; margin: 10px; height: 63.8px; display: flex; flex-direction: column; justify-content: space-evenly; box-sizing: border-box; border: 1px solid var(--unselected); padding: 15px;][border=none; padding: 0px; font-family: var(--heading); color: var(--accent); text-transform: uppercase; font-weight: bold; font-size: 13px;]ethnicity[/border] ethnicity comes here[/border][comment]

-----------occupation (copy this entire thing and paste below this if you'd like another piece of info in this section!)------[/comment][border=none; padding: 0px; margin: 10px; margin-top: 20px; height: 63.8px; display: flex; flex-direction: column; justify-content: space-evenly; box-sizing: border-box; border: 1px solid var(--unselected); padding: 15px;][border=none; padding: 0px; font-family: var(--heading); color: var(--accent); text-transform: uppercase; font-weight: bold; font-size: 13px;]occupation[/border] occupation comes here[/border][comment]

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

-------end of main content area-------[/comment][/border][comment]

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




-----second tab------[/comment][tab=.][border=none; padding: 0px; position: absolute; bottom: 0; left:0; right: 0; top: 0;  letter-spacing: 0px; line-height: 20px; pointer-events: none;][border=none; padding: 0px; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; padding: 10px;][comment]
-----filler (ignore)-----[/comment][border=none; padding: 0px; margin: 10px; width: 500px; height: 100px; flex-grow: 1;][/border][comment]

-------tab buttons-----[/comment][border=none; padding: 0px; margin: 10px; width: 140px; flex-grow: 1; background: var(--bg);][border=none; padding: 0px; height: 90px; margin-top: -5px;box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;][comment]
-------button one------[/comment][border=none; padding: 0px; width: 45px; height: 45px; box-sizing: border-box; background: var(--bg); color: var(--unselected); border: 1px solid var(--unselected); text-align: center; align-items: center; font-size: 20px; margin: 5px; display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--title); text-transform: uppercase; font-weight: bold;]i[/border][comment]
-------button two------[/comment][border=none; padding: 0px; width: 45px; height: 45px; box-sizing: border-box; background: var(--bg); color: var(--accent); border: 1px solid var(--accent); text-align: center; align-items: center; font-size: 20px; margin: 5px; display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--title); text-transform: uppercase; font-weight: bold;]ii[/border][comment]
-------button three------[/comment][border=none; padding: 0px; width: 45px; height: 45px; box-sizing: border-box; background: var(--bg); color: var(--unselected); border: 1px solid var(--unselected); text-align: center; align-items: center; font-size: 20px; margin: 5px; display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--title); text-transform: uppercase; font-weight: bold;]iii[/border][comment]
-------button four------[/comment][border=none; padding: 0px; width: 45px; height: 45px; box-sizing: border-box; background: var(--bg); color: var(--unselected); border: 1px solid var(--unselected); text-align: center; align-items: center; font-size: 20px; margin: 5px; display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--title); text-transform: uppercase; font-weight: bold;]iv[/border][comment]
-----end of buttons------[/comment][/border][/border][comment]
---------end of the header-------[/comment][/border][comment]


------beginning of main content area------[/comment][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; padding: 10px; box-sizing: border-box; border-top: 1px solid #333;][comment]


-------appearance info-------[/comment][border=none; padding: 0px; margin: 10px; width: 400px; height: 399px; background: var(--bg); flex-grow: 1; pointer-events: auto;][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 399px; 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; line-height: 22px;][comment]

----------height & weight------[/comment][border=none; padding: 0px; font-size: 13px; font-family: var(--heading); color: var(--accent); text-transform: uppercase; font-weight: bold;]height & weight[/border][border=none; padding: 0px; border-left: 1px dashed var(--unselected); padding-left: 10px; margin-top: 5px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/border][comment]

----------hair------[/comment][border=none; padding: 0px; font-size: 13px; font-family: var(--heading); color: var(--accent); text-transform: uppercase; font-weight: bold; margin-top: 20px;]hair[/border][border=none; padding: 0px; border-left: 1px dashed var(--unselected); padding-left: 10px; margin-top: 5px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet, ipsum nec rutrum luctus, metus est euismod justo, elementum mollis turpis ipsum ac diam.[/border][comment]

----------eyes------[/comment][border=none; padding: 0px; font-size: 13px; font-family: var(--heading); color: var(--accent); text-transform: uppercase; font-weight: bold; margin-top: 20px;]eyes[/border][border=none; padding: 0px; border-left: 1px dashed var(--unselected); padding-left: 10px; margin-top: 5px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet, ipsum nec rutrum luctus, metus est euismod justo, elementum mollis turpis ipsum ac diam.[/border][comment]

----------physique------[/comment][border=none; padding: 0px; font-size: 13px; font-family: var(--heading); color: var(--accent); text-transform: uppercase; font-weight: bold; margin-top: 20px;]physique[/border][border=none; padding: 0px; border-left: 1px dashed var(--unselected); padding-left: 10px; margin-top: 5px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet, ipsum nec rutrum luctus, metus est euismod justo, elementum mollis turpis ipsum ac diam. Nunc ac gravida dolor, non feugiat nunc. Morbi pellentesque et lorem ac sollicitudin. Curabitur euismod vehicula urna ut eleifend.[/border][comment]

----------style------[/comment][border=none; padding: 0px; font-size: 13px; font-family: var(--heading); color: var(--accent); text-transform: uppercase; font-weight: bold; margin-top: 20px;]style[/border][border=none; padding: 0px; border-left: 1px dashed var(--unselected); padding-left: 10px; margin-top: 5px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet, ipsum nec rutrum luctus, metus est euismod justo, elementum mollis turpis ipsum ac diam. Nunc ac gravida dolor, non feugiat nunc. [/border][comment]

----------modifications------[/comment][border=none; padding: 0px; font-size: 13px; font-family: var(--heading); color: var(--accent); text-transform: uppercase; font-weight: bold; margin-top: 20px;]modifications[/border][border=none; padding: 0px; border-left: 1px dashed var(--unselected); padding-left: 10px; margin-top: 5px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet, ipsum nec rutrum luctus, metus est euismod justo.[/border][comment]

----------face claim (copy this whole thing and paste it below this to get another info section!------[/comment][border=none; padding: 0px; font-size: 13px; font-family: var(--heading); color: var(--accent); text-transform: uppercase; font-weight: bold; margin-top: 20px;]face claim[/border][border=none; padding: 0px; border-left: 1px dashed var(--unselected); padding-left: 10px; margin-top: 5px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. [/border][comment]

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


-------right side-------[/comment][border=none; padding: 0px; margin: 10px; width: 240px; height: 399px; flex-grow: 1; pointer-events: auto;][comment]

-------second image------[/comment][border=none; padding: 0px; height: 259px; background: var(--img2); background-size: cover; background-position: 50% 50%;][/border][comment]

--------music player--------[/comment][border=none; padding: 0px; margin-top: 20px; height: 120px; box-sizing: border-box; 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; text-align: center;  padding: 10px;][comment]

-------song title & artist------[/comment][border=none; padding: 0px; font-family: var(--title); font-size: 20px; text-transform: uppercase; padding-top: 10px; color: var(--accent);]********[/border][border=none; padding: 0px; font-size: 10px; font-family: var(--heading); letter-spacing: 1px; text-transform: uppercase; font-weight: bold;]bazzi[/border][comment]

-------media player buttons------[/comment][border=none; padding: 0px; display: flex; flex-direction: row; justify-content: space-evenly; margin-top: 10px;][border=none; padding: 0px; font-size: 16px; padding-top: 5px; margin-right: 5px;][fa]fas fa-backward[/fa][/border][border=none; padding: 0px; width: 30px; height: 30px; overflow: hidden; position: relative;][border=none; padding: 0px; height: 100px; width: 100px; padding: 0; margin-top: -15px; margin-left:-15px;][comment]

--------put your soundcloud link here!------[/comment][media=soundcloud]https://soundcloud.com/bazziworldwide/********[/media][comment]

---------[/comment][/border][border=none; padding: 0px; height: 30px; width: 30px; background: var(--bg); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 20px; position: absolute; top: 0; left: 0; pointer-events: none; color: var(--accent);][fa]fas fa-play[/fa][/border][/border][comment]-------additional button (ignore)-----[/comment][border=none; padding: 0px; font-size: 16px; padding-top: 5px;][fa]fas fa-forward[/fa][/border][comment]

---------end of media player-----[/comment][/border][/border][comment]
--------end of right side------[/comment][/border][comment]


-------end of main content area-------[/comment][/border][comment]

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




-----third tab------[/comment][tab=.][border=none; padding: 0px; position: absolute; bottom: 0; left:0; right: 0; top: 0;  letter-spacing: 0px; line-height: 20px; pointer-events: none;][border=none; padding: 0px; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; padding: 10px;][comment]

-----filler (ignore)-----[/comment][border=none; padding: 0px; margin: 10px; width: 500px; height: 100px; flex-grow: 1;][/border][comment]

-------tab buttons-----[/comment][border=none; padding: 0px; margin: 10px; width: 140px; flex-grow: 1; background: var(--bg);][border=none; padding: 0px; height: 90px; margin-top: -5px;box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;][comment]
-------button one------[/comment][border=none; padding: 0px; width: 45px; height: 45px; box-sizing: border-box; background: var(--bg); color: var(--unselected); border: 1px solid var(--unselected); text-align: center; align-items: center; font-size: 20px; margin: 5px; display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--title); text-transform: uppercase; font-weight: bold;]i[/border][comment]
-------button two------[/comment][border=none; padding: 0px; width: 45px; height: 45px; box-sizing: border-box; background: var(--bg); color: var(--unselected); border: 1px solid var(--unselected); text-align: center; align-items: center; font-size: 20px; margin: 5px; display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--title); text-transform: uppercase; font-weight: bold;]ii[/border][comment]
-------button three------[/comment][border=none; padding: 0px; width: 45px; height: 45px; box-sizing: border-box; background: var(--bg); color: var(--accent); border: 1px solid var(--accent); text-align: center; align-items: center; font-size: 20px; margin: 5px; display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--title); text-transform: uppercase; font-weight: bold;]iii[/border][comment]
-------button four------[/comment][border=none; padding: 0px; width: 45px; height: 45px; box-sizing: border-box; background: var(--bg); color: var(--unselected); border: 1px solid var(--unselected); text-align: center; align-items: center; font-size: 20px; margin: 5px; display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--title); text-transform: uppercase; font-weight: bold;]iv[/border][comment]
-----end of buttons------[/comment][/border][/border][comment]

---------end of the header-------[/comment][/border][comment]

------beginning of main content area------[/comment][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; padding: 10px; box-sizing: border-box; border-top: 1px solid #333;][comment]

-------third image-------[/comment][border=none; padding: 0px; margin: 10px; width: 240px; height: 399px; background: var(--bg); flex-grow: 1;][border=none; padding: 0px; height: 140px; background: var(--img3); background-size: cover; background-position: 50% 50%;][/border][comment]

--------personality misc------[/comment][border=none; padding: 0px; margin-top: 20px; height: 239px; pointer-events: auto;][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 239px; 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; line-height: 22px;][comment]

-------likes-------[/comment][border=none; padding: 0px; height: 40px; background: var(--bg); position: sticky; top: 0px;][border=none; padding: 0px; text-align: center; background: var(--accent); font-size: 13px; font-family: Montserrat; padding: 5px; text-transform: uppercase; font-weight: bold;]likes[/border][/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet, ipsum nec rutrum luctus, metus est euismod justo, elementum mollis turpis ipsum ac diam. Nunc ac gravida dolor, non feugiat nunc. Morbi pellentesque et lorem ac sollicitudin. Curabitur euismod vehicula urna ut eleifend. Nunc feugiat accumsan blandit. Phasellus consectetur tortor quis neque maximus dapibus. Nunc aliquam volutpat risus eget tempus. Etiam placerat et odio et consequat. Pellentesque et urna ut quam dignissim dictum. Maecenas ultricies, felis eu iaculis tincidunt, odio lorem interdum neque, ut convallis urna velit a lacus. Proin consectetur eros est, sed pulvinar risus lacinia in.

[comment]-------dislikes-------[/comment][border=none; padding: 0px; height: 40px; background: var(--bg); position: sticky; top: 0px;][border=none; padding: 0px; text-align: center; background: var(--accent); font-size: 13px; font-family: Montserrat; padding: 5px; text-transform: uppercase; font-weight: bold;]dislikes[/border][/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet, ipsum nec rutrum luctus, metus est euismod justo, elementum mollis turpis ipsum ac diam. Nunc ac gravida dolor, non feugiat nunc. Morbi pellentesque et lorem ac sollicitudin. Curabitur euismod vehicula urna ut eleifend. Nunc feugiat accumsan blandit. Phasellus consectetur tortor quis neque maximus dapibus. Nunc aliquam volutpat risus eget tempus. Etiam placerat et odio et consequat. Pellentesque et urna ut quam dignissim dictum. Maecenas ultricies, felis eu iaculis tincidunt, odio lorem interdum neque, ut convallis urna velit a lacus. Proin consectetur eros est, sed pulvinar risus lacinia in.

[comment]-------misc info (copy this whole thing and paste it below for another section of info!)-------[/comment][border=none; padding: 0px; height: 40px; background: var(--bg); position: sticky; top: 0px;][border=none; padding: 0px; text-align: center; background: var(--accent); font-size: 13px; font-family: Montserrat; padding: 5px; text-transform: uppercase; font-weight: bold;]misc info[/border][/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet, ipsum nec rutrum luctus, metus est euismod justo, elementum mollis turpis ipsum ac diam. Nunc ac gravida dolor, non feugiat nunc. Morbi pellentesque et lorem ac sollicitudin. Curabitur euismod vehicula urna ut eleifend. Nunc feugiat accumsan blandit. Phasellus consectetur tortor quis neque maximus dapibus. Nunc aliquam volutpat risus eget tempus. Etiam placerat et odio et consequat. Pellentesque et urna ut quam dignissim dictum. Maecenas ultricies, felis eu iaculis tincidunt, odio lorem interdum neque, ut convallis urna velit a lacus. Proin consectetur eros est, sed pulvinar risus lacinia in.
[/border][/border][/border][/border][/border][comment]

-------personality comes here-------[/comment][border=none; padding: 0px; margin: 10px; width: 400px; height: 399px; background: var(--bg); flex-grow: 1; pointer-events: auto;][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 399px; 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; line-height: 22px;][border=none; padding: 0px; width: 150px; text-align: center; background: var(--accent); font-size: 17px; font-family: Montserrat; padding: 7px; margin-right: 10px; text-transform: uppercase; float: left; font-weight: bold; margin-top: 3px;]personality[/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet, ipsum nec rutrum luctus, metus est euismod justo, elementum mollis turpis ipsum ac diam. Nunc ac gravida dolor, non feugiat nunc. Morbi pellentesque et lorem ac sollicitudin. Curabitur euismod vehicula urna ut eleifend. Nunc feugiat accumsan blandit. Phasellus consectetur tortor quis neque maximus dapibus. Nunc aliquam volutpat risus eget tempus. Etiam placerat et odio et consequat. Pellentesque et urna ut quam dignissim dictum. Maecenas ultricies, felis eu iaculis tincidunt, odio lorem interdum neque, ut convallis urna velit a lacus. Proin consectetur eros est, sed pulvinar risus lacinia in.

In condimentum, mauris id blandit lobortis, tortor magna facilisis erat, id porttitor nulla lectus in lacus. Nullam ligula eros, ullamcorper eu neque non, dapibus mollis augue. Phasellus molestie malesuada sollicitudin. Fusce odio ante, laoreet in finibus et, fermentum sed ante. Duis a faucibus enim. Donec pharetra vitae lorem accumsan ultrices. Curabitur id venenatis dui. Quisque sit amet laoreet enim, facilisis faucibus metus. Sed diam tellus, accumsan eget ultricies in, laoreet vitae massa. Aenean bibendum, nisl nec tristique venenatis, libero sem malesuada diam, nec tempus metus mi a mauris. Cras ornare blandit lacus, et elementum arcu rutrum id. Etiam vel ultrices neque, sed rutrum lorem. Vestibulum et libero massa. Quisque ut enim nec neque eleifend molestie. Praesent feugiat interdum pretium. Aliquam turpis ex, tristique in mollis ut, lobortis ultrices enim.

Sed fermentum, ipsum a porta malesuada, enim ante eleifend tellus, quis pulvinar lectus nisi nec dui. Morbi vulputate mollis est sed ultricies. Nulla fermentum nibh nulla, ut posuere eros semper sit amet. Proin convallis, tellus eu dignissim feugiat, enim tellus sodales tortor, eu feugiat nibh enim id erat. Phasellus et ligula vel arcu efficitur interdum ac nec erat. Nam quis luctus urna. Ut quis bibendum ipsum. Nam ex justo, tristique non cursus non, pulvinar eu ligula. Aenean semper odio magna, sit amet molestie ante imperdiet in. Nullam gravida erat vel est faucibus aliquet. Donec ut hendrerit ex. Sed vel aliquet enim. Duis egestas lobortis iaculis.
[/border][/border][/border][/border][comment]

-------end of main content area-------[/comment][/border][comment]

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




-----fourth tab------[/comment][tab=.][border=none; padding: 0px; position: absolute; bottom: 0; left:0; right: 0; top: 0;  letter-spacing: 0px; line-height: 20px; pointer-events: none;][border=none; padding: 0px; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; padding: 10px;][comment]

-----filler (ignore)-----[/comment][border=none; padding: 0px; margin: 10px; width: 500px; height: 100px; flex-grow: 1;][/border][comment]

-------tab buttons-----[/comment][border=none; padding: 0px; margin: 10px; width: 140px; flex-grow: 1; background: var(--bg);][border=none; padding: 0px; height: 90px; margin-top: -5px;box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;][comment]
-------button one------[/comment][border=none; padding: 0px; width: 45px; height: 45px; box-sizing: border-box; background: var(--bg); color: var(--unselected); border: 1px solid var(--unselected); text-align: center; align-items: center; font-size: 20px; margin: 5px; display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--title); text-transform: uppercase; font-weight: bold;]i[/border][comment]
-------button two------[/comment][border=none; padding: 0px; width: 45px; height: 45px; box-sizing: border-box; background: var(--bg); color: var(--unselected); border: 1px solid var(--unselected); text-align: center; align-items: center; font-size: 20px; margin: 5px; display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--title); text-transform: uppercase; font-weight: bold;]ii[/border][comment]
-------button three------[/comment][border=none; padding: 0px; width: 45px; height: 45px; box-sizing: border-box; background: var(--bg); color: var(--unselected); border: 1px solid var(--unselected); text-align: center; align-items: center; font-size: 20px; margin: 5px; display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--title); text-transform: uppercase; font-weight: bold;]iii[/border][comment]
-------button four------[/comment][border=none; padding: 0px; width: 45px; height: 45px; box-sizing: border-box; background: var(--bg); color: var(--accent); border: 1px solid var(--accent); text-align: center; align-items: center; font-size: 20px; margin: 5px; display: flex; flex-direction: column; justify-content: space-evenly; font-family: var(--title); text-transform: uppercase; font-weight: bold;]iv[/border][comment]
-----end of buttons------[/comment][/border][/border][comment]

---------end of the header-------[/comment][/border][comment]

------beginning of main content area------[/comment][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; padding: 10px; box-sizing: border-box; border-top: 1px solid #333;][comment]

-------background info starts here-------[/comment][border=none; padding: 0px; margin: 10px; width: 440px; height: 399px; background: var(--bg); flex-grow: 1; pointer-events: auto;][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 399px; 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; line-height: 22px;][comment]

--------first main event (you can change the heart icon next to the title to anything you want by looking up font awesome icons on google!)-------[/comment][border=none; padding: 0px; height: 40px; background: var(--bg); display: flex; flex-direction: row; position: sticky; top: 0px;][border=none; padding: 0px; min-width: 30px; height: 30px; box-sizing: border-box; border: 1px solid var(--accent); text-align: center; font-size: 15px; display: flex; flex-direction: column; justify-content: space-evenly; margin-right: 10px;][fa]far fa-heart[/fa][/border][border=none; padding: 0px; width: 100%; height: 30px; box-sizing: border-box; border: 1px solid var(--accent); text-align: center; font-size: 14px; font-family: var(--heading); display: flex; flex-direction: column; justify-content: space-evenly; text-transform: uppercase;]childhood[/border][/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet, ipsum nec rutrum luctus, metus est euismod justo, elementum mollis turpis ipsum ac diam. Nunc ac gravida dolor, non feugiat nunc. Morbi pellentesque et lorem ac sollicitudin. Curabitur euismod vehicula urna ut eleifend. Nunc feugiat accumsan blandit. Phasellus consectetur tortor quis neque maximus dapibus. Nunc aliquam volutpat risus eget tempus. Etiam placerat et odio et consequat. Pellentesque et urna ut quam dignissim dictum. Maecenas ultricies, felis eu iaculis tincidunt, odio lorem interdum neque, ut convallis urna velit a lacus. Proin consectetur eros est, sed pulvinar risus lacinia in.

In condimentum, mauris id blandit lobortis, tortor magna facilisis erat, id porttitor nulla lectus in lacus. Nullam ligula eros, ullamcorper eu neque non, dapibus mollis augue. Phasellus molestie malesuada sollicitudin. Fusce odio ante, laoreet in finibus et, fermentum sed ante. Duis a faucibus enim. Donec pharetra vitae lorem accumsan ultrices. Curabitur id venenatis dui. Quisque sit amet laoreet enim, facilisis faucibus metus. Sed diam tellus, accumsan eget ultricies in, laoreet vitae massa. Aenean bibendum, nisl nec tristique venenatis, libero sem malesuada diam, nec tempus metus mi a mauris. Cras ornare blandit lacus, et elementum arcu rutrum id. Etiam vel ultrices neque, sed rutrum lorem. Vestibulum et libero massa. Quisque ut enim nec neque eleifend molestie. Praesent feugiat interdum pretium. Aliquam turpis ex, tristique in mollis ut, lobortis ultrices enim.

[comment]--------second main event-------[/comment][border=none; padding: 0px; height: 40px; background: var(--bg); display: flex; flex-direction: row; position: sticky; top: 0px;][border=none; padding: 0px; min-width: 30px; height: 30px; box-sizing: border-box; border: 1px solid var(--accent); text-align: center; font-size: 15px; display: flex; flex-direction: column; justify-content: space-evenly; margin-right: 10px;][fa]far fa-heart[/fa][/border][border=none; padding: 0px; width: 100%; height: 30px; box-sizing: border-box; border: 1px solid var(--accent); text-align: center; font-size: 14px; font-family: var(--heading); display: flex; flex-direction: column; justify-content: space-evenly; text-transform: uppercase;]teenage years[/border][/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet, ipsum nec rutrum luctus, metus est euismod justo, elementum mollis turpis ipsum ac diam. Nunc ac gravida dolor, non feugiat nunc. Morbi pellentesque et lorem ac sollicitudin. Curabitur euismod vehicula urna ut eleifend. Nunc feugiat accumsan blandit. Phasellus consectetur tortor quis neque maximus dapibus. Nunc aliquam volutpat risus eget tempus. Etiam placerat et odio et consequat. Pellentesque et urna ut quam dignissim dictum. Maecenas ultricies, felis eu iaculis tincidunt, odio lorem interdum neque, ut convallis urna velit a lacus. Proin consectetur eros est, sed pulvinar risus lacinia in.

In condimentum, mauris id blandit lobortis, tortor magna facilisis erat, id porttitor nulla lectus in lacus. Nullam ligula eros, ullamcorper eu neque non, dapibus mollis augue. Phasellus molestie malesuada sollicitudin. Fusce odio ante, laoreet in finibus et, fermentum sed ante. Duis a faucibus enim. Donec pharetra vitae lorem accumsan ultrices. Curabitur id venenatis dui. Quisque sit amet laoreet enim, facilisis faucibus metus. Sed diam tellus, accumsan eget ultricies in, laoreet vitae massa. Aenean bibendum, nisl nec tristique venenatis, libero sem malesuada diam, nec tempus metus mi a mauris. Cras ornare blandit lacus, et elementum arcu rutrum id. Etiam vel ultrices neque, sed rutrum lorem. Vestibulum et libero massa. Quisque ut enim nec neque eleifend molestie. Praesent feugiat interdum pretium. Aliquam turpis ex, tristique in mollis ut, lobortis ultrices enim.

[comment]--------third main event-------[/comment][border=none; padding: 0px; height: 40px; background: var(--bg); display: flex; flex-direction: row; position: sticky; top: 0px;][border=none; padding: 0px; min-width: 30px; height: 30px; box-sizing: border-box; border: 1px solid var(--accent); text-align: center; font-size: 15px; display: flex; flex-direction: column; justify-content: space-evenly; margin-right: 10px;][fa]far fa-heart[/fa][/border][border=none; padding: 0px; width: 100%; height: 30px; box-sizing: border-box; border: 1px solid var(--accent); text-align: center; font-size: 14px; font-family: var(--heading); display: flex; flex-direction: column; justify-content: space-evenly; text-transform: uppercase;]entering adulthood[/border][/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet, ipsum nec rutrum luctus, metus est euismod justo, elementum mollis turpis ipsum ac diam. Nunc ac gravida dolor, non feugiat nunc. Morbi pellentesque et lorem ac sollicitudin. Curabitur euismod vehicula urna ut eleifend. Nunc feugiat accumsan blandit. Phasellus consectetur tortor quis neque maximus dapibus. Nunc aliquam volutpat risus eget tempus. Etiam placerat et odio et consequat. Pellentesque et urna ut quam dignissim dictum. Maecenas ultricies, felis eu iaculis tincidunt, odio lorem interdum neque, ut convallis urna velit a lacus. Proin consectetur eros est, sed pulvinar risus lacinia in.

In condimentum, mauris id blandit lobortis, tortor magna facilisis erat, id porttitor nulla lectus in lacus. Nullam ligula eros, ullamcorper eu neque non, dapibus mollis augue. Phasellus molestie malesuada sollicitudin. Fusce odio ante, laoreet in finibus et, fermentum sed ante. Duis a faucibus enim. Donec pharetra vitae lorem accumsan ultrices. Curabitur id venenatis dui. Quisque sit amet laoreet enim, facilisis faucibus metus. Sed diam tellus, accumsan eget ultricies in, laoreet vitae massa. Aenean bibendum, nisl nec tristique venenatis, libero sem malesuada diam, nec tempus metus mi a mauris. Cras ornare blandit lacus, et elementum arcu rutrum id. Etiam vel ultrices neque, sed rutrum lorem. Vestibulum et libero massa. Quisque ut enim nec neque eleifend molestie. Praesent feugiat interdum pretium. Aliquam turpis ex, tristique in mollis ut, lobortis ultrices enim.
[/border][/border][/border][/border][comment]

-------fourth image-------[/comment][border=none; padding: 0px; margin: 10px; width: 200px; height: 399px; background: var(--img4); background-size: cover; background-position: 50% 0%; flex-grow: 1;][/border][comment]

-------end of main content area-------[/comment][/border][comment]

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




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

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


------filler tabs (ignore)------[/comment][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; padding: 10px;][border=none; padding: 0px; margin: 10px; width: 320px; height: 400px; flex-grow: 1;][/border][border=none; padding: 0px; margin: 10px; width: 320px; height: 400px;  flex-grow: 1;][/border][/border][comment]
------end of filler tabs-----[/comment][comment]


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

------credit (don't remove!)-----[/comment][border=none; padding: 0px; margin-top: 10px; text-align: center;][border=none; padding: 0px; display: inline-block; background: var(--accent); text-transform: uppercase; font-size: 9px; letter-spacing: 1px; font-weight: bold; padding: 4px 7px; color: var(--credit);]coded by natasha.[/border][/border][/border]