[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]