[div=
display: none;]
/* LOADING FONTS */
[FONT=IM Fell English SC]Header Font[/FONT]
[FONT=Port Lligat Sans]Port Lligat Sans[/FONT]
[/div][div=
/* ROOT START */
/* BACKGROUNDS */
--bg: radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 0,rgba(0,0,0,0.55) 260px), url(https://imgur.com/IpInJmc.jpg) 50% 50% / cover;
--body-bg: #ffffff88;
/* ENTER 350 x 350 CHARACTER PORTRAIT */
--character-pic: url(https://i.pinimg.com/564x/8d/4d/0c/8d4d0c22e2515b275bf13a2fa564a479.jpg);
--character-pic-size: cover;
--character-pic-position: 50% 50%;
/* COLORS */
--main-color: #fff;
--accent-color: #bc0909;
--lighter-accent: #bc090948;
--h2-color: #6a1717;
--body-font-color: #000;
/* FONT FAMILIES */
--header-font: IM Fell English SC;
--subtitle-font: Port Lligat Sans;
--body-font: Port Lligat Sans;
/* FONT SIZES */
/* clamp(min, ideal, max) change min & max only for responsive font-sizes */
--header-size: clamp(50px, 5vw, 70px);
--subtitle-size: clamp(25px, 2vw, 35px);
--h2-size: 2rem;
--body-size: 1.3rem;
/* HEADER POSITIONING */
/* notes on alignment: flex-start (to position left) | center | flex-end (to position right) */
/* notes on h-offset: input 0 for none */
--name-h-offset: 10%;
--name-align: flex-start;
--role-h-offset: -10%;
--role-align: flex-end;
/* OTHER */
--button-border: 1px solid #ffffff90;
--mp3-font-color: #ffffff98;
/* ROOT END */][div=
/* TABS CONTAINER */
width: 444px;
margin: auto;
overflow: hidden;][div=
margin-top: -40px;][TABS=444x0]{slide=1}[div=
/* SLIDE OUTER CONTAINER */
overflow: hidden;
display: grid;][div=
/* SLIDE INNER CONTAINER */
grid-column-start: 1;
grid-row-start: 1;
width: 100%;
height: 640px;
margin: auto;
background: var(--bg);
border-radius: 30px;][div=
width: clamp(310px, 50vw, 350px);
margin: auto;
height: clamp(310px, 50vw, 350px);
background: var(--character-pic) var(--character-pic-position) / var(--character-pic-size), var(--accent-color);
background-blend-mode: multiply;
mask: radial-gradient(circle at 50% 50%,rgba(0,0,0,1) 30%, rgba(0,0,0,0) 70%);
-webkit-mask: radial-gradient(circle at 50% 50%,rgba(0,0,0,1) 30%, rgba(0,0,0,0) 70%);
border-radius: 50%;][/div][/div][div=
grid-column-start: 1;
grid-row-start: 1;
display: flex;
align-items: center;
justify-content: center;][div=
width: 140px;
height: 140px;
background: var(--lighter-accent);
rotate: 70deg;
transform: skew(15deg,15deg);
translate: 0 90%;][/div][/div][div=
grid-column-start: 1;
grid-row-start: 1;
display: flex;
align-items: center;
justify-content: var(--name-align);
translate: var(--name-h-offset) 17%;
font-family: var(--header-font);
font-size: var(--header-size);
color: var(--main-color);
text-transform: uppercase;
text-shadow: 1px 1px 1px #000;
text-align: var(--name-align);
/* ENTER FIRST NAME */]Lorem[/div][div=
grid-column-start: 1;
grid-row-start: 1;
display: flex;
align-items: center;
justify-content: var(--role-align);
translate: var(--role-h-offset) 25%;
font-family: var(--header-font);
font-size: var(--subtitle-size);
color: var(--accent-color);
text-transform: uppercase;
text-shadow: 1px 1px 1px #000;
text-align: var(--role-align);
/* ENTER ROLE: FOUNDING HEIR or THE OUTSIDER or HOLLOW ONE */]The Outsider[/div][div=
/* BUTTON START */
grid-column-start: 1;
grid-row-start: 1;
display: flex;
align-items: flex-end;
justify-content: flex-end;
translate: -10% -5%;][div=
width: 140px;
display: flex;
background: var(--lighter-accent);][div=
width: 5%;
border-top: var(--button-border);
border-bottom: var(--button-border);
border-left: var(--button-border);
padding: 3%;][/div][div=
flex: 1;
padding: 5%;
font-family: var(--subtitle-font);
font-size: var(--body-size);
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;]{tab=2}[COLOR=#fff]Read more[/COLOR]{/tab}[/div][div=
width: 5%;
border-top: var(--button-border);
border-bottom: var(--button-border);
border-right: var(--button-border);
padding: 3%;
/* BUTTON END */][/div][/div][/div][/div]{/slide}{slide=2}[div=
/* SLIDE 2 OUTER CONTAINER */
overflow: hidden;][div=
/* SLIDE 2 INNER CONTAINER */
width: 100%;
display: flex;
flex-direction: column;
gap: 10px;
height: 640px;
margin: auto;
background: var(--bg);
border-radius: 30px;
padding: clamp(10px, 0.5vw, 20px);][div=
/* BUTTON START */
width: 80px;
display: flex;
background: var(--lighter-accent);][div=
width: 5%;
border-top: var(--button-border);
border-bottom: var(--button-border);
border-left: var(--button-border);
padding: 3%;][/div][div=
flex: 1;
padding: 5%;
font-family: var(--subtitle-font);
font-size: var(--body-size);
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;]{tab=1}[COLOR=#fff]Back[/COLOR]{/tab}[/div][div=
width: 5%;
border-top: var(--button-border);
border-bottom: var(--button-border);
border-right: var(--button-border);
padding: 3%;
/* BUTTON END */][/div][/div][div=
/* BODY START */
flex: 1;
background: var(--body-bg);
border-radius: 30px;
padding: 5% 4% 5% 1%;][div=
height: 100%;
overflow: hidden;][div=
width: 110%;
height: 500px;
overflow-y: scroll;
margin-left: 3.5%;
padding-right: 5%;
font-family: var(--body-font);
font-size: 1.6rem;
color: var(--body-font-color);
/* ENTER BODY CONTENT */][div=
/* BASIC INFO */
font-family: var(--header-font);
font-size: var(--h2-size);
color: var(--h2-color);
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;]Info[/div][B]Name:[/B] [Founding Family Surnames: Blackwood / Bloodheart / Crowthorne / Darkstone / Dreamford]
[B]Nickname:[/B]
[B]Allegiance:[/B] Founding Family / Hollow of the Roots / Outsider
[B]Occupation:[/B] [For Founding Families only: Heir/Architect/Relative of Heir/Second-in-line, etc.]
[B]Birthday & Age:[/B] Must be between 18 - 23 (For Founding Families: 19 - 23)
[div=
/* BACKSTORY */
font-family: var(--header-font);
font-size: var(--h2-size);
color: var(--h2-color);
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;]Backstory[/div]Condense the most important details about your character into an elevator pitch consisting of 100 - 300 words. Bear in mind that this rp takes place in the year 1987!
[div=
/* CURIOS - FOUNDING FAMILIES ONLY */
font-family: var(--header-font);
font-size: var(--h2-size);
color: var(--h2-color);
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;]Curios[/div][Founding Families only - any notable curios in your character's possession go here]
[B]Bloodletter:[/B]
[div=
/* ABILITIES - HOLLOWS ONLY */
font-family: var(--header-font);
font-size: var(--h2-size);
color: var(--h2-color);
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;]Abilities & Limitations[/div][Hollows only]
Between 1-2 abilities balanced out with the right amount of limitations. Must be unique so as to encourage cooperation between the Hollow characters.
[B]Fatal Flaw(s):[/B] Reminder - your character is not aware of their fatal flaw(s)
[div=
/* PHYSICAL CHAR */
font-family: var(--header-font);
font-size: var(--h2-size);
color: var(--h2-color);
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;]Physical Characteristics[/div]Image (semi-realistic artwork only) and/or a short description. You do not need to provide an image if you have a description, and vice versa.
[B]Height:[/B]
[div=
/* OTHER */
font-family: var(--header-font);
font-size: var(--h2-size);
color: var(--h2-color);
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;]Other[/div]Misc. Information goes here.
[/div][/div][/div][div=
/* BODY END
MP3 PLAYER START */
height: 30px;
overflow: none;][div=
width: 50px;
opacity: 0.01;
/* ENTER YOUTUBE ID (ALPHANUMERIC STRING IN URL) */][MEDIA=youtube]xvFZjo5PgG0[/MEDIA][/div][div=
height: 30px;
background: var(--lighter-accent);
border-radius: 30px;
display: flex;
gap: 5px;
top: -28px;
pointer-events: none;
color: var(--mp3-font-color);][div=
min-width: 50px;
font-size: 20px;
padding: 0 5px;][FA]fa-play-circle[/FA][FA]fa-pause-circle[/FA][/div][div=
display : flex;
align-items: center;
font-size: 12px;
/* ENTER SONG & ARTIST */]SONG - ARTIST[/div][/div][/div][/div][/div]{/slide}[/TABS][/div][/div][div=
margin-top: 5px;
font-size: 10px;
text-align: center;
opacity: 0.7;]Coded by Ardent[/div][/div][div=
display: none;
/* LOADING FONTS */]
[FONT=IM Fell English SC]Font 1[/FONT]
[FONT=Port Lligat Sans]Font 2[/FONT][/div][div=
/* ROOT START* /
/* CHARACTER IMAGE */
--character-img: url(https://via.placeholder.com/280x280.png/0e0e0e);
--character-img-repeat: no-repeat;
--character-img-position: 50% 50%;
--character-img-size: cover;
/* BACKGROUNDS */
--sidebar-bg: url(https://i.imgur.com/FbhM2mJ.jpg);
--body-bg: url(https://i.imgur.com/m3dazQ2.jpg);
--body-bg-overlay: #ffffff58;
--info-bg: #33070895; /* FOR LOCATION, INTERACTION, AND MUSIC PLAYER */
/* COLORS */
--font-color-1: #fff;
--font-color-2: #1b1b1b;
--font-color-3: #ffffff95; /* FOR LOCATION, INTERACTION, AND MUSIC PLAYER */
--border-color: #540c0d;
/* FONTS & SIZES */
--name-font: IM Fell English SC;
--name-size: 38px; /* FOR LONGER NAMES, TRY 28px */
--body-font: Port Lligat Sans;
--body-size: 1.7rem;
/* MP3 */
--display-mp3: default; /* CHANGE "DEFAULT" TO "NONE" TO REMOVE MP3 PLAYER */
/* ROOT END */][div=
width: 800px;
margin: auto;][div=
display: flex;
flex-wrap: wrap;
gap: clamp(5px, 1vw, 10px);][div=
/* SIDEBAR START */
flex: 1;
min-width: 330px;
display: flex;
align-items: center;
justify-content: center;
background: var(--sidebar-bg);
padding: 20px 0;
color: var(--font-color-1);][div=
padding: clamp(3px, 1vw, 10px);][div=
font-family: var(--name-font);
font-size: var(--name-size);
text-transform: uppercase;
text-align: center;
letter-spacing: 6px;
z-index: 2;
/* * * * TYPE FIRST NAME * * * */]First Name[/div][div=
top: -10px;
width: clamp(230px, 50vw, 280px);
margin: auto;
height: clamp(230px, 50vw, 280px);
background: var(--character-img) var(--character-img-repeat) var(--character-img-position) / var(--character-img-size);
mask: url(https://i.imgur.com/DybkVzH.png) 50% 50% / cover;
-webkit-mask: url(https://i.imgur.com/DybkVzH.png) 50% 50% / cover;
scale: 1.4;
z-index: 1;][/div][div=
font-family: var(--name-font);
font-size: var(--name-size);
text-transform: uppercase;
text-align: center;
letter-spacing: 6px;
z-index: 2;
/* * * * TYPE LAST NAME * * * */]Last Name[/div][div=
display: flex;
flex-direction: column;
gap: 5px;
font-family: var(--body-font);
font-size: var(--body-size);
color: var(--font-color-3);][div=
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 5px;][div=
/* MP3 PLAYER START */
height: 30px;
overflow: hidden;
display: var(--display-mp3);][div=
width: 50px;
opacity: 0.01;
/* * * * TYPE YOUTUBE ID (ALPHANUMERIC STRING IN URL) * * * */][MEDIA=youtube]xvFZjo5PgG0[/MEDIA][/div][div=
display: flex;
align-items: center;
gap: 5px;
top: -25px;
pointer-events: none;][FA]fa-play-circle[/FA][div=
max-width: 250px !important;
padding: 0 5px;
background: var(--info-bg);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
/* * * * TYPE SONG & ARTIST * * * */]Theme Song[/div][/div][/div][div][div=
/* MP3 PLAYER END */
display: flex;
gap: 5px;][TOOLTIP=Location][fa]fa fa-location[/fa][/TOOLTIP][div=
max-width: 250px !important;
padding: 0 5px;
background: var(--info-bg);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
/* * * * TYPE LOCATION * * * */]Location[/div][/div][/div][/div][div=
margin: auto;
display: flex;
gap: 5px;][TOOLTIP=Interaction][fa]fa fa-comment[/fa][/TOOLTIP][div=
max-width: 250px !important;
max-height: 40px;
overflow-y: auto;
background: var(--info-bg);
padding: 0 5px;
/* * * * TYPE INTERACTIONS * * * */]@/user[/div][/div][/div][/div][/div][div=
/* SIDEBAR END - BODY START */
flex: 2;
min-width: 330px;
background: var(--body-bg) 50% 0%, var(--body-bg-overlay);
background-blend-mode: overlay;
height: 550px;
padding: 10px 30px;
font-family: var(--body-font);
color: var(--font-color-2);
font-size: var(--body-size);
line-height: 25px;
border-top: 30px solid var(--border-color);
border-bottom: 30px solid var(--border-color);
overflow-y: scroll;
scrollbar-width: thin; /* FIREFOX ONLY */
/* * * * TYPE CONTENT BODY * * * */]Lorem ipsum[/div][/div][div=
/* BODY END */
margin-top: 5px;
font-size: 10px;
text-align: center;
opacity: 0.7;]Coded by Ardent[/div][/div][/div][/SPOILER][/div][div=
display: none;
/* LOADING FONTS */]
[FONT=IM Fell English SC]Font 1[/FONT]
[FONT=Port Lligat Sans]Font 2[/FONT][/div][div=
/* <---- ROOT START ----> * /
/* BACKGROUNDS */
--banner-bg: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/e4a5e50d-46b4-4be8-ab06-66436894e13f/d14i36q-15ed4ab6-adba-4b72-9771-27d37741dfa9.jpg/v1/fill/w_900,h_675,q_75,strp/hogwarts_school_corridor_by_everild_wolfden_d14i36q-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9Njc1IiwicGF0aCI6IlwvZlwvZTRhNWU1MGQtNDZiNC00YmU4LWFiMDYtNjY0MzY4OTRlMTNmXC9kMTRpMzZxLTE1ZWQ0YWI2LWFkYmEtNGI3Mi05NzcxLTI3ZDM3NzQxZGZhOS5qcGciLCJ3aWR0aCI6Ijw9OTAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.Pl0-Kq465HWDgSlAwtuI_gxiGLGDEn3qjgwZWr_4ISQ) 50% 50% / cover;
--banner-mask: url(https://i.imgur.com/FbhM2mJ.jpg);
--info-bg: #33070895; /* FOR LOCATION, INTERACTION, AND MUSIC PLAYER */
--body-bg: url(https://i.imgur.com/LeAjIl8.jpg), #350202;
/* COLORS */
--font-color-1: #fff;
--font-color-2: #1b1b1b;
--font-color-3: #ffffff95; /* FOR LOCATION, INTERACTION, AND MUSIC PLAYER */
/* FONTS & SIZES */
--title-font: IM Fell English SC;
--title-size: clamp(20px, 2vw, 38px);
--subtitle-size: clamp(20px, 2vw, 24px);
--body-font: Port Lligat Sans;
--body-size: 1.7rem;
/* MP3 */
--display-mp3: default; /* CHANGE "DEFAULT" TO "NONE" TO REMOVE MP3 PLAYER */
/* <---- ROOT END ----> */][div=
top: 50px;
width: 800px;
margin: auto;][div=
/* <---- BANNER START ----> */
height: 500px;
margin: auto;
padding: 60px 0;
display: flex;
flex-direction: column;
justify-content: center;
background: radial-gradient(circle at 50% 50%,rgba(0,0,0,0), rgba(0,0,0,0.80) 90%), var(--banner-bg);
color: var(--font-color-1);][div=
width: inherit;
height: 160px;
/* <-------- IMAGE MASK --------> */
background: var(--banner-mask);
mask: url(https://i.imgur.com/kxne7Sl.png) 50% 50% / cover;
scale: 1.06;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;][div=
font-family: var(--title-font);
font-size: var(--title-size);
text-align: center;
/* text-shadow: 0 0 3px white, 0 0 5px #ffffff80, 0 0 10px #ffffff60, 0 0 15px #ffffff40, 0 0 20px #ffffff20; */
letter-spacing: 2px;
z-index: 2;
/* <-------- TYPE TITLE --------> */]Title Here[/div][div=
font-family: var(--title-font);
font-size: var(--subtitle-size);
text-transform: lowercase;
color: var(--font-color-3);
letter-spacing: 3px;
/* <-------- TYPE SUBTITLE --------> */]a collaborative post[/div][/div][div=
font-family: var(--body-font);
font-size: var(--body-size);
color: var(--font-color-3);][div=
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: right;
padding: 10px 20px 0 0;
gap: 5px;][div=
/* <---- MP3 PLAYER START ----> */
height: 30px;
overflow: hidden;
display: var(--display-mp3);][div=
width: 50px;
opacity: 0.01;
/* <-------- TYPE YOUTUBE ID (ALPHANUMERIC STRING IN URL) --------> */][MEDIA=youtube]xvFZjo5PgG0[/MEDIA][/div][div=
display: flex;
align-items: center;
gap: 5px;
top: -25px;
pointer-events: none;][FA]fa-play-circle[/FA][div=
max-width: 250px !important;
padding: 0 5px;
background: var(--info-bg);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
/* <-------- TYPE SONG & ARTIST --------> */]Theme Song[/div][/div][/div][div][div=
/* <---- MP3 PLAYER END ----> */
display: flex;
gap: 5px;][TOOLTIP=Location][fa]fa fa-location[/fa][/TOOLTIP][div=
max-width: 250px !important;
padding: 0 5px;
background: var(--info-bg);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
/* <-------- TYPE LOCATION --------> */]Location[/div][/div][/div][div=
display: flex;
gap: 5px;][TOOLTIP=Interaction][fa]fa fa-comment[/fa][/TOOLTIP][div=
max-width: 250px !important;
max-height: 40px;
overflow-y: auto;
background: var(--info-bg);
padding: 0 5px;
/* <-------- TYPE INTERACTIONS --------> */]@/user[/div][/div][/div][/div][/div][div=
visibility: hidden;
top: -106px;][accordion=100%]{slide=[div=
min-width: 105% !important;
margin: -10px;
background: none;
visibility: visible;
padding: 20px;][div=
display: flex;
align-items: flex-start;
justify-content: center;
height: 40px;
padding-bottom: 20px;][div=
height: 30px;
animation: fb_mpn_bounce_out 1s linear infinite alternate;
font-size: 40px;
-webkit-text-fill-color: #fff;][FA]fas fa-chevron-down[/FA][/div][/div]}[div=
max-width: 800px !important;
margin: -10px;
padding: 20px;
background: var(--body-bg);
background-blend-mode: darken;
visibility: visible;][div=
background: #00000080;
padding: 20px;
font-family: var(--body-font);
font-size: var(--body-size);
line-height: 3rem;
color: var(--font-color-3);
/* <---- BODY START----> */]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet enim nec lectus porttitor posuere. Morbi eget condimentum tortor. Nullam eget maximus tellus. Vivamus suscipit facilisis ante vel tempus. Maecenas purus urna, ultrices a mattis ac, commodo ac arcu. Integer sapien ex, mattis id interdum non, varius fermentum lacus. Nunc rutrum euismod posuere. Vestibulum blandit eros in nisl faucibus ullamcorper. Fusce pharetra, ante a tempus accumsan, arcu ex cursus erat, et sodales arcu metus at est. In interdum augue feugiat metus cursus imperdiet. Phasellus euismod porttitor diam, sed maximus elit auctor at. Vestibulum euismod sodales mollis. Sed efficitur nisi in odio dictum accumsan a id sapien. Suspendisse in nunc ultricies, tempor erat sit amet, iaculis turpis. Quisque mattis, odio sit amet semper iaculis, dolor turpis egestas elit, et pharetra nulla ex vel est.
Curabitur dignissim vestibulum fringilla. Pellentesque at rhoncus sapien. Duis quis neque nec eros volutpat condimentum vel nec augue. Praesent sed finibus dolor, et aliquam leo. In condimentum metus at ligula viverra, eget dapibus ex ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse potenti. Morbi commodo eros eu egestas hendrerit. Etiam ante nibh, facilisis eget nunc sed, consectetur cursus mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Phasellus vulputate tincidunt metus, ut ornare nunc gravida ut. Aliquam id condimentum mauris, ac posuere nisl. In eu elementum neque, vitae volutpat libero. Nulla ultricies, dolor quis vehicula gravida, nunc sapien gravida ipsum, sollicitudin vulputate nulla urna nec ex. Maecenas vitae porttitor tellus, id dapibus ante. Maecenas hendrerit nulla at venenatis malesuada. Cras quis scelerisque ligula. Aliquam pretium convallis neque, non suscipit urna sagittis nec. Cras at facilisis ante. Donec elit odio, hendrerit in lectus id, condimentum iaculis magna. Pellentesque ipsum lacus, aliquam semper enim at, condimentum suscipit dui.[/div][/div]{/slide}[/div][/accordion][/div][div=
/* <---- BODY END ----> */
top: -110px;
right: 10px;
font-size: 10px;
text-align: right;
opacity: 0.7;]Coded by Ardent[/div][/div][/div]