[comment]-------fonts--------- [font=Montserrat]headings[/font] [font=Karla]body[/font] [/comment][border=none; padding: 10px; --accent: #ebbd34; --fade: rgb(235, 189, 52, 0.2); --dark: #111; --darkalt: #111; --border: #333; --light: #fff; --unselected: #333; --fontcolor: #fff; --img1: url(https://uploads.chicmanagement.com.au/2017/03/GA_MINKPINK_17-02_DISNEY-BEAUTY-AND-THE-BEAST_27.jpg); --img2: url(https://www.bellazon.com/main/uploads/monthly_2017_11/beauty-and-the-beast-lumiere-jacket.jpg.84f225af18f3865a2b91ee54d8cb48a9.jpg); --img3: url(http://62management.com/wp-content/uploads/2017/02/Maia-Cotton-_-62-modelsBeauty-Beast-Clothing-Range-Minkpink-3.jpg); --img4-1: url(https://uploads.chicmanagement.com.au/2017/03/GA_MINKPINK_17-02_DISNEY-BEAUTY-AND-THE-BEAST_04.jpg); --img4-2: url(https://uploads.chicmanagement.com.au/2017/03/GA_MINKPINK_17-02_DISNEY-BEAUTY-AND-THE-BEAST_34.jpg); --img5: url(https://www.bellazon.com/main/uploads/monthly_2017_11/161010_DISNEY_MINKPINK_BB_06_1074.jpeg.dccfc3cff574919cd904b501e8c0c411.jpeg); --img6: url(http://62management.com/wp-content/uploads/2017/02/Maia-Cotton-_-62-modelsBeauty-Beast-Clothing-Range-Minkpink-5.jpg); --gimg1: url(https://www.bellazon.com/main/uploads/monthly_2017_11/Beauty-Beast-Clothing-Range-Minkpink-7.jpg.c03f03f2b26d966a5822ad8d68c0f9f2.jpg); --gimg2: url(https://www.bellazon.com/main/uploads/monthly_2017_11/161010_disney_minkpink_bb_43_4216.1510805491.jpg.712b699b6fef17fc81ef9aa43f436f90.jpg); --gimg3: url(https://uploads.chicmanagement.com.au/2017/03/GA_MINKPINK_17-02_DISNEY-BEAUTY-AND-THE-BEAST_01.jpg); --gimg4: url(https://www.bellazon.com/main/uploads/monthly_2017_11/minkpink-beauty-and-the-beast-8-750x1125.jpg.3157d535cfbc6783221473b0b2ae554c.jpg); --rimg1: url(https://peacemakersnetwork.org/wp-content/uploads/2019/09/placeholder.jpg); --rimg2: url(https://peacemakersnetwork.org/wp-content/uploads/2019/09/placeholder.jpg); --rimg3: url(https://peacemakersnetwork.org/wp-content/uploads/2019/09/placeholder.jpg); --rimg4: url(https://peacemakersnetwork.org/wp-content/uploads/2019/09/placeholder.jpg); max-width: 800px; background: var(--dark); box-sizing: border-box; margin: auto; color: var(--fontcolor); font-family: Karla; font-size: 12px;][comment] ---------container--------- [/comment][border=none; padding: 0px; width: 100%; position: relative;][comment] ---------tabs--------- [/comment][border=none; padding: 0px; height: 30px; margin-top: 10px; overflow: hidden; display: flex; flex-direction: row; letter-spacing: -20px; justify-content: center;][tabs][comment] --------first tab------- [/comment][tab=o][border=none; padding: 0px; background: var(--dark); position: absolute; bottom: 0; left:0; right: 0; top: 0; letter-spacing: 0; pointer-events: none;][comment] -----tab cover----- [/comment][border=none; padding: 0px; margin-left: 10px; margin-right: 10px; height: 30px; overflow: hidden; background: var(--dark); color: var(--unselected); padding-top: 14px; box-sizing: border-box;][border=none; padding: 0px; height: 1px; background: var(--unselected);][/border][border=none; padding: 0px; margin-top: -16px; width: 100%; display: flex; flex-direction: row; justify-content: center;][border=none; padding: 0px; height: 30px; width: 55px; font-size: 20px; text-align: center; color: var(--accent); background: var(--dark);][fa]fal fa-home[/fa][/border][border=none; padding: 0px; height: 30px; width: 55px; font-size: 20px; text-align: center; background: var(--dark);][fa]fal fa-user[/fa][/border][border=none; padding: 0px; height: 30px; width: 55px; font-size: 20px; text-align: center; background: var(--dark);][fa]fal fa-comment[/fa][/border][border=none; padding: 0px; height: 30px; width: 55px; font-size: 20px; text-align: center; background: var(--dark);][fa]fal fa-book[/fa][/border][border=none; padding: 0px; height: 30px; width: 55px; font-size: 20px; text-align: center; background: var(--dark);][fa]fal fa-link[/fa][/border][/border][/border][comment] -----content----- [/comment][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 10px; pointer-events: auto;][comment] -----left side------ [/comment][border=none; padding: 0px; margin: 10px; width: 300px; height: 400px; flex-grow: 1;][comment] ------first image-----[/comment][border=none; padding: 0px; height: 310px; background: var(--img1); background-size: cover; background-position: 50% 10%; box-sizing: border-box; padding: 10px; text-align: center;][/border][comment] ----music player-----[/comment][border=none; padding: 0px; height: 75px; background: var(--dark); box-sizing: border-box; margin-top: 15px; text-align: center;][comment] -----details------[/comment][border=none; padding: 0px; display: flex; flex-direction: row; justify-content: space-between; margin-bottom: -15px;][border=none; padding: 0px; text-transform: lowercase; font-family: Montserrat; color: var(--accent); font-size: 20px;]riptide[/border][border=none; padding: 0px; font-family: Karla; text-transform: uppercase; letter-spacing: 2px; font-size: 9px; margin-top: 8px;]unlike pluto[/border][/border] [border=none; padding: 0px; height: 3px; margin-top: 10px; margin-bottom: 5px; border-radius: 15px; background: var(--unselected); overflow: hidden; width: 100%; margin: auto;][border=none; padding: 0px; height: 100%; background: var(--accent); width: 30%; border-radius: 15px;][/border][/border][border=none; padding: 0px; height: 30px; display: flex; flex-direction: row; justify-content: space-evenly; font-size: 14px; margin-top: 5px; ][comment] -----prev track button-----[/comment][border=none; padding: 0px; height: 30px; width: 30px; background: var(--dark); display: flex; flex-direction: column; justify-content: space-evenly;][fa]fas fa-backward[/fa][/border][comment] -----------play button----------[/comment][border=none; padding: 0px; height: 30px; width: 30px; overflow: hidden; background: #fff;] [border=none; padding: 0px; height: 100px; width: 500px; margin-top: -345px; margin-left: -95px; padding:0px;] [media=googledrive]1fSZcCAhawYJuUW-lmF9xGR-PdnoA5lb6[/MEDIA] [/border][border=none; padding: 0px; height: 35px; width: 30px; box-sizing: border-box; padding-bottom: 4px; background: var(--dark); position: relative; pointer-events: none; margin-top: 220px; color: var(--accent); display: flex; flex-direction: column; justify-content: space-evenly; font-size: 14px;][fa]fas fa-play[/fa][/border][/border][comment] -----next track button-----[/comment][border=none; padding: 0px; height: 30px; width: 30px; background: var(--dark); display: flex; flex-direction: column; justify-content: space-evenly;][fa]fas fa-forward[/fa][/border][comment] -------end of music player----------[/comment][/border][comment] -------end of left side-------[/comment][/border][/border][comment] --------right side------- [/comment][border=none; padding: 0px; width: 440px; height: 410px; flex-grow: 1;][comment] ----details / scroll box---- [/comment][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 280px; 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;][comment] ----first set----- [/comment][border=none; padding: 0px; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap;][comment] ----full name----- [/comment][border=none; padding: 0px; background: var(--darkalt); box-sizing: border-box; margin: 10px; width: 200px; height: 50px; flex-grow: 1; display: flex; flex-direction: row;][border=none; padding: 0px; height: 50px; width: 50px; font-size: 20px; text-align: center; font-family: Montserrat; color: var(--accent); display: flex; flex-direction: column; justify-content: space-evenly; border-right: 1px solid var(--border);]01[/border][border=none; padding: 0px; box-sizing: border-box; padding: 8px 10px 0px 15px; line-height: 16px;][border=none; padding: 0px; text-transform: uppercase; font-family: Montserrat; letter-spacing: 2px; color: var(--accent);]name[/border]name here[/border][/border][comment] ----nickname/s---- [/comment][border=none; padding: 0px; background: var(--darkalt); box-sizing: border-box; margin: 10px; width: 200px; height: 50px; flex-grow: 1; display: flex; flex-direction: row;][border=none; padding: 0px; height: 50px; width: 50px; font-size: 20px; text-align: center; font-family: Montserrat; color: var(--accent); display: flex; flex-direction: column; justify-content: space-evenly; border-right: 1px solid var(--border);]02[/border][border=none; padding: 0px; box-sizing: border-box; padding: 8px 10px 0px 15px; line-height: 16px;][border=none; padding: 0px; text-transform: uppercase; font-family: Montserrat; letter-spacing: 2px; color: var(--accent);]nickname[/border]nickname here[/border][/border][/border][comment] ----second set------ [/comment][border=none; padding: 0px; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap;][comment] ----age----- [/comment][border=none; padding: 0px; background: var(--darkalt); box-sizing: border-box; margin: 10px; width: 200px; height: 50px; flex-grow: 1; display: flex; flex-direction: row;][border=none; padding: 0px; height: 50px; width: 50px; font-size: 20px; text-align: center; font-family: Montserrat; color: var(--accent); display: flex; flex-direction: column; justify-content: space-evenly; border-right: 1px solid var(--border);]03[/border][border=none; padding: 0px; box-sizing: border-box; padding: 8px 10px 0px 15px; line-height: 16px;][border=none; padding: 0px; text-transform: uppercase; font-family: Montserrat; letter-spacing: 2px; color: var(--accent);]age[/border]age here[/border][/border][comment] ----date of birth---- [/comment][border=none; padding: 0px; background: var(--darkalt); box-sizing: border-box; margin: 10px; width: 200px; height: 50px; flex-grow: 1; display: flex; flex-direction: row;][border=none; padding: 0px; height: 50px; width: 50px; font-size: 20px; text-align: center; font-family: Montserrat; color: var(--accent); display: flex; flex-direction: column; justify-content: space-evenly; border-right: 1px solid var(--border);]04[/border][border=none; padding: 0px; box-sizing: border-box; padding: 8px 10px 0px 15px; line-height: 16px;][border=none; padding: 0px; text-transform: uppercase; font-family: Montserrat; letter-spacing: 2px; color: var(--accent);]date of birth[/border]d.o.b here[/border][/border][/border][comment] ----third set------ [/comment][border=none; padding: 0px; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap;][comment] ----gender----- [/comment][border=none; padding: 0px; background: var(--darkalt); box-sizing: border-box; margin: 10px; width: 200px; height: 50px; flex-grow: 1; display: flex; flex-direction: row;][border=none; padding: 0px; height: 50px; width: 50px; font-size: 20px; text-align: center; font-family: Montserrat; color: var(--accent); display: flex; flex-direction: column; justify-content: space-evenly; border-right: 1px solid var(--border);]05[/border][border=none; padding: 0px; box-sizing: border-box; padding: 8px 10px 0px 15px; line-height: 16px;][border=none; padding: 0px; text-transform: uppercase; font-family: Montserrat; letter-spacing: 2px; color: var(--accent);]gender[/border]gender here[/border][/border][comment] ----sexuality---- [/comment][border=none; padding: 0px; background: var(--darkalt); box-sizing: border-box; margin: 10px; width: 200px; height: 50px; flex-grow: 1; display: flex; flex-direction: row;][border=none; padding: 0px; height: 50px; width: 50px; font-size: 20px; text-align: center; font-family: Montserrat; color: var(--accent); display: flex; flex-direction: column; justify-content: space-evenly; border-right: 1px solid var(--border);]06[/border][border=none; padding: 0px; box-sizing: border-box; padding: 8px 10px 0px 15px; line-height: 16px;][border=none; padding: 0px; text-transform: uppercase; font-family: Montserrat; letter-spacing: 2px; color: var(--accent);]sexuality[/border]sexuality here[/border][/border][/border][comment] ----fourth set------ [/comment][border=none; padding: 0px; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap;][comment] ----occupation----- [/comment][border=none; padding: 0px; background: var(--darkalt); box-sizing: border-box; margin: 10px; width: 200px; height: 50px; flex-grow: 1; display: flex; flex-direction: row;][border=none; padding: 0px; height: 50px; width: 50px; font-size: 20px; text-align: center; font-family: Montserrat; color: var(--accent); display: flex; flex-direction: column; justify-content: space-evenly; border-right: 1px solid var(--border);]07[/border][border=none; padding: 0px; box-sizing: border-box; padding: 8px 10px 0px 15px; line-height: 16px;][border=none; padding: 0px; text-transform: uppercase; font-family: Montserrat; letter-spacing: 2px; color: var(--accent);]occupation[/border]occupation here[/border][/border][comment] ----role---- [/comment][border=none; padding: 0px; background: var(--darkalt); box-sizing: border-box; margin: 10px; width: 200px; height: 50px; flex-grow: 1; display: flex; flex-direction: row;][border=none; padding: 0px; height: 50px; width: 50px; font-size: 20px; text-align: center; font-family: Montserrat; color: var(--accent); display: flex; flex-direction: column; justify-content: space-evenly; border-right: 1px solid var(--border);]08[/border][border=none; padding: 0px; box-sizing: border-box; padding: 8px 10px 0px 15px; line-height: 16px;][border=none; padding: 0px; text-transform: uppercase; font-family: Montserrat; letter-spacing: 2px; color: var(--accent);]role[/border]role name here[/border][/border][/border][comment] -----end of details------ [/comment][/border][/border][/border][comment] ------2 pictures-------- [/comment][border=none; padding: 0px; display: flex; flex-direction: row;][border=none; padding: 0px; margin-top: 10px; margin-left: 10px; margin-right: 10px; background: var(--img2); background-size: cover; background-position: 50% 0%; width: 50%; height: 120px;][/border][border=none; padding: 0px; margin-top: 10px; margin-left: 10px; margin-right: 10px; background: var(--img3); background-size: cover; background-position: 50% 20%; width: 50%; height: 120px;][/border][/border][/border][/border][comment] -------end of content / first tab------[/comment][/border][/tab][comment] -------second tab--------- [/comment][tab=o][border=none; padding: 0px; background: var(--dark); position: absolute; bottom: 0; left:0; right: 0; top: 0; color: #fff; letter-spacing: 0; pointer-events: none;][comment] -----tab cover----- [/comment][border=none; padding: 0px; margin-left: 10px; margin-right: 10px; height: 30px; overflow: hidden; background: var(--dark); color: var(--unselected); padding-top: 14px; box-sizing: border-box;][border=none; padding: 0px; height: 1px; background: var(--unselected);][/border][border=none; padding: 0px; margin-top: -16px; width: 100%; display: flex; flex-direction: row; justify-content: center;][border=none; padding: 0px; height: 30px; width: 55px; font-size: 20px; text-align: center; background: var(--dark);][fa]fal fa-home[/fa][/border][border=none; padding: 0px; height: 30px; width: 55px; font-size: 20px; text-align: center; background: var(--dark); color: var(--accent);][fa]fal fa-user[/fa][/border][border=none; padding: 0px; height: 30px; width: 55px; font-size: 20px; text-align: center; background: var(--dark);][fa]fal fa-comment[/fa][/border][border=none; padding: 0px; height: 30px; width: 55px; font-size: 20px; text-align: center; background: var(--dark);][fa]fal fa-book[/fa][/border][border=none; padding: 0px; height: 30px; width: 55px; font-size: 20px; text-align: center; background: var(--dark);][fa]fal fa-link[/fa][/border][/border][/border][comment] -----content----- [/comment][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 10px;][comment] -----left / scrollbox----- [/comment][border=none; padding: 0px; margin: 10px; width: 370px; height: 400px; 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; line-height: 20px;][comment] ------appearance details----- [/comment][border=none; padding: 0px; font-family: Montserrat; font-size: 18px; color: var(--accent); margin-bottom: -10px;]hair colour / style[/border] [border=none; padding: 0px; border-left: 2px solid var(--accent); padding-left: 15px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at nunc sem. Maecenas sed sapien dapibus, ullamcorper erat nec, interdum odio. Phasellus at nibh gravida nibh maximus condimentum nec vel felis.[/border][comment] ------eyes-----[/comment][border=none; padding: 0px; font-family: Montserrat; font-size: 18px; color: var(--accent); margin-bottom: -10px; margin-top: 23px;]eyes[/border] [border=none; padding: 0px; border-left: 2px solid var(--accent); padding-left: 15px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at nunc sem. Maecenas sed sapien dapibus, ullamcorper erat nec, interdum odio. Phasellus at nibh gravida nibh maximus condimentum nec vel felis.[/border][comment] ------build-----[/comment][border=none; padding: 0px; font-family: Montserrat; font-size: 18px; color: var(--accent); margin-bottom: -10px; margin-top: 23px;]build[/border] [border=none; padding: 0px; border-left: 2px solid var(--accent); padding-left: 15px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at nunc sem. Maecenas sed sapien dapibus, ullamcorper erat nec, interdum odio. Phasellus at nibh gravida nibh maximus condimentum nec vel felis. Curabitur vel enim viverra, efficitur lacus vel, commodo orci. Etiam semper porttitor dolor non aliquet. Integer non sem a augue dapibus convallis. [/border][comment] ------attire-----[/comment][border=none; padding: 0px; font-family: Montserrat; font-size: 18px; color: var(--accent); margin-bottom: -10px; margin-top: 23px;]attire[/border] [border=none; padding: 0px; border-left: 2px solid var(--accent); padding-left: 15px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at nunc sem. Maecenas sed sapien dapibus, ullamcorper erat nec, interdum odio. Phasellus at nibh gravida nibh maximus condimentum nec vel felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at nunc sem. Maecenas sed sapien dapibus, ullamcorper erat nec, interdum odio. Phasellus at nibh gravida nibh maximus condimentum nec vel felis.[/border][comment] ------modifications-----[/comment][border=none; padding: 0px; font-family: Montserrat; font-size: 18px; color: var(--accent); margin-bottom: -10px; margin-top: 23px;]modifications[/border] [border=none; padding: 0px; border-left: 2px solid var(--accent); padding-left: 15px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at nunc sem. Maecenas sed sapien dapibus, ullamcorper erat nec, interdum odio. Phasellus at nibh gravida nibh maximus condimentum nec vel felis.[/border][comment] ------scars / markings-----[/comment][border=none; padding: 0px; font-family: Montserrat; font-size: 18px; color: var(--accent); margin-bottom: -10px; margin-top: 23px;]scars / markings[/border] [border=none; padding: 0px; border-left: 2px solid var(--accent); padding-left: 15px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at nunc sem. Maecenas sed sapien dapibus, ullamcorper erat nec, interdum odio. Phasellus at nibh gravida nibh maximus condimentum nec vel felis.[/border][comment] ------ailments-----[/comment][border=none; padding: 0px; font-family: Montserrat; font-size: 18px; color: var(--accent); margin-bottom: -10px; margin-top: 23px;]physical / health ailments[/border] [border=none; padding: 0px; border-left: 2px solid var(--accent); padding-left: 15px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at nunc sem. Maecenas sed sapien dapibus, ullamcorper erat nec, interdum odio. Phasellus at nibh gravida nibh maximus condimentum nec vel felis.[/border][comment] ------misc-----[/comment][border=none; padding: 0px; font-family: Montserrat; font-size: 18px; color: var(--accent); margin-bottom: -10px; margin-top: 23px;]misc info[/border] [border=none; padding: 0px; border-left: 2px solid var(--accent); padding-left: 15px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at nunc sem. Maecenas sed sapien dapibus, ullamcorper erat nec, interdum odio. Phasellus at nibh gravida nibh maximus condimentum nec vel felis.[/border][comment] ------end of appearance details------[/comment][/border][/border][/border][/border][comment] ------right----- [/comment][border=none; padding: 0px; margin: 10px; width: 370px; height: 400px; flex-grow: 1; display: flex; flex-direction: row;][comment] -------pic 4.1 & weight----- [/comment][border=none; padding: 0px; width: 50%; margin-right: 20px;][border=none; padding: 0px; background: var(--img4-1); background-size: cover; background-position: 50% 50%; height: 310px;][/border][border=none; margin-top: 20px; padding: 0px; height: 70px; box-sizing: border-box; border: 1px solid var(--accent); background: var(--fade); text-align: center;][border=none; padding: 0px; background: var(--accent); padding: 4px; font-family: Montserrat; font-size: 14px;]weight[/border][border=none; padding: 8px;]weight over here[/border][/border][/border][comment] --------pic 4.2 & height------- [/comment][border=none; padding: 0px; width: 50%;][border=none; padding: 0px; height: 70px; box-sizing: border-box; border: 1px solid var(--accent); background: var(--fade); text-align: center;][border=none; padding: 0px; background: var(--accent); padding: 4px; font-family: Montserrat; font-size: 14px;]height[/border][border=none; padding: 8px;]height over here[/border][/border][border=none; padding: 0px; margin-top: 20px; background: var(--img4-2); background-size: cover; background-position: 50% 50%; height: 310px;][/border][/border][/border][/border][comment] -------end of content------[/comment][/border][/tab][comment] -------third tab--------- [/comment][tab=o][border=none; padding: 0px; background: var(--dark); position: absolute; bottom: 0; left:0; right: 0; top: 0; color: #fff; letter-spacing: 0; pointer-events: none;][comment] -----tab cover----- [/comment][border=none; padding: 0px; margin-left: 10px; margin-right: 10px; height: 30px; overflow: hidden; background: var(--dark); color: var(--unselected); padding-top: 14px; box-sizing: border-box;][border=none; padding: 0px; height: 1px; background: var(--unselected);][/border][border=none; padding: 0px; margin-top: -16px; width: 100%; display: flex; flex-direction: row; justify-content: center;][border=none; padding: 0px; height: 30px; width: 55px; font-size: 20px; text-align: center; background: var(--dark);][fa]fal fa-home[/fa][/border][border=none; padding: 0px; height: 30px; width: 55px; font-size: 20px; text-align: center; background: var(--dark);][fa]fal fa-user[/fa][/border][border=none; padding: 0px; height: 30px; width: 55px; font-size: 20px; text-align: center; background: var(--dark); color: var(--accent);][fa]fal fa-comment[/fa][/border][border=none; padding: 0px; height: 30px; width: 55px; font-size: 20px; text-align: center; background: var(--dark);][fa]fal fa-book[/fa][/border][border=none; padding: 0px; height: 30px; width: 55px; font-size: 20px; text-align: center; background: var(--dark);][fa]fal fa-link[/fa][/border][/border][/border][comment] -----content----- [/comment][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 10px;][comment] -----left------ [/comment][border=none; padding: 0px; margin: 10px; width: calc(100% - 20px); max-width: 300px; height: 400px; background: var(--dark); pointer-events: auto;][comment] ------fifth image------- [/comment][border=none; padding: 0px; height: 120px; background: var(--img5); background-size: cover; background-position: 50% 50%;][/border][comment] ----persona tidbits---- [/comment][border=none; padding: 0px; margin-top: 20px; height: 260px; position: relative; display: flex; flex-direction: row;][border=none; padding: 0px; width: 36px; height: 260px; margin-right: 20px; overflow: hidden; display: flex; flex-direction: row; justify-content: center; line-height: 49px;][tabs][comment] -----virtues / tab cover-----[/comment][tab=o][border=none; padding: 0px; position: absolute; background: var(--dark); top: 0; left: 0; right: 0; bottom: 0; line-height: 15px; pointer-events: none;][border=none; padding: 0px; display: flex; flex-direction: row;][border=none; padding: 0px; width: 36px; height: 260px; margin-right: 20px;][border=none; padding: 0px; height: 36px; width: 36px; box-sizing: border-box; border: 1px solid var(--accent); color: var(--accent); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;][fa]fal fa-plus[/fa][/border][border=none; padding: 0px; margin-top: 20px; height: 36px; width: 36px; box-sizing: border-box; border: 1px solid var(--unselected); color: var(--unselected); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;][fa]fal fa-minus[/fa][/border][border=none; padding: 0px; margin-top: 20px; height: 36px; width: 36px; box-sizing: border-box; border: 1px solid var(--unselected); color: var(--unselected); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;][fa]fal fa-heart[/fa][/border][border=none; padding: 0px; margin-top: 20px; height: 36px; width: 36px; box-sizing: border-box; border: 1px solid var(--unselected); color: var(--unselected); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;][fa]fal fa-random[/fa][/border][border=none; padding: 0px; margin-top: 20px; height: 36px; width: 36px; box-sizing: border-box; border: 1px solid var(--unselected); color: var(--unselected); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;][fa]fal fa-star[/fa][/border][/border][comment] -------virtues content comes here-------[/comment][border=none; padding: 0px; width: 244px; height: 260px; text-align: justify; pointer-events: auto;][border=none; padding: 0px; height: 30px; font-family: Montserrat; color: var(--accent); font-size: 34px; text-align: right; line-height: 29px;]virtues[/border][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 210px; 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;][comment] -----trait one-----[/comment][border=none; padding: 0px; height: 34px; box-sizing: border-box; border: 1px solid var(--accent); background: var(--fade); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;]trait one[/border][comment] -----trait two-----[/comment][border=none; padding: 0px; margin-top: 10px; height: 34px; box-sizing: border-box; border: 1px solid var(--accent); background: var(--fade); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;]trait two[/border][comment] -----trait three-----[/comment][border=none; padding: 0px; margin-top: 10px; height: 34px; box-sizing: border-box; border: 1px solid var(--accent); background: var(--fade); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;]trait three[/border][comment] -----trait four-----[/comment][border=none; padding: 0px; margin-top: 10px; height: 34px; box-sizing: border-box; border: 1px solid var(--accent); background: var(--fade); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;]trait four[/border][comment] -----trait five-----[/comment][border=none; padding: 0px; margin-top: 10px; height: 34px; box-sizing: border-box; border: 1px solid var(--accent); background: var(--fade); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;]trait five[/border][comment] -----trait six / you can remove this one if you want! it's just to show you that the box scrolls if you add more-----[/comment][border=none; padding: 0px; margin-top: 10px; height: 34px; box-sizing: border-box; border: 1px solid var(--accent); background: var(--fade); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;]trait six[/border][comment] -----end of virtues -----[/comment][/border][/border][/border][/border][/border][/border][/tab][comment] -------vices------[/comment][tab=o][border=none; padding: 0px; position: absolute; background: var(--dark); top: 0; left: 0; right: 0; bottom: 0; line-height: 15px; pointer-events: none;][border=none; padding: 0px; display: flex; flex-direction: row;][border=none; padding: 0px; width: 36px; height: 260px; margin-right: 20px;][border=none; padding: 0px; height: 36px; width: 36px; box-sizing: border-box; border: 1px solid var(--unselected); color: var(--unselected); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;][fa]fal fa-plus[/fa][/border][border=none; padding: 0px; margin-top: 20px; height: 36px; width: 36px; box-sizing: border-box; border: 1px solid var(--accent); color: var(--accent); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;][fa]fal fa-minus[/fa][/border][border=none; padding: 0px; margin-top: 20px; height: 36px; width: 36px; box-sizing: border-box; border: 1px solid var(--unselected); color: var(--unselected); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;][fa]fal fa-heart[/fa][/border][border=none; padding: 0px; margin-top: 20px; height: 36px; width: 36px; box-sizing: border-box; border: 1px solid var(--unselected); color: var(--unselected); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;][fa]fal fa-random[/fa][/border][border=none; padding: 0px; margin-top: 20px; height: 36px; width: 36px; box-sizing: border-box; border: 1px solid var(--unselected); color: var(--unselected); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;][fa]fal fa-star[/fa][/border][/border][comment] -------vices content comes here-------[/comment][border=none; padding: 0px; width: 244px; height: 260px; text-align: justify; pointer-events: auto;][border=none; padding: 0px; height: 30px; font-family: Montserrat; color: var(--accent); font-size: 34px; text-align: right; line-height: 29px;]vices[/border][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 210px; 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;][comment] -----trait one-----[/comment][border=none; padding: 0px; height: 34px; box-sizing: border-box; border: 1px solid var(--accent); background: var(--fade); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;]trait one[/border][comment] -----trait two-----[/comment][border=none; padding: 0px; margin-top: 10px; height: 34px; box-sizing: border-box; border: 1px solid var(--accent); background: var(--fade); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;]trait two[/border][comment] -----trait three-----[/comment][border=none; padding: 0px; margin-top: 10px; height: 34px; box-sizing: border-box; border: 1px solid var(--accent); background: var(--fade); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;]trait three[/border][comment] -----trait four-----[/comment][border=none; padding: 0px; margin-top: 10px; height: 34px; box-sizing: border-box; border: 1px solid var(--accent); background: var(--fade); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;]trait four[/border][comment] -----trait five-----[/comment][border=none; padding: 0px; margin-top: 10px; height: 34px; box-sizing: border-box; border: 1px solid var(--accent); background: var(--fade); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;]trait five[/border][comment] -----trait six / you can remove this one if you want! it's just to show you that the box scrolls if you add more-----[/comment][border=none; padding: 0px; margin-top: 10px; height: 34px; box-sizing: border-box; border: 1px solid var(--accent); background: var(--fade); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;]trait six[/border][comment] -----end of vices -----[/comment][/border][/border][/border][/border][/border][/border][/tab][comment] -------likes & dislikes------[/comment][tab=o][border=none; padding: 0px; position: absolute; background: var(--dark); top: 0; left: 0; right: 0; bottom: 0; line-height: 15px; pointer-events: none;][border=none; padding: 0px; display: flex; flex-direction: row;][border=none; padding: 0px; width: 36px; height: 260px; margin-right: 20px;][border=none; padding: 0px; height: 36px; width: 36px; box-sizing: border-box; border: 1px solid var(--unselected); color: var(--unselected); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;][fa]fal fa-plus[/fa][/border][border=none; padding: 0px; margin-top: 20px; height: 36px; width: 36px; box-sizing: border-box; border: 1px solid var(--unselected); color: var(--unselected); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;][fa]fal fa-minus[/fa][/border][border=none; padding: 0px; margin-top: 20px; height: 36px; width: 36px; box-sizing: border-box; border: 1px solid var(--accent); color: var(--accent); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;][fa]fal fa-heart[/fa][/border][border=none; padding: 0px; margin-top: 20px; height: 36px; width: 36px; box-sizing: border-box; border: 1px solid var(--unselected); color: var(--unselected); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;][fa]fal fa-random[/fa][/border][border=none; padding: 0px; margin-top: 20px; height: 36px; width: 36px; box-sizing: border-box; border: 1px solid var(--unselected); color: var(--unselected); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;][fa]fal fa-star[/fa][/border][/border][comment] -------likes & dislikes content comes here-------[/comment][border=none; padding: 0px; width: 244px; height: 260px; text-align: justify; pointer-events: auto;][comment] ----likes-----[/comment][border=none; padding: 0px; height: 20px; font-family: Montserrat; color: var(--accent); font-size: 26px; text-align: right; line-height: 22px;]likes[/border][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 95px; margin-top: 10px; 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; line-height: 20px; text-align: justify;][comment] ----like one----[/comment][border=none; padding: 0px 5px; box-sizing: border-box; margin: 5px; background: var(--fade); border: 1px solid var(--accent); display: inline-block;]like one[/border][comment] ---like two----[/comment][border=none; padding: 0px 5px; box-sizing: border-box; margin: 5px; background: var(--fade); border: 1px solid var(--accent); display: inline-block;]like two[/border][comment] ---like three----[/comment][border=none; padding: 0px 5px; box-sizing: border-box; margin: 5px; background: var(--fade); border: 1px solid var(--accent); display: inline-block;]like three[/border][comment] ---like four----[/comment][border=none; padding: 0px 5px; box-sizing: border-box; margin: 5px; background: var(--fade); border: 1px solid var(--accent); display: inline-block;]like four[/border][comment] ---like five----[/comment][border=none; padding: 0px 5px; box-sizing: border-box; margin: 5px; background: var(--fade); border: 1px solid var(--accent); display: inline-block;]like five & six[/border][comment] ---like six----[/comment][border=none; padding: 0px 5px; box-sizing: border-box; margin: 5px; background: var(--fade); border: 1px solid var(--accent); display: inline-block;]like something[/border][comment] ---like six----[/comment][border=none; padding: 0px 5px; box-sizing: border-box; margin: 5px; background: var(--fade); border: 1px solid var(--accent); display: inline-block;]like something[/border][comment] ---like seven----[/comment][border=none; padding: 0px 5px; box-sizing: border-box; margin: 5px; background: var(--fade); border: 1px solid var(--accent); display: inline-block;]like something[/border][comment] ----end of likes----[/comment][/border][/border][/border][comment] -----dislikes-----[/comment][border=none; padding: 0px; height: 20px; font-family: Montserrat; color: var(--accent); font-size: 26px; text-align: right; line-height: 22px; margin-top: 10px;]dislikes[/border][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 95px; margin-top: 10px; 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; line-height: 20px; text-align: justify;][comment] ----dislike one----[/comment][border=none; padding: 0px 5px; box-sizing: border-box; margin: 5px; background: var(--fade); border: 1px solid var(--accent); display: inline-block;]dislike one[/border][comment] ---dislike two----[/comment][border=none; padding: 0px 5px; box-sizing: border-box; margin: 5px; background: var(--fade); border: 1px solid var(--accent); display: inline-block;]dislike two[/border][comment] ---dislike three----[/comment][border=none; padding: 0px 5px; box-sizing: border-box; margin: 5px; background: var(--fade); border: 1px solid var(--accent); display: inline-block;]dislike three[/border][comment] ---dislike four----[/comment][border=none; padding: 0px 5px; box-sizing: border-box; margin: 5px; background: var(--fade); border: 1px solid var(--accent); display: inline-block;]dislike four[/border][comment] ---dislike five----[/comment][border=none; padding: 0px 5px; box-sizing: border-box; margin: 5px; background: var(--fade); border: 1px solid var(--accent); display: inline-block;]dislike five & six[/border][comment] ---dislike six----[/comment][border=none; padding: 0px 5px; box-sizing: border-box; margin: 5px; background: var(--fade); border: 1px solid var(--accent); display: inline-block;]dislike something[/border][comment] ---dislike seven----[/comment][border=none; padding: 0px 5px; box-sizing: border-box; margin: 5px; background: var(--fade); border: 1px solid var(--accent); display: inline-block;]dislike something[/border][comment] ----end of likes----[/comment][/border][/border][/border][comment] --------end of likes & dislikes----------[/comment][/border][/border][/border][/tab][comment] -------misc------[/comment][tab=o][border=none; padding: 0px; position: absolute; background: var(--dark); top: 0; left: 0; right: 0; bottom: 0; line-height: 15px; pointer-events: none;][border=none; padding: 0px; display: flex; flex-direction: row;][border=none; padding: 0px; width: 36px; height: 260px; margin-right: 20px;][border=none; padding: 0px; height: 36px; width: 36px; box-sizing: border-box; border: 1px solid var(--unselected); color: var(--unselected); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;][fa]fal fa-plus[/fa][/border][border=none; padding: 0px; margin-top: 20px; height: 36px; width: 36px; box-sizing: border-box; border: 1px solid var(--unselected); color: var(--unselected); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;][fa]fal fa-minus[/fa][/border][border=none; padding: 0px; margin-top: 20px; height: 36px; width: 36px; box-sizing: border-box; border: 1px solid var(--unselected); color: var(--unselected); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;][fa]fal fa-heart[/fa][/border][border=none; padding: 0px; margin-top: 20px; height: 36px; width: 36px; box-sizing: border-box; border: 1px solid var(--accent); color: var(--accent); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;][fa]fal fa-random[/fa][/border][border=none; padding: 0px; margin-top: 20px; height: 36px; width: 36px; box-sizing: border-box; border: 1px solid var(--unselected); color: var(--unselected); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;][fa]fal fa-star[/fa][/border][/border][comment] -------misc content comes here-------[/comment][border=none; padding: 0px; width: 244px; height: 260px; text-align: justify; pointer-events: auto;][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 260px; 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; line-height: 20px; text-align: justify;][comment] ------strengths------[/comment][border=none; padding: 0px; background: var(--dark); top: 0%; position: sticky;][border=none; padding: 0px; box-sizing: border-box; padding: 10px; height: 30px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; border: 1px solid var(--accent); background: var(--fade); font-size: 15px; font-family: Montserrat;]strengths[/border][/border][border=none; padding: 0px; margin-left: 10px; margin-top: 10px; margin-right: 10px;]strength info comes here. lorem ipsum dolor sit amet, consectetur adipiscing elit. nunc vulputate, metus in sodales molestie.[/border][comment] ------weaknesses------[/comment][border=none; padding: 0px; margin-top: 20px; background: var(--dark); top: 0%; position: sticky;][border=none; padding: 0px; box-sizing: border-box; padding: 10px; height: 30px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; border: 1px solid var(--accent); background: var(--fade); font-size: 15px; font-family: Montserrat;]weaknesses[/border][/border][border=none; padding: 0px; margin-top: 10px; margin-right: 10px;]strength info comes here. lorem ipsum dolor sit amet, consectetur adipiscing elit. nunc vulputate. this box scrolls![/border][comment] ------mentail ailments------[/comment][border=none; padding: 0px; margin-top: 20px; background: var(--dark); top: 0%; position: sticky;][border=none; padding: 0px; box-sizing: border-box; padding: 10px; height: 30px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; border: 1px solid var(--accent); background: var(--fade); font-size: 15px; font-family: Montserrat;]mentail ailments[/border][/border][border=none; padding: 0px; margin-top: 10px; margin-right: 10px;]strength info comes here. lorem ipsum dolor sit amet, consectetur adipiscing elit. nunc vulputate, metus in sodales molestie, purus magna tincidunt leo, in lacinia ipsum dui a ipsum.[/border][comment] ------fears / copy this and paste it right below to get another entire section if you want!------[/comment][border=none; padding: 0px; margin-top: 20px; background: var(--dark); top: 0%; position: sticky;][border=none; padding: 0px; box-sizing: border-box; padding: 10px; height: 30px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; border: 1px solid var(--accent); background: var(--fade); font-size: 15px; font-family: Montserrat;]fears[/border][/border][border=none; padding: 0px; margin-top: 10px; margin-right: 10px;]strength info comes here. lorem ipsum dolor sit amet, consectetur adipiscing elit. nunc vulputate, metus in sodales molestie, purus magna tincidunt leo, in lacinia ipsum dui a ipsum.[/border][comment] ------end of misc content-------[/comment][/border][/border][/border][/border][/border][/border][/tab][comment] -------favourites------[/comment][tab=o][border=none; padding: 0px; position: absolute; background: var(--dark); top: 0; left: 0; right: 0; bottom: 0; line-height: 15px; pointer-events: none;][border=none; padding: 0px; display: flex; flex-direction: row;][border=none; padding: 0px; width: 36px; height: 260px; margin-right: 20px;][border=none; padding: 0px; height: 36px; width: 36px; box-sizing: border-box; border: 1px solid var(--unselected); color: var(--unselected); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;][fa]fal fa-plus[/fa][/border][border=none; padding: 0px; margin-top: 20px; height: 36px; width: 36px; box-sizing: border-box; border: 1px solid var(--unselected); color: var(--unselected); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;][fa]fal fa-minus[/fa][/border][border=none; padding: 0px; margin-top: 20px; height: 36px; width: 36px; box-sizing: border-box; border: 1px solid var(--unselected); color: var(--unselected); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;][fa]fal fa-heart[/fa][/border][border=none; padding: 0px; margin-top: 20px; height: 36px; width: 36px; box-sizing: border-box; border: 1px solid var(--unselected); color: var(--unselected); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;][fa]fal fa-random[/fa][/border][border=none; padding: 0px; margin-top: 20px; height: 36px; width: 36px; box-sizing: border-box; border: 1px solid var(--accent); color: var(--accent); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;][fa]fal fa-star[/fa][/border][/border][comment] -------favourites content comes here-------[/comment][border=none; padding: 0px; width: 244px; height: 260px; text-align: justify; pointer-events: auto;][border=none; padding: 0px; height: 30px; font-family: Montserrat; color: var(--accent); font-size: 34px; text-align: right; line-height: 29px;]favourites[/border][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 210px; 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;][comment] -----favourite colour-----[/comment][border=none; padding: 0px; display: flex; flex-direction: row;][border=none; padding: 0px; width: 34px; height: 34px; background: var(--accent); box-sizing: border-box; padding: 10px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;][fa]fas fa-palette[/fa][/border][border=none; padding: 0px; width: 100%; box-sizing: border-box; padding: 10px; height: 34px; text-align: right; display: flex; flex-direction: column; justify-content: space-evenly; border: 1px solid var(--accent); background: var(--fade);]favourite colour here[/border][/border][comment] -----favourite food-----[/comment][border=none; padding: 0px; margin-top: 10px; display: flex; flex-direction: row;][border=none; padding: 0px; width: 34px; height: 34px; background: var(--accent); box-sizing: border-box; padding: 10px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;][fa]fas fa-utensils[/fa][/border][border=none; padding: 0px; width: 100%; box-sizing: border-box; padding: 10px; height: 34px; text-align: right; display: flex; flex-direction: column; justify-content: space-evenly; border: 1px solid var(--accent); background: var(--fade);]favourite food here[/border][/border][comment] -----favourite song-----[/comment][border=none; padding: 0px; margin-top: 10px; display: flex; flex-direction: row;][border=none; padding: 0px; width: 34px; height: 34px; background: var(--accent); box-sizing: border-box; padding: 10px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;][fa]fas fa-music[/fa][/border][border=none; padding: 0px; width: 100%; box-sizing: border-box; padding: 10px; height: 34px; text-align: right; display: flex; flex-direction: column; justify-content: space-evenly; border: 1px solid var(--accent); background: var(--fade);]favourite song here[/border][/border][comment] -----favourite movie-----[/comment][border=none; padding: 0px; margin-top: 10px; display: flex; flex-direction: row;][border=none; padding: 0px; width: 34px; height: 34px; background: var(--accent); box-sizing: border-box; padding: 10px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;][fa]fas fa-camera-movie[/fa][/border][border=none; padding: 0px; width: 100%; box-sizing: border-box; padding: 10px; height: 34px; text-align: right; display: flex; flex-direction: column; justify-content: space-evenly; border: 1px solid var(--accent); background: var(--fade);]favourite movie here[/border][/border][comment] -----favourite drink-----[/comment][border=none; padding: 0px; margin-top: 10px; display: flex; flex-direction: row;][border=none; padding: 0px; width: 34px; height: 34px; background: var(--accent); box-sizing: border-box; padding: 10px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;][fa]fas fa-cocktail[/fa][/border][border=none; padding: 0px; width: 100%; box-sizing: border-box; padding: 10px; height: 34px; text-align: right; display: flex; flex-direction: column; justify-content: space-evenly; border: 1px solid var(--accent); background: var(--fade);]favourite drink here[/border][/border][comment] -----favourite hobby / you can remove this if you want! it's just to show you that the box is scrollable if you want to add more favourites-----[/comment][border=none; padding: 0px; margin-top: 10px; display: flex; flex-direction: row;][border=none; padding: 0px; width: 34px; height: 34px; background: var(--accent); box-sizing: border-box; padding: 10px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly;][fa]fas fa-running[/fa][/border][border=none; padding: 0px; width: 100%; box-sizing: border-box; padding: 10px; height: 34px; text-align: right; display: flex; flex-direction: column; justify-content: space-evenly; border: 1px solid var(--accent); background: var(--fade);]favourite hobby here[/border][/border][comment] -----end of favourites -----[/comment][/border][/border][/border][/border][/border][/border][/tab][comment] ------end of persona tidbits-----[/comment][/tabs][/border][border=none; padding: 0px; width: 244px; height: 260px;][/border][/border][comment] -----end of vices and virtues-------[/comment][/border][comment] ------right------[/comment][border=none; padding: 0px; margin: 10px; width: 440px; height: 400px; pointer-events: auto; flex-grow: 1;][comment] -----quote / try not to make it more than two lines or it'll look wonky!---- [/comment][border=none; padding: 0px; height: 80px; 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: 10px 10px; display: flex; flex-direction: row;][border=none; padding: 0px; height: 80px; width: 80px; text-align: center; box-sizing: border-box; padding: 10px; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 40px; border-right: 1px solid var(--unselected); color: var(--accent);][fa]fal fa-quote-left[/fa][/border][border=none; padding: 0px; height: 80px; width: 100%; max-width: 360px; box-sizing: border-box; padding: 10px 15px; font-size: 12px; text-align: justify; display: flex; flex-direction: column; justify-content: space-evenly;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in faucibus lorem. Nunc ultricies.[/border][/border][comment] ------personality info-----[/comment][border=none; padding: 0px; height: 300px; margin-top: 20px;][border=none; padding: 0px; height: 30px; font-family: Montserrat; color: var(--accent); font-size: 34px; text-align: right; line-height: 29px;]personality[/border][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 255px; margin-top: 15px; 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; line-height: 20px; text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in faucibus lorem. Nunc ultricies urna non felis ornare, quis scelerisque ligula condimentum. Aenean interdum consequat ornare. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla euismod, sapien eu malesuada aliquam, dui quam pulvinar augue, sit amet sodales lectus lorem at sem. Suspendisse a sem ac nisl imperdiet condimentum. Fusce convallis bibendum mattis. Curabitur efficitur nibh ac purus luctus, et ullamcorper lacus dapibus. Curabitur tincidunt accumsan feugiat. Aliquam pulvinar ex eget magna finibus fringilla. Donec feugiat nunc dui, vel accumsan nulla dignissim eget. Maecenas semper elit vel viverra laoreet. Donec id aliquam tellus, nec lacinia enim.Cras dignissim facilisis ligula eget tristique. Etiam a eleifend sapien. Morbi sagittis vitae tortor quis consectetur. Vestibulum justo sapien, accumsan vitae lorem sit amet, hendrerit efficitur ipsum. Morbi nec mauris turpis. Etiam tristique, ex quis eleifend vulputate, velit mi cursus ex, ut bibendum sem orci eget erat. Pellentesque bibendum pretium est a sagittis. Pellentesque sollicitudin aliquet ipsum, at finibus orci varius a. Quisque ac auctor ligula. Donec pharetra semper massa, ut cursus mauris porta eu. Vestibulum at leo fermentum, auctor leo imperdiet, vestibulum est. Suspendisse diam erat, tristique quis vulputate vel, volutpat nec nulla. Fusce eu risus dolor. Nunc sit amet sollicitudin nunc. Maecenas id accumsan nunc.[/border][/border][/border][/border][/border][/border][comment] -------end of content------[/comment][/border][/tab][comment] -------fourth tab--------- [/comment][tab=o][border=none; padding: 0px; background: var(--dark); position: absolute; bottom: 0; left:0; right: 0; top: 0; color: #fff; letter-spacing: 0; pointer-events: none;][comment] -----tab cover----- [/comment][border=none; padding: 0px; margin-left: 10px; margin-right: 10px; height: 30px; overflow: hidden; background: var(--dark); color: var(--unselected); padding-top: 14px; box-sizing: border-box;][border=none; padding: 0px; height: 1px; background: var(--unselected);][/border][border=none; padding: 0px; margin-top: -16px; width: 100%; display: flex; flex-direction: row; justify-content: center;][border=none; padding: 0px; height: 30px; width: 55px; font-size: 20px; text-align: center; background: var(--dark);][fa]fal fa-home[/fa][/border][border=none; padding: 0px; height: 30px; width: 55px; font-size: 20px; text-align: center; background: var(--dark);][fa]fal fa-user[/fa][/border][border=none; padding: 0px; height: 30px; width: 55px; font-size: 20px; text-align: center; background: var(--dark);][fa]fal fa-comment[/fa][/border][border=none; padding: 0px; height: 30px; width: 55px; font-size: 20px; text-align: center; background: var(--dark); color: var(--accent);][fa]fal fa-book[/fa][/border][border=none; padding: 0px; height: 30px; width: 55px; font-size: 20px; text-align: center; background: var(--dark);][fa]fal fa-link[/fa][/border][/border][/border][comment] -----content----- [/comment][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 10px;][comment] -----left------ [/comment][border=none; padding: 0px; margin: 10px; width: 490px; height: 400px; flex-grow: 1; box-sizing: border-box; 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; line-height: 20px; text-align: justify;][comment] -----first part of background----- [/comment][border=none; padding: 0px; background: var(--dark); top: 0%; position: sticky; display: flex; flex-direction: row; height: 40px;][border=none; padding: 0px; height: 40px; min-width: 40px;][border=none; padding: 0px; width: 40px; height: 40px; box-sizing: border-box; padding: 5px; border: 1px solid var(--accent); border-radius: 100%;][border=none; padding: 0px; height: 100%; width: 100%; background: var(--accent); border-radius: 100%;][/border][/border][/border][border=none; padding: 0px; width: 25px; height: 40px; 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: 40px; text-align: center;][border=none; padding: 0px; height: 40px; border: 1px solid var(--accent); background: var(--fade); display: flex; flex-direction: column; justify-content: space-evenly; font-size: 13px; font-family: Montserrat; box-sizing: border-box;]first stage of life[/border][/border][/border][comment] ------content------- [/comment][border=none; padding: 0px; box-sizing: border-box; padding: 15px 0px 15px 15px; border-left: 1px solid var(--accent); margin-left: 20px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at nunc sem. Maecenas sed sapien dapibus, ullamcorper erat nec, interdum odio. Phasellus at nibh gravida nibh maximus condimentum nec vel felis. Curabitur vel enim viverra, efficitur lacus vel, commodo orci. Etiam semper porttitor dolor non aliquet. Integer non sem a augue dapibus convallis. Integer sit amet lectus feugiat, porttitor justo nec, porttitor risus. Phasellus sit amet volutpat eros, sit amet volutpat erat. Vivamus pulvinar, magna in sollicitudin ultrices, urna nulla fermentum arcu, ut suscipit mi lectus ut risus. Proin sollicitudin, magna vitae interdum laoreet, metus odio commodo risus, at porttitor massa nulla ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc ac feugiat leo, id fringilla tellus. Duis aliquet, diam sit amet pharetra pharetra, elit risus pharetra felis, ut iaculis est metus sit amet augue. Maecenas blandit efficitur metus, ut porta velit egestas et. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas placerat mauris at eleifend blandit. Pellentesque id urna eget erat cursus efficitur. Duis fermentum quis turpis vitae vehicula. Cras ullamcorper, neque vitae tristique auctor, nunc nulla posuere ligula, id vehicula ex lorem sit amet lectus. Nam suscipit, dui eu blandit egestas, sapien lorem bibendum justo, in dignissim sem magna non dui. Cras a velit eu risus pretium malesuada sit amet vel sapien. Aenean eros massa, aliquam eget quam sed, luctus vestibulum tortor. Aenean tristique euismod purus, ut lobortis neque tempus ut.[/border][comment] -----second part of background----- [/comment][border=none; padding: 0px; background: var(--dark); top: 0%; position: sticky; display: flex; flex-direction: row; height: 40px;][border=none; padding: 0px; height: 40px; min-width: 40px;][border=none; padding: 0px; width: 40px; height: 40px; box-sizing: border-box; padding: 5px; border: 1px solid var(--accent); border-radius: 100%;][border=none; padding: 0px; height: 100%; width: 100%; background: var(--accent); border-radius: 100%;][/border][/border][/border][border=none; padding: 0px; width: 25px; height: 40px; 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: 40px; text-align: center;][border=none; padding: 0px; height: 40px; border: 1px solid var(--accent); background: var(--fade); display: flex; flex-direction: column; justify-content: space-evenly; font-size: 13px; font-family: Montserrat; box-sizing: border-box;]second stage of life[/border][/border][/border][comment] ------content------- [/comment][border=none; padding: 0px; box-sizing: border-box; padding: 15px 0px 15px 15px; border-left: 1px solid var(--accent); margin-left: 20px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at nunc sem. Maecenas sed sapien dapibus, ullamcorper erat nec, interdum odio. Phasellus at nibh gravida nibh maximus condimentum nec vel felis. Curabitur vel enim viverra, efficitur lacus vel, commodo orci. Etiam semper porttitor dolor non aliquet. Integer non sem a augue dapibus convallis. Integer sit amet lectus feugiat, porttitor justo nec, porttitor risus. Phasellus sit amet volutpat eros, sit amet volutpat erat. Vivamus pulvinar, magna in sollicitudin ultrices, urna nulla fermentum arcu, ut suscipit mi lectus ut risus. Proin sollicitudin, magna vitae interdum laoreet, metus odio commodo risus, at porttitor massa nulla ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc ac feugiat leo, id fringilla tellus. Duis aliquet, diam sit amet pharetra pharetra, elit risus pharetra felis, ut iaculis est metus sit amet augue. Maecenas blandit efficitur metus, ut porta velit egestas et. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas placerat mauris at eleifend blandit. Pellentesque id urna eget erat cursus efficitur. Duis fermentum quis turpis vitae vehicula. Cras ullamcorper, neque vitae tristique auctor, nunc nulla posuere ligula, id vehicula ex lorem sit amet lectus. Nam suscipit, dui eu blandit egestas, sapien lorem bibendum justo, in dignissim sem magna non dui. Cras a velit eu risus pretium malesuada sit amet vel sapien. Aenean eros massa, aliquam eget quam sed, luctus vestibulum tortor. Aenean tristique euismod purus, ut lobortis neque tempus ut.[/border][comment] -----third part of background----- [/comment][border=none; padding: 0px; background: var(--dark); top: 0%; position: sticky; display: flex; flex-direction: row; height: 40px;][border=none; padding: 0px; height: 40px; min-width: 40px;][border=none; padding: 0px; width: 40px; height: 40px; box-sizing: border-box; padding: 5px; border: 1px solid var(--accent); border-radius: 100%;][border=none; padding: 0px; height: 100%; width: 100%; background: var(--accent); border-radius: 100%;][/border][/border][/border][border=none; padding: 0px; width: 25px; height: 40px; 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: 40px; text-align: center;][border=none; padding: 0px; height: 40px; border: 1px solid var(--accent); background: var(--fade); display: flex; flex-direction: column; justify-content: space-evenly; font-size: 13px; font-family: Montserrat; box-sizing: border-box;]third stage of life[/border][/border][/border][comment] ------content------- [/comment][border=none; padding: 0px; box-sizing: border-box; padding: 15px 0px 0px 15px; border-left: 1px solid var(--accent); margin-left: 20px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at nunc sem. Maecenas sed sapien dapibus, ullamcorper erat nec, interdum odio. Phasellus at nibh gravida nibh maximus condimentum nec vel felis. Curabitur vel enim viverra, efficitur lacus vel, commodo orci. Etiam semper porttitor dolor non aliquet. Integer non sem a augue dapibus convallis. Integer sit amet lectus feugiat, porttitor justo nec, porttitor risus. Phasellus sit amet volutpat eros, sit amet volutpat erat. Vivamus pulvinar, magna in sollicitudin ultrices, urna nulla fermentum arcu, ut suscipit mi lectus ut risus. Proin sollicitudin, magna vitae interdum laoreet, metus odio commodo risus, at porttitor massa nulla ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc ac feugiat leo, id fringilla tellus. Duis aliquet, diam sit amet pharetra pharetra, elit risus pharetra felis, ut iaculis est metus sit amet augue. Maecenas blandit efficitur metus, ut porta velit egestas et. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas placerat mauris at eleifend blandit. Pellentesque id urna eget erat cursus efficitur. Duis fermentum quis turpis vitae vehicula. Cras ullamcorper, neque vitae tristique auctor, nunc nulla posuere ligula, id vehicula ex lorem sit amet lectus. Nam suscipit, dui eu blandit egestas, sapien lorem bibendum justo, in dignissim sem magna non dui. Cras a velit eu risus pretium malesuada sit amet vel sapien. Aenean eros massa, aliquam eget quam sed, luctus vestibulum tortor. Aenean tristique euismod purus, ut lobortis neque tempus ut.[/border][comment] --------end of background------[/comment][/border][/border][/border][/border][comment] ------right------ [/comment][border=none; padding: 0px; margin: 10px; width: 250px; background: var(--img6); background-size: cover; background-position: 50% 50%; height: 400px; flex-grow: 1;][/border][/border][comment] -------end of content------[/comment][/border][/tab][comment] -------fifth tab--------- [/comment] [tab=o][border=none; padding: 0px; background: var(--dark); position: absolute; bottom: 0; left:0; right: 0; top: 0; color: #fff; letter-spacing: 0; pointer-events: none;][comment] -----tab cover----- [/comment][border=none; padding: 0px; margin-left: 10px; margin-right: 10px; height: 30px; overflow: hidden; background: var(--dark); color: var(--unselected); padding-top: 14px; box-sizing: border-box;][border=none; padding: 0px; height: 1px; background: var(--unselected);][/border][border=none; padding: 0px; margin-top: -16px; width: 100%; display: flex; flex-direction: row; justify-content: center;][border=none; padding: 0px; height: 30px; width: 55px; font-size: 20px; text-align: center; background: var(--dark);][fa]fal fa-home[/fa][/border][border=none; padding: 0px; height: 30px; width: 55px; font-size: 20px; text-align: center; background: var(--dark);][fa]fal fa-user[/fa][/border][border=none; padding: 0px; height: 30px; width: 55px; font-size: 20px; text-align: center; background: var(--dark);][fa]fal fa-comment[/fa][/border][border=none; padding: 0px; height: 30px; width: 55px; font-size: 20px; text-align: center; background: var(--dark);][fa]fal fa-book[/fa][/border][border=none; padding: 0px; height: 30px; width: 55px; font-size: 20px; text-align: center; color: var(--accent); background: var(--dark);][fa]fal fa-link[/fa][/border][/border][/border][comment] -----content----- [/comment][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 10px;][comment] -----left------[/comment][border=none; padding: 0px; margin: 10px; width: 300px; height: 400px; flex-grow: 1;][comment] -----gallery-----[/comment][border=none; padding: 0px; height: 350px; width: 100%;][comment] -------pic 1-----[/comment][border=none; padding: 0px; height: 100px; background: var(--gimg1); background-size: 400px; background-position: 50% 10%;][/border][comment] [/comment][border=none; padding: 0px; display: flex; flex-direction: row; margin-top: 20px;][border=none; padding: 0px; width: 50%; margin-right: 20px;][comment] -----pic 2----[/comment][border=none; padding: 0px; height: 105px; background: var(--gimg2); background-size: cover; background-position: 50% 10%;][/border][comment] ------pic 3-----[/comment][border=none; padding: 0px; height: 105px; background: var(--gimg3); margin-top: 20px; background-size: cover; background-position: 50% 20%;][/border][/border][comment] -----pic 4----[/comment][border=none; padding: 0px; width: 50%; height: 230px; background: var(--gimg4); background-size: cover; background-position: 50% 50%; flex-grow: 1;][/border][comment] -----end of gallery-----[/comment][/border][/border][comment] -------heading----[/comment][border=none; padding: 0px; height: 30px; font-family: Montserrat; color: var(--accent); font-size: 30px; box-sizing: border-box; padding-top: 14px; text-align: right; line-height: 29px; margin-top: 20px;][border=none; padding: 0px; height: 1px; width: 55%; background: var(--unselected);][/border][border=none; padding: 0px; position: relative; margin-top: -16px;]gallery[/border][/border][/border][comment] ------right-----[/comment][border=none; padding: 0px; margin: 10px; width: 440px; height: 400px; 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;][comment] -----relationship one----[/comment][border=none; padding: 0px; display: flex; flex-direction: row; width: 100%;][border=none; padding: 0px; min-width: 100px; height: 120px; background: var(--rimg1); background-size: cover; background-position: 50% 50%; margin-right: 15px;][/border][border=none; padding: 0px; height: 120px;][border=none; padding: 0px; height: 20px; text-align: center; color: var(--accent); line-height: 12px;][fa]far fa-heart[/fa][/border][border=none; padding: 0px; height: 100px; width: 12px; border: 1px solid var(--accent); box-sizing: border-box; padding: 3px; display: flex; flex-direction: column-reverse;][border=none; padding: 0px; /*change this percentage value to adjust the relationship level bar!*/ height: 50%; background: var(--accent); width: 100%;][/border][/border][/border][comment] ------relationship content-----[/comment][border=none; padding: 0px; height: 120px; width: 100%; margin-left: 20px;][border=none; padding: 0px; height: 20px; font-size: 20px; font-family: Montserrat; color: var(--accent); line-height: 18px;]character name[/border][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 94px; margin-top: 6px; 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: 20px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel tellus in mauris feugiat tempor in a magna. Fusce eu ornare urna. Quisque hendrerit mauris diam, sed venenatis lacus mattis a. Sed accumsan dapibus elit nec maximus. Etiam ac auctor quam. Suspendisse vitae faucibus nisl, sed dapibus quam.[/border][/border][/border][/border][comment] -----end of relationship one----[/comment][/border][comment] -----relationship two----[/comment][border=none; padding: 0px; display: flex; flex-direction: row; margin-top: 20px;][border=none; padding: 0px; min-width: 100px; height: 120px; background: var(--rimg2); background-size: cover; background-position: 50% 50%; margin-right: 15px;][/border][border=none; padding: 0px; height: 120px;][border=none; padding: 0px; height: 20px; text-align: center; color: var(--accent); line-height: 12px;][fa]far fa-heart[/fa][/border][border=none; padding: 0px; height: 100px; width: 12px; border: 1px solid var(--accent); box-sizing: border-box; padding: 3px; display: flex; flex-direction: column-reverse;][border=none; padding: 0px; /*change this percentage value to adjust the relationship level bar!*/ height: 50%; background: var(--accent); width: 100%;][/border][/border][/border][comment] ------relationship content-----[/comment][border=none; padding: 0px; height: 120px; width: 100%; margin-left: 20px;][border=none; padding: 0px; height: 20px; font-size: 20px; font-family: Montserrat; color: var(--accent); line-height: 18px;]character name[/border][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 94px; margin-top: 6px; 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: 20px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel tellus in mauris feugiat tempor in a magna. Fusce eu ornare urna. Quisque hendrerit mauris diam, sed venenatis lacus mattis a. Sed accumsan dapibus elit nec maximus. Etiam ac auctor quam. Suspendisse vitae faucibus nisl, sed dapibus quam.[/border][/border][/border][/border][comment] -----end of relationship two----[/comment][/border][comment] -----relationship three----[/comment][border=none; padding: 0px; display: flex; flex-direction: row; margin-top: 20px;][border=none; padding: 0px; min-width: 100px; height: 120px; background: var(--rimg3); background-size: cover; background-position: 50% 50%; margin-right: 15px;][/border][border=none; padding: 0px; height: 120px;][border=none; padding: 0px; height: 20px; text-align: center; color: var(--accent); line-height: 12px;][fa]far fa-heart[/fa][/border][border=none; padding: 0px; height: 100px; width: 12px; border: 1px solid var(--accent); box-sizing: border-box; padding: 3px; display: flex; flex-direction: column-reverse;][border=none; padding: 0px; /*change this percentage value to adjust the relationship level bar!*/ height: 50%; background: var(--accent); width: 100%;][/border][/border][/border][comment] ------relationship content-----[/comment][border=none; padding: 0px; height: 120px; width: 100%; margin-left: 20px;][border=none; padding: 0px; height: 20px; font-size: 20px; font-family: Montserrat; color: var(--accent); line-height: 18px;]character name[/border][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 94px; margin-top: 6px; 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: 20px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel tellus in mauris feugiat tempor in a magna. Fusce eu ornare urna. Quisque hendrerit mauris diam, sed venenatis lacus mattis a. Sed accumsan dapibus elit nec maximus. Etiam ac auctor quam. Suspendisse vitae faucibus nisl, sed dapibus quam.[/border][/border][/border][/border][comment] -----end of relationship three----[/comment][/border][comment] -----relationship four----[/comment][border=none; padding: 0px; display: flex; flex-direction: row; margin-top: 20px;][border=none; padding: 0px; min-width: 100px; height: 120px; background: var(--rimg4); background-size: cover; background-position: 50% 50%; margin-right: 15px;][/border][border=none; padding: 0px; height: 120px;][border=none; padding: 0px; height: 20px; text-align: center; color: var(--accent); line-height: 12px;][fa]far fa-heart[/fa][/border][border=none; padding: 0px; height: 100px; width: 12px; border: 1px solid var(--accent); box-sizing: border-box; padding: 3px; display: flex; flex-direction: column-reverse;][border=none; padding: 0px; /*change this percentage value to adjust the relationship level bar!*/ height: 50%; background: var(--accent); width: 100%;][/border][/border][/border][comment] ------relationship content-----[/comment][border=none; padding: 0px; height: 120px; width: 100%; margin-left: 20px;][border=none; padding: 0px; height: 20px; font-size: 20px; font-family: Montserrat; color: var(--accent); line-height: 18px;]character name[/border][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 94px; margin-top: 6px; 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: 20px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel tellus in mauris feugiat tempor in a magna. Fusce eu ornare urna. Quisque hendrerit mauris diam, sed venenatis lacus mattis a. Sed accumsan dapibus elit nec maximus. Etiam ac auctor quam. Suspendisse vitae faucibus nisl, sed dapibus quam.[/border][/border][/border][/border][comment] -----end of relationship four----[/comment][/border][comment] ---------end of relationships-------[/comment][/border][/border][/border][/border][/border][comment] -------end of content------[/comment][/border][/tab][comment] -------end of tabs-------[/comment][/tabs][/border][comment] -----filler------- [/comment][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 10px;][border=none; padding: 0px; margin: 10px; width: 370px; height: 400px;]left[/border][border=none; padding: 0px; margin: 10px; width: 370px; height: 400px;]right[/border][/border][comment] -------end of container / code------[/comment][/border][/border][border=none; padding: 0px; margin-top: 10px; font-size: 10px; text-align: center; color: #666; text-transform: uppercase; letter-spacing: 2px; font-family: Karla;]coded by natasha.[/border]