[comment] [font=Poppins]titles[/font] [font=Arial]body[/font] [/comment][border=none; padding: 0px; --accent: #c18bc9; --bg: #f6f6f6; --bg2: #fff; --color: #666; --border: 1px solid #eee; --selected: #fff; --unselected: #885091; --credit: #fff; --title: Poppins; --body: Arial; --img1: url(https://clusterbusters.org/wp-content/uploads/2019/02/placeholder.jpg); --img2: url(https://clusterbusters.org/wp-content/uploads/2019/02/placeholder.jpg); --img3: url(https://clusterbusters.org/wp-content/uploads/2019/02/placeholder.jpg); --img4: url(https://clusterbusters.org/wp-content/uploads/2019/02/placeholder.jpg); --img5: url(https://clusterbusters.org/wp-content/uploads/2019/02/placeholder.jpg); --img6: url(https://clusterbusters.org/wp-content/uploads/2019/02/placeholder.jpg); --img7: url(https://clusterbusters.org/wp-content/uploads/2019/02/placeholder.jpg); --r-img1: url(https://clusterbusters.org/wp-content/uploads/2019/02/placeholder.jpg); --r-img2: url(https://clusterbusters.org/wp-content/uploads/2019/02/placeholder.jpg); --r-img3: url(https://clusterbusters.org/wp-content/uploads/2019/02/placeholder.jpg); --r-img4: url(https://clusterbusters.org/wp-content/uploads/2019/02/placeholder.jpg); --r-img5: url(https://clusterbusters.org/wp-content/uploads/2019/02/placeholder.jpg); max-width: 700px; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; margin: auto; font-size: 12px; color: var(--color); font-family: var(--body); border: var(--border); background: var(--bg);][border=none; padding: 0px; position: relative;][comment] -----header filler (ignore)-------[/comment][border=none; padding: 0px; height: 100px; background: grey;][/border][comment] --------tabs begin-------[/comment][border=none; padding: 0px; height: 70px; background: black; overflow: hidden;][border=none; padding: 0px; letter-spacing: 19px; width: 340px; margin: auto; margin-top: 24px;][border=none; padding: 0px; margin-left: -13px;][tabs][comment] ---------first tab--------[/comment][tab=.][border=none; padding: 0px; position: absolute; bottom: 0; left:0; right: 0; top: 0; letter-spacing: 0px; background: var(--bg); opacity: 1; line-height: 20px; pointer-events: none;][comment] ---------header design (ignore)-------[/comment][border=none; padding: 0px; height: 100px; overflow: hidden;][border=none; padding: 0px; height: 150px; width: 150px; border: 4px solid var(--accent); position: relative; border-radius: 100%; margin-top: -100px; margin-left: -100px;][border=none; padding: 0px; height: 25px; width: 25px; background: var(--bg2); position: relative; border-radius: 100%; margin-top: 110px; margin-left: 190px;][/border][/border][border=none; padding: 0px; height: 100px; width: 100px; border: 4px solid var(--accent); position: relative; border-radius: 100%; margin-top: 10px; margin-left: 40px;][border=none; padding: 0px; height: 10px; width: 10px; border: 4px solid var(--accent); position: relative; border-radius: 100%; margin-top: -20px; margin-left: -10px;][/border][/border][border=none; padding: 0px; height: 200px; width: 200px; border: 4px solid var(--accent); position: relative; border-radius: 100%; margin-top: -300px; margin-left: 100px;][/border][border=none; padding: 0px; height: 30px; width: 30px; background: var(--bg2); position: relative; border-radius: 100%; z-index: 1; margin-top: -40px; margin-left: 300px;][/border][border=none; padding: 0px; height: 130px; width: 130px; border: 4px solid var(--accent); position: relative; border-radius: 100%; margin-top: -40px; margin-left: 300px;][/border][border=none; padding: 0px; height: 80px; width: 80px; border: 4px solid var(--accent); position: relative; border-radius: 100%; margin-top: -200px; margin-left: 430px;][border=none; padding: 0px; height: 20px; width: 20px; background: var(--bg2); position: relative; border-radius: 100%; margin-top: 5px; margin-left: -70px;][/border][/border][border=none; padding: 0px; height: 250px; width: 250px; border: 4px solid var(--accent); position: relative; border-radius: 100%; margin-top: -50px; margin-left: 500px;][border=none; padding: 0px; height: 30px; width: 30px; background: var(--bg2); position: relative; border-radius: 100%; margin-top: -10px; margin-left: 150px;][/border][border=none; padding: 0px; height: 10px; width: 10px; border: 4px solid var(--accent); position: relative; border-radius: 100%; margin-top: -40px; margin-left: 35px;][/border][/border][/border][comment] ---------tab buttons (try not to make the button titles too long! 7 character max. but the icons can change to anything from font awesome icons!)------[/comment][border=none; padding: 0px; height: 70px; background: var(--accent);][border=none; padding: 0px; max-width: 340px; margin: auto; display: flex; flex-direction: row; justify-content: center;][comment] --------button one-----[/comment][border=none; padding: 0px; height: 50px; width: 50px; margin: 10px 0px 10px 0px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--selected); font-family: var(--title);][border=none; padding: 0px; font-size: 15px; margin-top: 4px;][fa]fas fa-home[/fa][/border] basics[/border][comment] --------filer (ignore)-----[/comment][border=none; padding: 0px; height: 50px; width: 24px; margin: 10px 0px 10px 0px; pointer-events: auto;][/border][comment] --------button two-----[/comment][border=none; padding: 0px; height: 50px; width: 50px; margin: 10px 0px 10px 0px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--unselected); font-family: var(--title);][border=none; padding: 0px; font-size: 15px; margin-top: 4px;][fa]fas fa-user[/fa][/border] visage[/border][comment] --------filer (ignore)-----[/comment][border=none; padding: 0px; height: 50px; width: 24px; margin: 10px 0px 10px 0px; pointer-events: auto;][/border][comment] --------button three-----[/comment][border=none; padding: 0px; height: 50px; width: 50px; margin: 10px 0px 10px 0px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--unselected); font-family: var(--title);][border=none; padding: 0px; font-size: 15px; margin-top: 4px;][fa]fas fa-comment[/fa][/border] psyche[/border][comment] --------filer (ignore)-----[/comment][border=none; padding: 0px; height: 50px; width: 24px; margin: 10px 0px 10px 0px; pointer-events: auto;][/border][comment] --------button four-----[/comment][border=none; padding: 0px; height: 50px; width: 50px; margin: 10px 0px 10px 0px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--unselected); font-family: var(--title);][border=none; padding: 0px; font-size: 15px; margin-top: 4px;][fa]fas fa-book[/fa][/border] history[/border][comment] -------end of tab buttons-------[/comment][/border][/border][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; padding: 10px;][comment] ---------left side of main content-------[/comment][border=none; padding: 0px; margin: 10px; width: 320px; height: 400px; flex-grow: 1; pointer-events: auto;][comment] ---------main image and brief basic details-------[/comment][border=none; padding: 0px; height: 230px; display: flex; flex-direction: row;][border=none; padding: 0px; width: 40%; margin-right: 20px; background: var(--img1); background-size: cover; background-position: 50% 0%;][/border][border=none; padding: 0px; flex-grow: 1;][comment] -------name------[/comment][border=none; padding: 0px; height: 42.5px; box-sizing: border-box; background: var(--bg2); border: var(--border); padding: 0px 10px; display: flex; flex-direction: row;][border=none; padding: 0px; height: 40.5px; display: flex; flex-direction: column; justify-content: space-evenly; min-width: 20px; color: var(--accent);][fa]fas fa-id-card[/fa][/border][border=none; padding: 0px; height: 40.5px; display: flex; flex-direction: column; justify-content: space-evenly; flex-grow: 1; text-align: right;]character name here[/border][/border][comment] -------age------[/comment][border=none; padding: 0px; height: 42.5px; box-sizing: border-box; background: var(--bg2); border: var(--border); padding: 0px 10px; display: flex; flex-direction: row; margin-top: 20px;][border=none; padding: 0px; height: 40.5px; display: flex; flex-direction: column; justify-content: space-evenly; min-width: 20px; color: var(--accent);][fa]fas fa-birthday-cake[/fa][/border][border=none; padding: 0px; height: 40.5px; display: flex; flex-direction: column; justify-content: space-evenly; flex-grow: 1; text-align: right;]character age here[/border][/border][comment] -------gender------[/comment][border=none; padding: 0px; height: 42.5px; box-sizing: border-box; background: var(--bg2); border: var(--border); padding: 0px 10px; display: flex; flex-direction: row; margin-top: 20px;][border=none; padding: 0px; height: 40.5px; display: flex; flex-direction: column; justify-content: space-evenly; min-width: 20px; font-size: 15px; color: var(--accent);][fa]fas fa-venus[/fa][/border][border=none; padding: 0px; height: 40.5px; display: flex; flex-direction: column; justify-content: space-evenly; flex-grow: 1; text-align: right;]character gender here[/border][/border][comment] -------sexuality------[/comment][border=none; padding: 0px; height: 42.5px; box-sizing: border-box; background: var(--bg2); border: var(--border); padding: 0px 10px; display: flex; flex-direction: row; margin-top: 20px;][border=none; padding: 0px; height: 40.5px; display: flex; flex-direction: column; justify-content: space-evenly; min-width: 20px; color: var(--accent);][fa]fas fa-heart[/fa][/border][border=none; padding: 0px; height: 40.5px; display: flex; flex-direction: column; justify-content: space-evenly; flex-grow: 1; text-align: right;]character sexuality here[/border][/border][comment] -------end of brief basic details-----[/comment][/border][/border][comment] --------quote code begins here-------[/comment][border=none; padding: 0px; height: 150px; margin-top: 20px;][border=none; padding: 0px; margin: auto; background: var(--accent); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; color: var(--selected); height: 35px; width: 35px; font-size: 15px; border-radius: 100%; position: relative; margin-bottom: -15px;][fa]fas fa-quote-left[/fa][/border][comment] -------actual quote (try not to make this too long! if it's too short, then adjust the font size in this section accordingly)------[/comment][border=none; padding: 0px; height: 135px; background: var(--bg2); box-sizing: border-box; border: var(--border); text-align: center; padding: 0px 10px; display: flex; flex-direction: column; justify-content: space-evenly; font-style: italic; font-weight: bold; font-size: 13px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi lectus, scelerisque et cursus vitae, porta a massa. [/border][/border][comment] ------end of left side------[/comment][/border][comment] ---------rest of the basic details come here in this scroll box!-------[/comment][border=none; padding: 0px; margin: 10px; width: 320px; 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: 22px;][comment] ---------date of birth-------[/comment][border=none; padding: 0px; height: 50px; box-sizing: border-box; border-bottom: var(--border); padding: 15px;][border=none; padding: 0px; display: inline; color: var(--accent); font-family: var(--title);]date of birth.[/border] date of birth here[/border][comment] ---------country of birth-------[/comment][border=none; padding: 0px; height: 50px; box-sizing: border-box; border-bottom: var(--border); padding: 15px;][border=none; padding: 0px; display: inline; color: var(--accent); font-family: var(--title);]country of birth.[/border] country of birth here[/border][comment] ---------current residence-------[/comment][border=none; padding: 0px; height: 50px; box-sizing: border-box; border-bottom: var(--border); padding: 15px;][border=none; padding: 0px; display: inline; color: var(--accent); font-family: var(--title);]current residence.[/border] current residence here[/border][comment] ---------ethnicity-------[/comment][border=none; padding: 0px; height: 50px; box-sizing: border-box; border-bottom: var(--border); padding: 15px;][border=none; padding: 0px; display: inline; color: var(--accent); font-family: var(--title);]ethnicity.[/border] ethnicity here[/border][comment] ---------zodiac-------[/comment][border=none; padding: 0px; height: 50px; box-sizing: border-box; border-bottom: var(--border); padding: 15px;][border=none; padding: 0px; display: inline; color: var(--accent); font-family: var(--title);]zodiac.[/border] zodiac here[/border][comment] ---------education-------[/comment][border=none; padding: 0px; height: 50px; box-sizing: border-box; border-bottom: var(--border); padding: 15px;][border=none; padding: 0px; display: inline; color: var(--accent); font-family: var(--title);]education.[/border] education here[/border][comment] ---------occupation-------[/comment][border=none; padding: 0px; height: 50px; box-sizing: border-box; border-bottom: var(--border); padding: 15px;][border=none; padding: 0px; display: inline; color: var(--accent); font-family: var(--title);]occupation.[/border] occupation here[/border][comment] ---------species-------[/comment][border=none; padding: 0px; height: 50px; box-sizing: border-box; border-bottom: var(--border); padding: 15px;][border=none; padding: 0px; display: inline; color: var(--accent); font-family: var(--title);]species.[/border] species here[/border][comment] ---------extra (this is just to show you that this scrolls! you can copy and paste this entire section below if you want an additional field)-------[/comment][border=none; padding: 0px; height: 50px; box-sizing: border-box; border-bottom: var(--border); padding: 15px;][border=none; padding: 0px; display: inline; color: var(--accent); font-family: var(--title);]extra.[/border] extra here[/border][comment] --------end of basic details------[/comment][/border][/border][/border][/border][comment] -----------end of tab one------[/comment][/border][/border][/tab][comment] ---------second tab--------[/comment][tab=.][border=none; padding: 0px; position: absolute; bottom: 0; left:0; right: 0; top: 0; letter-spacing: 0px; background: var(--bg); opacity: 1; line-height: 20px; pointer-events: none;][comment] ---------header design (ignore)-------[/comment][border=none; padding: 0px; height: 100px; overflow: hidden;][border=none; padding: 0px; height: 150px; width: 150px; border: 4px solid var(--accent); position: relative; border-radius: 100%; margin-top: -100px; margin-left: -100px;][border=none; padding: 0px; height: 25px; width: 25px; background: var(--bg2); position: relative; border-radius: 100%; margin-top: 110px; margin-left: 190px;][/border][/border][border=none; padding: 0px; height: 100px; width: 100px; border: 4px solid var(--accent); position: relative; border-radius: 100%; margin-top: 10px; margin-left: 40px;][border=none; padding: 0px; height: 10px; width: 10px; border: 4px solid var(--accent); position: relative; border-radius: 100%; margin-top: -20px; margin-left: -10px;][/border][/border][border=none; padding: 0px; height: 200px; width: 200px; border: 4px solid var(--accent); position: relative; border-radius: 100%; margin-top: -300px; margin-left: 100px;][/border][border=none; padding: 0px; height: 30px; width: 30px; background: var(--bg2); position: relative; border-radius: 100%; z-index: 1; margin-top: -40px; margin-left: 300px;][/border][border=none; padding: 0px; height: 130px; width: 130px; border: 4px solid var(--accent); position: relative; border-radius: 100%; margin-top: -40px; margin-left: 300px;][/border][border=none; padding: 0px; height: 80px; width: 80px; border: 4px solid var(--accent); position: relative; border-radius: 100%; margin-top: -200px; margin-left: 430px;][border=none; padding: 0px; height: 20px; width: 20px; background: var(--bg2); position: relative; border-radius: 100%; margin-top: 5px; margin-left: -70px;][/border][/border][border=none; padding: 0px; height: 250px; width: 250px; border: 4px solid var(--accent); position: relative; border-radius: 100%; margin-top: -50px; margin-left: 500px;][border=none; padding: 0px; height: 30px; width: 30px; background: var(--bg2); position: relative; border-radius: 100%; margin-top: -10px; margin-left: 150px;][/border][border=none; padding: 0px; height: 10px; width: 10px; border: 4px solid var(--accent); position: relative; border-radius: 100%; margin-top: -40px; margin-left: 35px;][/border][/border][/border][comment] ---------tab buttons (try not to make the button titles too long! 7 character max. but the icons can change to anything from font awesome icons!)------[/comment][border=none; padding: 0px; height: 70px; background: var(--accent);][border=none; padding: 0px; max-width: 340px; margin: auto; display: flex; flex-direction: row; justify-content: center;][comment] --------button one-----[/comment][border=none; padding: 0px; height: 50px; width: 50px; margin: 10px 0px 10px 0px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--unselected); font-family: var(--title);][border=none; padding: 0px; font-size: 15px; margin-top: 4px;][fa]fas fa-home[/fa][/border] basics[/border][comment] --------filer (ignore)-----[/comment][border=none; padding: 0px; height: 50px; width: 24px; margin: 10px 0px 10px 0px; pointer-events: auto;][/border][comment] --------button two-----[/comment][border=none; padding: 0px; height: 50px; width: 50px; margin: 10px 0px 10px 0px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--selected); font-family: var(--title);][border=none; padding: 0px; font-size: 15px; margin-top: 4px;][fa]fas fa-user[/fa][/border] visage[/border][comment] --------filer (ignore)-----[/comment][border=none; padding: 0px; height: 50px; width: 24px; margin: 10px 0px 10px 0px; pointer-events: auto;][/border][comment] --------button three-----[/comment][border=none; padding: 0px; height: 50px; width: 50px; margin: 10px 0px 10px 0px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--unselected); font-family: var(--title);][border=none; padding: 0px; font-size: 15px; margin-top: 4px;][fa]fas fa-comment[/fa][/border] psyche[/border][comment] --------filer (ignore)-----[/comment][border=none; padding: 0px; height: 50px; width: 24px; margin: 10px 0px 10px 0px; pointer-events: auto;][/border][comment] --------button four-----[/comment][border=none; padding: 0px; height: 50px; width: 50px; margin: 10px 0px 10px 0px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--unselected); font-family: var(--title);][border=none; padding: 0px; font-size: 15px; margin-top: 4px;][fa]fas fa-book[/fa][/border] history[/border][comment] -------end of tab buttons-------[/comment][/border][/border][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; padding: 10px;][comment] ---------left side of main content-------[/comment][border=none; padding: 0px; margin: 10px; width: 320px; height: 400px; flex-grow: 1; pointer-events: auto;][comment] --------second image + height & weight--------[/comment][border=none; padding: 0px; height: 190px; background: var(--img2); background-size: cover; background-position: 50% 20%; display: flex; flex-direction: row;][border=none; padding: 0px; margin-top: 140px; height: 20px; padding: 3px 10px; background: var(--bg2);][border=none; padding: 0px; display: inline; color: var(--accent); font-family: var(--title);]height & weight.[/border] height & weight[/border][border=none; padding: 0px; flex-grow: 1;][/border][/border][comment] --------third image + face claim--------[/comment][border=none; padding: 0px; height: 190px; margin-top: 20px; background: var(--img3); background-size: cover; background-position: 50% 20%; display: flex; flex-direction: row-reverse;][border=none; padding: 0px; margin-top: 140px; height: 20px; padding: 3px 10px; background: var(--bg2);][border=none; padding: 0px; display: inline; color: var(--accent); font-family: var(--title);]face claim.[/border] face claim here.[/border][border=none; padding: 0px; flex-grow: 1;][/border][/border][comment] ---------end of left side-------[/comment][/border][comment] ---------right side of main content (main appearance content)-------[/comment][border=none; padding: 0px; margin: 10px; width: 320px; 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: 22px;][comment] -------hair-------[/comment][border=none; padding: 0px; font-family: var(--title); color: var(--accent); font-size: 14px; margin-left: 10px;]hair.[/border] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi lectus, scelerisque et cursus vitae, porta a massa. [comment]-------eyes-------[/comment][border=none; padding: 0px; font-family: var(--title); color: var(--accent); font-size: 14px; margin-left: 10px;]eyes.[/border] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi lectus, scelerisque et cursus vitae, porta a massa. [comment]-------physique-------[/comment][border=none; padding: 0px; font-family: var(--title); color: var(--accent); font-size: 14px; margin-left: 10px;]physique.[/border] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi lectus, scelerisque et cursus vitae, porta a massa. Nullam semper molestie quam, eu sagittis nisi dictum varius. Nunc imperdiet bibendum mi in feugiat. Ut ultricies imperdiet enim, at ultrices eros imperdiet vel. Aliquam quis laoreet lacus. Praesent eget justo laoreet erat semper convallis. [comment]-------style-------[/comment][border=none; padding: 0px; font-family: var(--title); color: var(--accent); font-size: 14px; margin-left: 10px;]style.[/border] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi lectus, scelerisque et cursus vitae, porta a massa. Nullam semper molestie quam, eu sagittis nisi dictum varius. Nunc imperdiet bibendum mi in feugiat. [comment]-------modifications (copy this entire thing and paste below for another heading/section!)-------[/comment][border=none; padding: 0px; font-family: var(--title); color: var(--accent); font-size: 14px; margin-left: 10px;]modifications.[/border] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi lectus, scelerisque et cursus vitae, porta a massa. Nullam semper molestie quam, eu sagittis nisi dictum varius. [/border][/border][/border][/border][comment] -----------end of tab two------[/comment][/border][/border][/tab][comment] ---------third tab--------[/comment][tab=.][border=none; padding: 0px; position: absolute; bottom: 0; left:0; right: 0; top: 0; letter-spacing: 0px; background: var(--bg); opacity: 1; line-height: 20px; pointer-events: none;][comment] ---------header design (ignore)-------[/comment][border=none; padding: 0px; height: 100px; overflow: hidden;][border=none; padding: 0px; height: 150px; width: 150px; border: 4px solid var(--accent); position: relative; border-radius: 100%; margin-top: -100px; margin-left: -100px;][border=none; padding: 0px; height: 25px; width: 25px; background: var(--bg2); position: relative; border-radius: 100%; margin-top: 110px; margin-left: 190px;][/border][/border][border=none; padding: 0px; height: 100px; width: 100px; border: 4px solid var(--accent); position: relative; border-radius: 100%; margin-top: 10px; margin-left: 40px;][border=none; padding: 0px; height: 10px; width: 10px; border: 4px solid var(--accent); position: relative; border-radius: 100%; margin-top: -20px; margin-left: -10px;][/border][/border][border=none; padding: 0px; height: 200px; width: 200px; border: 4px solid var(--accent); position: relative; border-radius: 100%; margin-top: -300px; margin-left: 100px;][/border][border=none; padding: 0px; height: 30px; width: 30px; background: var(--bg2); position: relative; border-radius: 100%; z-index: 1; margin-top: -40px; margin-left: 300px;][/border][border=none; padding: 0px; height: 130px; width: 130px; border: 4px solid var(--accent); position: relative; border-radius: 100%; margin-top: -40px; margin-left: 300px;][/border][border=none; padding: 0px; height: 80px; width: 80px; border: 4px solid var(--accent); position: relative; border-radius: 100%; margin-top: -200px; margin-left: 430px;][border=none; padding: 0px; height: 20px; width: 20px; background: var(--bg2); position: relative; border-radius: 100%; margin-top: 5px; margin-left: -70px;][/border][/border][border=none; padding: 0px; height: 250px; width: 250px; border: 4px solid var(--accent); position: relative; border-radius: 100%; margin-top: -50px; margin-left: 500px;][border=none; padding: 0px; height: 30px; width: 30px; background: var(--bg2); position: relative; border-radius: 100%; margin-top: -10px; margin-left: 150px;][/border][border=none; padding: 0px; height: 10px; width: 10px; border: 4px solid var(--accent); position: relative; border-radius: 100%; margin-top: -40px; margin-left: 35px;][/border][/border][/border][comment] ---------tab buttons (try not to make the button titles too long! 7 character max. but the icons can change to anything from font awesome icons!)------[/comment][border=none; padding: 0px; height: 70px; background: var(--accent);][border=none; padding: 0px; max-width: 340px; margin: auto; display: flex; flex-direction: row; justify-content: center;][comment] --------button one-----[/comment][border=none; padding: 0px; height: 50px; width: 50px; margin: 10px 0px 10px 0px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--unselected); font-family: var(--title);][border=none; padding: 0px; font-size: 15px; margin-top: 4px;][fa]fas fa-home[/fa][/border] basics[/border][comment] --------filer (ignore)-----[/comment][border=none; padding: 0px; height: 50px; width: 24px; margin: 10px 0px 10px 0px; pointer-events: auto;][/border][comment] --------button two-----[/comment][border=none; padding: 0px; height: 50px; width: 50px; margin: 10px 0px 10px 0px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--unselected); font-family: var(--title);][border=none; padding: 0px; font-size: 15px; margin-top: 4px;][fa]fas fa-user[/fa][/border] visage[/border][comment] --------filer (ignore)-----[/comment][border=none; padding: 0px; height: 50px; width: 24px; margin: 10px 0px 10px 0px; pointer-events: auto;][/border][comment] --------button three-----[/comment][border=none; padding: 0px; height: 50px; width: 50px; margin: 10px 0px 10px 0px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--selected); font-family: var(--title);][border=none; padding: 0px; font-size: 15px; margin-top: 4px;][fa]fas fa-comment[/fa][/border] psyche[/border][comment] --------filer (ignore)-----[/comment][border=none; padding: 0px; height: 50px; width: 24px; margin: 10px 0px 10px 0px; pointer-events: auto;][/border][comment] --------button four-----[/comment][border=none; padding: 0px; height: 50px; width: 50px; margin: 10px 0px 10px 0px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--unselected); font-family: var(--title);][border=none; padding: 0px; font-size: 15px; margin-top: 4px;][fa]fas fa-book[/fa][/border] history[/border][comment] -------end of tab buttons-------[/comment][/border][/border][border=none; padding: 0px; position: relative; display: flex; flex-direction: row; flex-wrap: wrap; padding: 10px;][comment] ---------filler (ignore)-------[/comment][border=none; padding: 0px; margin: 10px; width: 220px; height: 400px; background: grey; overflow: hidden; background-size: cover; background-position: 50% 50%; flex-grow: 1; pointer-events: auto;][comment] ------personality tabs begin--------[/comment][border=none; padding: 0px; margin-top: 320px; width: 700px; height: 60px; overflow: hidden; background: white;][border=none; padding: 0px; letter-spacing: 630px; line-height: 30px; margin-left: -25px;][tabs][comment] -------persona 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; flex-wrap: wrap; padding: 10px;][comment] ---------fourth image & tab buttons------[/comment][border=none; padding: 0px; margin: 10px; width: 220px; height: 400px; background: var(--img4); background-size: cover; background-position: 50% 0%; flex-grow: 1;][comment] ------persona button-----[/comment][border=none; padding: 0px; display: flex; flex-direction: row;][border=none; padding: 0px; margin-top: 320px; height: 20px; padding: 3px 10px; background: var(--bg2); color: var(--accent); font-family: var(--title);]› personality[/border][border=none; padding: 0px; flex-grow: 1; pointer-events: auto;][/border][/border][comment] ------misc info button-----[/comment][border=none; padding: 0px; display: flex; flex-direction: row-reverse;][border=none; padding: 0px; margin-top: 10px; height: 20px; padding: 3px 10px; background: var(--bg2); font-family: var(--title); text-align: right;]misc info ‹[/border][border=none; padding: 0px; flex-grow: 1; pointer-events: auto;][/border][/border][comment] --------end of buttons-----[/comment][/border][comment] ---------right side-------[/comment][border=none; padding: 0px; margin: 10px; width: 420px; height: 400px; flex-grow: 1;][comment] ------personality info comes here-------[/comment][border=none; padding: 0px; height: 280px; pointer-events: auto;][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; text-align: justify; line-height: 22px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi lectus, scelerisque et cursus vitae, porta a massa. Nullam semper molestie quam, eu sagittis nisi dictum varius. Nunc imperdiet bibendum mi in feugiat. Ut ultricies imperdiet enim, at ultrices eros imperdiet vel. Aliquam quis laoreet lacus. Praesent eget justo laoreet erat semper convallis. Morbi at cursus libero, non placerat lacus. Phasellus elementum enim eu justo ultrices luctus. Maecenas aliquam tincidunt mi, non interdum leo laoreet ut. Donec sagittis lacinia lacinia. Nullam bibendum augue vel tincidunt venenatis. Sed id rutrum tellus. Nulla ut mattis mauris, a posuere arcu. Mauris a iaculis purus. Nulla facilisi. Fusce leo quam, pretium a ipsum in, scelerisque pulvinar diam. Maecenas vulputate, nibh vitae semper commodo, metus eros iaculis elit, congue scelerisque sem turpis sit amet nulla. Vestibulum consequat libero quis velit molestie ultricies. Sed non nunc eu tellus elementum blandit. Pellentesque sit amet leo id justo pulvinar viverra quis sodales lorem. Vestibulum sodales quis urna in faucibus. Pellentesque tempus, risus ac malesuada mattis, libero mauris varius nisl, eu scelerisque massa arcu ut velit. Cras tortor diam, pulvinar ac purus feugiat, finibus laoreet justo. Aliquam nec dolor porttitor, fringilla elit eu, tristique dui. Suspendisse convallis aliquam risus sed scelerisque. Nullam nec lobortis dui. Vivamus auctor condimentum justo, ac feugiat nisi lacinia ut. Sed id lectus a magna lacinia egestas ut at felis. Cras laoreet diam eget lacus mollis, id fermentum metus congue. [/border][/border][/border][/border][comment] -------filler (ignore!)------[/comment][border=none; padding: 0px; height: 100px; margin-top: 20px;][/border][/border][comment] --------end of personality------[/comment][/border][/border][/tab][comment] -------misc info 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; flex-wrap: wrap; padding: 10px;][comment] ---------fifth image & tab buttons------[/comment][border=none; padding: 0px; margin: 10px; width: 220px; height: 400px; background: var(--img5); background-size: cover; background-position: 50% 0%; flex-grow: 1;][comment] ------persona button-----[/comment][border=none; padding: 0px; display: flex; flex-direction: row;][border=none; padding: 0px; margin-top: 320px; height: 20px; padding: 3px 10px; background: var(--bg2); font-family: var(--title);]› personality[/border][border=none; padding: 0px; flex-grow: 1; pointer-events: auto;][/border][/border][comment] ------misc info button-----[/comment][border=none; padding: 0px; display: flex; flex-direction: row-reverse;][border=none; padding: 0px; margin-top: 10px; height: 20px; padding: 3px 10px; background: var(--bg2); color: var(--accent); font-family: var(--title); text-align: right;]misc info ‹[/border][border=none; padding: 0px; flex-grow: 1; pointer-events: auto;][/border][/border][comment] --------end of buttons-----[/comment][/border][comment] ---------right side-------[/comment][border=none; padding: 0px; margin: 10px; width: 420px; height: 400px; flex-grow: 1;][comment] ------misc info comes here-------[/comment][border=none; padding: 0px; height: 280px; pointer-events: auto;][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; text-align: justify; line-height: 22px;][comment] -------likes-------[/comment][border=none; padding: 0px; font-family: var(--title); color: var(--accent); font-size: 14px; margin-left: 10px;]likes.[/border] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi lectus, scelerisque et cursus vitae, porta a massa. [comment]-------dislikes-------[/comment][border=none; padding: 0px; font-family: var(--title); color: var(--accent); font-size: 14px; margin-left: 10px;]dislikes.[/border] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi lectus, scelerisque et cursus vitae, porta a massa. [comment]-------hobbies-------[/comment][border=none; padding: 0px; font-family: var(--title); color: var(--accent); font-size: 14px; margin-left: 10px;]hobbies.[/border] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi lectus, scelerisque et cursus vitae, porta a massa. Nullam semper molestie quam, eu sagittis nisi dictum varius. Nunc imperdiet bibendum mi in feugiat. Ut ultricies imperdiet enim, at ultrices eros imperdiet vel. Aliquam quis laoreet lacus. Praesent eget justo laoreet erat semper convallis. [comment]-------habits-------[/comment][border=none; padding: 0px; font-family: var(--title); color: var(--accent); font-size: 14px; margin-left: 10px;]habits.[/border] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi lectus, scelerisque et cursus vitae, porta a massa. Nullam semper molestie quam, eu sagittis nisi dictum varius. Nunc imperdiet bibendum mi in feugiat. [comment]-------fears (copy this entire thing and paste below for another heading/section!)-------[/comment][border=none; padding: 0px; font-family: var(--title); color: var(--accent); font-size: 14px; margin-left: 10px;]fears.[/border] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi lectus, scelerisque et cursus vitae, porta a massa. Nullam semper molestie quam, eu sagittis nisi dictum varius. [/border][/border][/border][/border][comment] -------filler (ignore!)------[/comment][border=none; padding: 0px; height: 100px; margin-top: 20px;][/border][/border][comment] --------end of misc info------[/comment][/border][/border][/tab][comment] ---------end of personality tabs-------[/comment][/tabs][/border][/border][/border][comment] ---------right side of main content-------[/comment][border=none; padding: 0px; margin: 10px; width: 420px; height: 400px; flex-grow: 1;][comment] ------filler (ignore)-------[/comment][border=none; padding: 0px; height: 280px;][/border][comment] -------music player------[/comment][border=none; padding: 0px; height: 100px; margin-top: 20px; background: var(--bg2); box-sizing: border-box; border: var(--border); display: flex; flex-direction: row; pointer-events: auto;][border=none; padding: 0px; height: 98px; min-width: 98px; background: black; overflow: hidden; position: relative;][border=none; padding: 0px; height: 60px; width: 60px; padding: 0; margin-top: 17px; margin-left: 17px; overflow: hidden;][comment] --------put your soundcloud link here!------[/comment][media=soundcloud]https://soundcloud.com/hayleykiyoko/demons[/media][comment] ---------[/comment][/border][border=none; padding: 0px; background: var(--bg2); text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 60px; height: 98px; width: 98px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; pointer-events: none; color: var(--accent);][fa]fas fa-play-circle[/fa][/border][/border][border=none; padding: 0px; width: 100%; padding: 5px 25px 10px 10px;][border=none; padding: 0px; display: flex; flex-direction: row; padding-top: 8px; flex-wrap: wrap;][comment] ---------song title & artist-------[/comment][border=none; padding: 0px; flex-grow: 1; font-family: var(--title); color: var(--accent); font-size: 15px; padding-top: 5px; padding-left: 10px;]demons[/border][border=none; padding: 0px; flex-grow: 1; text-align: right; padding-top: 5px; padding-right: 10px;]hayley kiyoko[/border][/border][border=none; padding: 0px; margin: auto; height: 5px; overflow: hidden; background: #eee; border-radius: 15px; margin-top: 10px;][border=none; padding: 0px; height: 10px; width: 60%; background: var(--accent);][/border][/border][comment] -------song duration (you can change the numbers to reflect how long the song is if you want!)------[/comment][border=none; padding: 0px; padding-top: 5px; display: flex; flex-direction: row; font-size: 10px;][border=none; padding: 0px; flex-grow: 1;]0:00[/border][border=none; padding: 0px; flex-grow: 1; text-align: right;]2:59[/border][/border][/border][/border][comment] --------end of right side-------[/comment][/border][comment] -----------end of tab three------[/comment][/border][/border][/tab][comment] ---------fourth tab--------[/comment][tab=.][border=none; padding: 0px; position: absolute; bottom: 0; left:0; right: 0; top: 0; letter-spacing: 0px; background: var(--bg); opacity: 1; line-height: 20px; pointer-events: none;][comment] ---------header design (ignore)-------[/comment][border=none; padding: 0px; height: 100px; overflow: hidden;][border=none; padding: 0px; height: 150px; width: 150px; border: 4px solid var(--accent); position: relative; border-radius: 100%; margin-top: -100px; margin-left: -100px;][border=none; padding: 0px; height: 25px; width: 25px; background: var(--bg2); position: relative; border-radius: 100%; margin-top: 110px; margin-left: 190px;][/border][/border][border=none; padding: 0px; height: 100px; width: 100px; border: 4px solid var(--accent); position: relative; border-radius: 100%; margin-top: 10px; margin-left: 40px;][border=none; padding: 0px; height: 10px; width: 10px; border: 4px solid var(--accent); position: relative; border-radius: 100%; margin-top: -20px; margin-left: -10px;][/border][/border][border=none; padding: 0px; height: 200px; width: 200px; border: 4px solid var(--accent); position: relative; border-radius: 100%; margin-top: -300px; margin-left: 100px;][/border][border=none; padding: 0px; height: 30px; width: 30px; background: var(--bg2); position: relative; border-radius: 100%; z-index: 1; margin-top: -40px; margin-left: 300px;][/border][border=none; padding: 0px; height: 130px; width: 130px; border: 4px solid var(--accent); position: relative; border-radius: 100%; margin-top: -40px; margin-left: 300px;][/border][border=none; padding: 0px; height: 80px; width: 80px; border: 4px solid var(--accent); position: relative; border-radius: 100%; margin-top: -200px; margin-left: 430px;][border=none; padding: 0px; height: 20px; width: 20px; background: var(--bg2); position: relative; border-radius: 100%; margin-top: 5px; margin-left: -70px;][/border][/border][border=none; padding: 0px; height: 250px; width: 250px; border: 4px solid var(--accent); position: relative; border-radius: 100%; margin-top: -50px; margin-left: 500px;][border=none; padding: 0px; height: 30px; width: 30px; background: var(--bg2); position: relative; border-radius: 100%; margin-top: -10px; margin-left: 150px;][/border][border=none; padding: 0px; height: 10px; width: 10px; border: 4px solid var(--accent); position: relative; border-radius: 100%; margin-top: -40px; margin-left: 35px;][/border][/border][/border][comment] ---------tab buttons (try not to make the button titles too long! 7 character max. but the icons can change to anything from font awesome icons!)------[/comment][border=none; padding: 0px; height: 70px; background: var(--accent);][border=none; padding: 0px; max-width: 340px; margin: auto; display: flex; flex-direction: row; justify-content: center;][comment] --------button one-----[/comment][border=none; padding: 0px; height: 50px; width: 50px; margin: 10px 0px 10px 0px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--unselected); font-family: var(--title);][border=none; padding: 0px; font-size: 15px; margin-top: 4px;][fa]fas fa-home[/fa][/border] basics[/border][comment] --------filer (ignore)-----[/comment][border=none; padding: 0px; height: 50px; width: 24px; margin: 10px 0px 10px 0px; pointer-events: auto;][/border][comment] --------button two-----[/comment][border=none; padding: 0px; height: 50px; width: 50px; margin: 10px 0px 10px 0px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--unselected); font-family: var(--title);][border=none; padding: 0px; font-size: 15px; margin-top: 4px;][fa]fas fa-user[/fa][/border] visage[/border][comment] --------filer (ignore)-----[/comment][border=none; padding: 0px; height: 50px; width: 24px; margin: 10px 0px 10px 0px; pointer-events: auto;][/border][comment] --------button three-----[/comment][border=none; padding: 0px; height: 50px; width: 50px; margin: 10px 0px 10px 0px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--unselected); font-family: var(--title);][border=none; padding: 0px; font-size: 15px; margin-top: 4px;][fa]fas fa-comment[/fa][/border] psyche[/border][comment] --------filer (ignore)-----[/comment][border=none; padding: 0px; height: 50px; width: 24px; margin: 10px 0px 10px 0px; pointer-events: auto;][/border][comment] --------button four-----[/comment][border=none; padding: 0px; height: 50px; width: 50px; margin: 10px 0px 10px 0px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--selected); font-family: var(--title);][border=none; padding: 0px; font-size: 15px; margin-top: 4px;][fa]fas fa-book[/fa][/border] history[/border][comment] -------end of tab buttons-------[/comment][/border][/border][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; padding: 10px;][comment] ---------left side of main content-------[/comment][border=none; padding: 0px; margin: 10px; width: 320px; height: 400px; flex-grow: 1; pointer-events: auto;][comment] ---------background / history content comes here-------[/comment][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; text-align: justify; line-height: 22px;][comment] ---------first part of background------[/comment][border=none; padding: 0px; display: flex; height: 40px; background: var(--bg); position: sticky; top: 0px;][border=none; padding: 0px; height: 28px; padding: 3px 10px; background: var(--bg2); color: var(--accent); font-family: var(--title); font-size: 14px; box-sizing: border-box; border: var(--border);]the beginning[/border][border=none; padding: 0px; flex-grow: 1; height: 28px; display: flex; flex-direction: column; justify-content: space-evenly;][border=none; padding: 0px; height: 1px; background: #eee;][/border][/border][border=none; padding: 0px; height: 28px; padding: 3px 10px; background: var(--bg2); color: var(--accent); font-family: var(--title); font-size: 14px; box-sizing: border-box; border: var(--border);]1997[/border][/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi lectus, scelerisque et cursus vitae, porta a massa. Nullam semper molestie quam, eu sagittis nisi dictum varius. Nunc imperdiet bibendum mi in feugiat. Ut ultricies imperdiet enim, at ultrices eros imperdiet vel. Aliquam quis laoreet lacus. Praesent eget justo laoreet erat semper convallis. Morbi at cursus libero, non placerat lacus. Phasellus elementum enim eu justo ultrices luctus. Maecenas aliquam tincidunt mi, non interdum leo laoreet ut. Donec sagittis lacinia lacinia. Nullam bibendum augue vel tincidunt venenatis. Sed id rutrum tellus. Nulla ut mattis mauris, a posuere arcu. Mauris a iaculis purus. Nulla facilisi. Fusce leo quam, pretium a ipsum in, scelerisque pulvinar diam. Maecenas vulputate, nibh vitae semper commodo, metus eros iaculis elit, congue scelerisque sem turpis sit amet nulla. Vestibulum consequat libero quis velit molestie ultricies. Sed non nunc eu tellus elementum blandit. Pellentesque sit amet leo id justo pulvinar viverra quis sodales lorem. Vestibulum sodales quis urna in faucibus. Pellentesque tempus, risus ac malesuada mattis, libero mauris varius nisl, eu scelerisque massa arcu ut velit. [comment]---------second part of background------[/comment][border=none; padding: 0px; display: flex; height: 40px; background: var(--bg); position: sticky; top: 0px;][border=none; padding: 0px; height: 28px; padding: 3px 10px; background: var(--bg2); color: var(--accent); font-family: var(--title); font-size: 14px; box-sizing: border-box; border: var(--border);]the middle[/border][border=none; padding: 0px; flex-grow: 1; height: 28px; display: flex; flex-direction: column; justify-content: space-evenly;][border=none; padding: 0px; height: 1px; background: #eee;][/border][/border][border=none; padding: 0px; height: 28px; padding: 3px 10px; background: var(--bg2); color: var(--accent); font-family: var(--title); font-size: 14px; box-sizing: border-box; border: var(--border);]2009[/border][/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi lectus, scelerisque et cursus vitae, porta a massa. Nullam semper molestie quam, eu sagittis nisi dictum varius. Nunc imperdiet bibendum mi in feugiat. Ut ultricies imperdiet enim, at ultrices eros imperdiet vel. Aliquam quis laoreet lacus. Praesent eget justo laoreet erat semper convallis. Morbi at cursus libero, non placerat lacus. Phasellus elementum enim eu justo ultrices luctus. Maecenas aliquam tincidunt mi, non interdum leo laoreet ut. Donec sagittis lacinia lacinia. Nullam bibendum augue vel tincidunt venenatis. Sed id rutrum tellus. Nulla ut mattis mauris, a posuere arcu. Mauris a iaculis purus. Nulla facilisi. Fusce leo quam, pretium a ipsum in, scelerisque pulvinar diam. Maecenas vulputate, nibh vitae semper commodo, metus eros iaculis elit, congue scelerisque sem turpis sit amet nulla. Vestibulum consequat libero quis velit molestie ultricies. Sed non nunc eu tellus elementum blandit. Pellentesque sit amet leo id justo pulvinar viverra quis sodales lorem. Vestibulum sodales quis urna in faucibus. Pellentesque tempus, risus ac malesuada mattis, libero mauris varius nisl, eu scelerisque massa arcu ut velit. [comment]---------thord part of background (copy this entire section and paste below if you want another part of the background!)------[/comment][border=none; padding: 0px; display: flex; height: 40px; background: var(--bg); position: sticky; top: 0px;][border=none; padding: 0px; height: 28px; padding: 3px 10px; background: var(--bg2); color: var(--accent); font-family: var(--title); font-size: 14px; box-sizing: border-box; border: var(--border);]the present[/border][border=none; padding: 0px; flex-grow: 1; height: 28px; display: flex; flex-direction: column; justify-content: space-evenly;][border=none; padding: 0px; height: 1px; background: #eee;][/border][/border][border=none; padding: 0px; height: 28px; padding: 3px 10px; background: var(--bg2); color: var(--accent); font-family: var(--title); font-size: 14px; box-sizing: border-box; border: var(--border);]2021[/border][/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi lectus, scelerisque et cursus vitae, porta a massa. Nullam semper molestie quam, eu sagittis nisi dictum varius. Nunc imperdiet bibendum mi in feugiat. Ut ultricies imperdiet enim, at ultrices eros imperdiet vel. Aliquam quis laoreet lacus. Praesent eget justo laoreet erat semper convallis. Morbi at cursus libero, non placerat lacus. Phasellus elementum enim eu justo ultrices luctus. Maecenas aliquam tincidunt mi, non interdum leo laoreet ut. Donec sagittis lacinia lacinia. Nullam bibendum augue vel tincidunt venenatis. Sed id rutrum tellus. Nulla ut mattis mauris, a posuere arcu. Mauris a iaculis purus. Nulla facilisi. Fusce leo quam, pretium a ipsum in, scelerisque pulvinar diam. Maecenas vulputate, nibh vitae semper commodo, metus eros iaculis elit, congue scelerisque sem turpis sit amet nulla. Vestibulum consequat libero quis velit molestie ultricies. Sed non nunc eu tellus elementum blandit. Pellentesque sit amet leo id justo pulvinar viverra quis sodales lorem. Vestibulum sodales quis urna in faucibus. Pellentesque tempus, risus ac malesuada mattis, libero mauris varius nisl, eu scelerisque massa arcu ut velit. [/border][/border][/border][comment] ----------images six and seven--------[/comment][border=none; padding: 0px; margin-top: 20px; display: flex; flex-direction: row;][border=none; padding: 0px; margin-right: 20px; width: 50%; height: 120px; background: var(--img6); background-size: cover; background-position: 50% 20%;][/border][border=none; padding: 0px; width: 50%; height: 120px; background: var(--img7); background-size: cover; background-position: 50% 20%;][/border][/border][/border][comment] ---------relationships-------[/comment][border=none; padding: 0px; margin: 10px; width: 320px; 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] --------relationship one-------[/comment][border=none; padding: 0px; height: 85px; display: flex; flex-direction: row;][border=none; padding: 0px; min-width: 85px; height: 85px; border-radius: 100%; box-sizing: border-box; border: 3px solid var(--accent); background: var(--r-img1); background-size: cover; background-position: 50% 50%; margin-right: 10px;][/border][border=none; padding: 0px; width: 100%;][comment] -------character name here------[/comment][border=none; padding: 0px; height: 20px; box-sizing: border-box; background: var(--bg2); padding: 0px 5px; font-family: var(--title); color: var(--accent); display: flex; flex-direction: column; justify-content: space-evenly;]character name[/border][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 55px; margin-top: 10px; overflow: hidden;][border=none; padding: 0px; height: 100%; width: 200%; overflow-y: auto;][comment] ------relationship description here-------[/comment][border=none; padding: 0px; height: auto; width: 50%; box-sizing: border-box; text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi lectus, scelerisque et cursus vitae, porta a massa. Nullam semper molestie quam, eu sagittis nisi dictum varius. Nunc imperdiet bibendum mi in feugiat. Ut ultricies imperdiet enim, at ultrices eros imperdiet vel. Aliquam quis laoreet lacus. Praesent eget justo laoreet erat semper convallis. Morbi at cursus libero, non placerat lacus. Phasellus elementum enim eu justo ultrices luctus. [/border][/border][/border][/border][/border][comment] --------relationship two-------[/comment][border=none; padding: 0px; margin-top: 20px; height: 85px; display: flex; flex-direction: row;][border=none; padding: 0px; min-width: 85px; height: 85px; border-radius: 100%; box-sizing: border-box; border: 3px solid var(--accent); background: var(--r-img2); background-size: cover; background-position: 50% 50%; margin-right: 10px;][/border][border=none; padding: 0px; width: 100%;][comment] -------character name here------[/comment][border=none; padding: 0px; height: 20px; box-sizing: border-box; background: var(--bg2); padding: 0px 5px; font-family: var(--title); color: var(--accent); display: flex; flex-direction: column; justify-content: space-evenly;]character name[/border][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 55px; margin-top: 10px; overflow: hidden;][border=none; padding: 0px; height: 100%; width: 200%; overflow-y: auto;][comment] ------relationship description here-------[/comment][border=none; padding: 0px; height: auto; width: 50%; box-sizing: border-box; text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi lectus, scelerisque et cursus vitae, porta a massa. Nullam semper molestie quam, eu sagittis nisi dictum varius. Nunc imperdiet bibendum mi in feugiat. Ut ultricies imperdiet enim, at ultrices eros imperdiet vel. Aliquam quis laoreet lacus. Praesent eget justo laoreet erat semper convallis. Morbi at cursus libero, non placerat lacus. Phasellus elementum enim eu justo ultrices luctus. [/border][/border][/border][/border][/border][comment] --------relationship three-------[/comment][border=none; padding: 0px; margin-top: 20px; height: 85px; display: flex; flex-direction: row;][border=none; padding: 0px; min-width: 85px; height: 85px; border-radius: 100%; box-sizing: border-box; border: 3px solid var(--accent); background: var(--r-img3); background-size: cover; background-position: 50% 50%; margin-right: 10px;][/border][border=none; padding: 0px; width: 100%;][comment] -------character name here------[/comment][border=none; padding: 0px; height: 20px; box-sizing: border-box; background: var(--bg2); padding: 0px 5px; font-family: var(--title); color: var(--accent); display: flex; flex-direction: column; justify-content: space-evenly;]character name[/border][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 55px; margin-top: 10px; overflow: hidden;][border=none; padding: 0px; height: 100%; width: 200%; overflow-y: auto;][comment] ------relationship description here-------[/comment][border=none; padding: 0px; height: auto; width: 50%; box-sizing: border-box; text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi lectus, scelerisque et cursus vitae, porta a massa. Nullam semper molestie quam, eu sagittis nisi dictum varius. Nunc imperdiet bibendum mi in feugiat. Ut ultricies imperdiet enim, at ultrices eros imperdiet vel. Aliquam quis laoreet lacus. Praesent eget justo laoreet erat semper convallis. Morbi at cursus libero, non placerat lacus. Phasellus elementum enim eu justo ultrices luctus. [/border][/border][/border][/border][/border][comment] --------relationship four-------[/comment][border=none; padding: 0px; margin-top: 20px; height: 85px; display: flex; flex-direction: row;][border=none; padding: 0px; min-width: 85px; height: 85px; border-radius: 100%; box-sizing: border-box; border: 3px solid var(--accent); background: var(--r-img4); background-size: cover; background-position: 50% 50%; margin-right: 10px;][/border][border=none; padding: 0px; width: 100%;][comment] -------character name here------[/comment][border=none; padding: 0px; height: 20px; box-sizing: border-box; background: var(--bg2); padding: 0px 5px; font-family: var(--title); color: var(--accent); display: flex; flex-direction: column; justify-content: space-evenly;]character name[/border][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 55px; margin-top: 10px; overflow: hidden;][border=none; padding: 0px; height: 100%; width: 200%; overflow-y: auto;][comment] ------relationship description here-------[/comment][border=none; padding: 0px; height: auto; width: 50%; box-sizing: border-box; text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi lectus, scelerisque et cursus vitae, porta a massa. Nullam semper molestie quam, eu sagittis nisi dictum varius. Nunc imperdiet bibendum mi in feugiat. Ut ultricies imperdiet enim, at ultrices eros imperdiet vel. Aliquam quis laoreet lacus. Praesent eget justo laoreet erat semper convallis. Morbi at cursus libero, non placerat lacus. Phasellus elementum enim eu justo ultrices luctus. [/border][/border][/border][/border][/border][comment] --------relationship five (copy this entire section and paste below for an additional relationship! don't forget to change the r-img number to add another image!)-------[/comment][border=none; padding: 0px; margin-top: 20px; height: 85px; display: flex; flex-direction: row;][border=none; padding: 0px; min-width: 85px; height: 85px; border-radius: 100%; box-sizing: border-box; border: 3px solid var(--accent); background: var(--r-img5); background-size: cover; background-position: 50% 50%; margin-right: 10px;][/border][border=none; padding: 0px; width: 100%;][comment] -------character name here------[/comment][border=none; padding: 0px; height: 20px; box-sizing: border-box; background: var(--bg2); padding: 0px 5px; font-family: var(--title); color: var(--accent); display: flex; flex-direction: column; justify-content: space-evenly;]character name[/border][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 55px; margin-top: 10px; overflow: hidden;][border=none; padding: 0px; height: 100%; width: 200%; overflow-y: auto;][comment] ------relationship description here-------[/comment][border=none; padding: 0px; height: auto; width: 50%; box-sizing: border-box; text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi lectus, scelerisque et cursus vitae, porta a massa. Nullam semper molestie quam, eu sagittis nisi dictum varius. Nunc imperdiet bibendum mi in feugiat. Ut ultricies imperdiet enim, at ultrices eros imperdiet vel. Aliquam quis laoreet lacus. Praesent eget justo laoreet erat semper convallis. Morbi at cursus libero, non placerat lacus. Phasellus elementum enim eu justo ultrices luctus. [/border][/border][/border][/border][/border][comment] -------end of relationships------[/comment][/border][/border][/border][/border][comment] -----------end of tab four------[/comment][/border][/border][/tab][comment] -----------end of tabs------[/comment][/tabs][/border][/border][/border][comment] ----------content filler (ignore)---------[/comment][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; padding: 10px;][border=none; padding: 0px; height: 400px; margin: 10px; width: 320px; background: black; flex-grow: 1;][/border][border=none; padding: 0px; height: 400px; margin: 10px; width: 320px; background: black; flex-grow: 1;][/border][/border][comment] ----------end of code-------[/comment][/border][/border][comment]------credit (don't remove!)------[/comment][border=none; padding: 0px; text-align: center; color: #888; margin-top: 10px; font-size: 8px; letter-spacing: 3px; text-transform: uppercase;]coded by natasha.[/border]