[div=
display: none;
/* <-------- LOADING FONTS --------> */]
[FONT=Belanosima]Title Font[/FONT]
[FONT=Outfit]Body Font[/FONT][/div]
[div=
/* <-------- ROOT --------> */
--main-font: Belanosima;
--body-font: Outfit;
/* <---- NAV ----> */
--title-fsize: 80px;
--title-color: #d7ab57;
--button-bg-1: url(https://i.pinimg.com/564x/7d/51/3c/7d513ce348464988234df77be8ee109d.jpg) 50% 20% / cover;
--button-bg-2: url(https://i.pinimg.com/564x/f8/a4/64/f8a464885974bec037018218e2087300.jpg) 50% 10% / cover;
--button-bg-3: url(https://i.pinimg.com/564x/99/b2/04/99b2047050ce18e40d3fd3bd75d2f715.jpg) 50% 60% / cover;
--button-color-blend: #644f6f;
--button-fcolor: #fff;
--button-fsize: 1.5rem;
--button-border-active: 1px solid #d7ab57;
--button-border: 1px solid #ffffff40;
--button-border-radius: 15px;
--button-blend-mode: overlay;
--button-text-shadow: 0 0 3px #1b1b1b, 0 0 5px #1b1b1b, 0 0 10px #1b1b1b, 0 0 15px #1b1b1b, 0 0 20px #1b1b1b;
/* <---- BODY ----> */
--body-border: 1px solid #1b1b1b58;
--body-border-radius: 15px;
--header-fsize: 25px;
--body-bg: #f2e3d4;
--body-color: #1b1b1b;
--body-line-height: 30px;
--content-fsize: 0px;
--img-caption-size: 12px;
/* <---- SCROLLBAR ----> */
--scrollbar-bg: #42230f99;
--scrollbar-arrows: #f2e3d4;
][div=
width: 1050px;
margin: auto;
overflow: hidden;
cursor: url(https://i.imgur.com/VIFXT5j.png), auto;][div=
margin-top: -40px;
font-family: var(--body-font);][TABS=100%x0]{slide=1}[div=
/* <-------- SLIDE 1 --------> */
width: 100%;
display: flex;
flex-wrap: wrap;][div=
flex: 1;
margin: auto;
max-width: 330px !important;
padding: 20px;][div=
display: flex;
flex-direction: column;
gap: 10px;
top: -60px;][div=
flex: 1;
font-family: var(--main-font);
font-size: var(--title-fsize);
color: var(--title-color);
text-align: center;
text-transform: lowercase;
text-shadow: 1px 1px 1px #000;
bottom: -30px;
z-index: 2;
/* <-------- NAV TITLE --------> */]magic[/div]{tab=1}[div=/* <---- BUTTON 1 ----> */width: 260px; min-height: 70px; flex: 1; background: var(--button-bg-1), var(--button-color-blend); background-blend-mode: var(--button-blend-mode); border: var(--button-border-active); border-radius: var(--button-border-radius); padding: 10px; font-size: var(--button-fsize); color: var(--button-fcolor); text-shadow: var(--button-text-shadow); display: flex; justify-content: center; align-items: center;]schools of magic[/div]{/tab}{tab=2}[div=/* <---- BUTTON 2 ----> */width: 260px; margin-left: auto; min-height: 70px; flex: 1; background: var(--button-bg-2), var(--button-color-blend); background-blend-mode: var(--button-blend-mode); border: var(--button-border); border-radius: var(--button-border-radius); padding: 10px; font-size: var(--button-fsize); color: var(--button-fcolor); text-shadow: var(--button-text-shadow); display: flex; justify-content: center; align-items: center;]magical races[/div]{/tab}{tab=3}[div=/* <---- BUTTON 3 ----> */width: 260px; min-height: 70px; flex: 1; background: var(--button-bg-3), var(--button-color-blend); background-blend-mode: var(--button-blend-mode); border: var(--button-border); border-radius: var(--button-border-radius); padding: 10px; font-size: var(--button-fsize); color: var(--button-fcolor); text-shadow: var(--button-text-shadow); display: flex; justify-content: center; align-items: center;]dark magic[/div]{/tab}[/div][/div][div=
flex: 2;
min-width: 250px;
border: var(--body-border);
border-radius: var(--body-border-radius);
background: var(--body-bg);
padding: 0 10px 10px 10px;][div=
padding: 10px;
font-size: var(--header-fsize);
font-weight: bold;
color: var(--body-color);
text-transform: lowercase;
text-shadow: 1px 1px 1px var(--title-color);
/* <-------- SLIDE HEADER --------> */]slide 1 title[/div][div=
height: 500px;
overflow-y: scroll;
padding: 0 20px 0 10px;
color: var(--body-color);
line-height: var(--body-line-height);
/* <-------- BODY START --------> */]Slide 1 content goes here.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam purus sapien, feugiat sit amet ultrices vehicula, maximus sit amet nulla. Duis a tincidunt ante. Morbi suscipit sodales enim. Ut tempus consectetur arcu. Suspendisse risus sem, dignissim vel maximus sed, cursus vel sapien. In ac sem eu eros ornare pulvinar vitae non nibh. Fusce non tristique nisi. Aliquam vitae dui gravida massa venenatis porta nec eget orci.
[div=
/* <---- SINGLE IMAGE ----> */
width: 200px;
height: 200px;
margin: auto;
/* <---- 200x200 IMAGE HERE ----> */
background: url(https://via.placeholder.com/200x200.png/) 50% 50% / cover;][/div][div=
text-align: center;
font-size: var(--img-caption-size);]Caption for Image[/div]
Nunc sit amet orci et ante suscipit pulvinar. Maecenas nec turpis vitae augue luctus blandit. Mauris sed leo sit amet magna tincidunt eleifend hendrerit quis ex. In id efficitur arcu. Proin faucibus eros nibh, at porta orci aliquam in. Donec vitae tincidunt tortor. Aenean mollis interdum nisl in facilisis. Donec sit amet congue est, sed accumsan dui. Sed bibendum odio nec magna varius, in consectetur dui ornare. Praesent massa lacus, faucibus quis nunc in, vehicula dignissim metus. Ut pharetra interdum tincidunt. Nunc vel mauris tortor.
[div=
/* <---- SIDE BY SIDE IMAGES ----> */
margin: auto;
width: 403px;
display: flex;
flex-wrap: wrap;
gap: 3px;][div=
flex: 1;
min-width: 200px;
max-width: 200px !important;
height: 200px;
margin: auto;
/* <---- (LEFT) 200x200 IMAGE HERE ----> */
background: url(https://via.placeholder.com/200x200.png/) 50% 50% / cover;][/div][div=
flex: 1;
min-width: 200px;
max-width: 200px !important;
height: 200px;
margin: auto;
/* <---- (RIGHT) 200x200 IMAGE HERE ----> */
background: url(https://via.placeholder.com/200x200.png/) 50% 50% / cover;][/div][/div][div=
text-align: center;
font-size: var(--img-caption-size);]Caption for Images[/div]
Phasellus ac neque vestibulum, vulputate ex at, accumsan ex. Suspendisse sit amet euismod purus, ac eleifend lorem. Nunc luctus sapien vitae justo sodales blandit. Curabitur eget pretium ligula. Praesent fermentum vitae lectus quis tincidunt. Fusce semper, est id laoreet mattis, lectus tortor elementum quam, at efficitur orci nibh consequat lorem. Donec elementum imperdiet magna, eu facilisis nisl auctor id. Integer congue nunc eu turpis lacinia, nec vulputate libero pellentesque. Curabitur nec purus molestie, mattis risus ut, facilisis est. Pellentesque posuere, neque eget accumsan malesuada, turpis erat tincidunt felis, ac dictum purus lacus nec nulla. Quisque dictum feugiat erat, ac cursus diam blandit sed. Sed interdum egestas tempor. Morbi venenatis magna sed ex maximus, at tempus leo elementum. Praesent sed arcu in nulla tincidunt commodo. Pellentesque a augue gravida, mattis enim vel, ullamcorper tellus.[/div][div=
/* <-------- BODY END --------> */
/* <-------- SCROLLBAR --------> */
width: 17px;
height: 500px;
display: flex;
flex-direction: column;
float: right;
margin-top: -500px;
background: var(--scrollbar-bg);
color: var(--scrollbar-arrows);
font-size: 15px;
text-align: center;
pointer-events: none;][fa]fa-solid fa-angle-up[/fa][div=
margin-top: auto;][fa]fa-solid fa-angle-down[/fa][/div][/div][/div][/div]{/slide}{slide=2}[div=
/* <-------- SLIDE 2 --------> */
width: 100%;
display: flex;
flex-wrap: wrap;][div=
flex: 1;
margin: auto;
max-width: 330px !important;
padding: 20px;][div=
display: flex;
flex-direction: column;
gap: 10px;
top: -60px;][div=
flex: 1;
font-family: var(--main-font);
font-size: var(--title-fsize);
color: var(--title-color);
text-align: center;
text-transform: lowercase;
text-shadow: 1px 1px 1px #000;
bottom: -30px;
z-index: 2;
/* <-------- NAV TITLE --------> */]magic[/div]{tab=1}[div=/* <---- BUTTON 1 ----> */width: 260px; min-height: 70px; flex: 1; background: var(--button-bg-1), var(--button-color-blend); background-blend-mode: var(--button-blend-mode); border: var(--button-border); border-radius: var(--button-border-radius); padding: 10px; font-size: var(--button-fsize); color: var(--button-fcolor); text-shadow: var(--button-text-shadow); display: flex; justify-content: center; align-items: center;]schools of magic[/div]{/tab}{tab=2}[div=/* <---- BUTTON 2 ----> */width: 260px; margin-left: auto; min-height: 70px; flex: 1; background: var(--button-bg-2), var(--button-color-blend); background-blend-mode: var(--button-blend-mode); border: var(--button-border-active); border-radius: var(--button-border-radius); padding: 10px; font-size: var(--button-fsize); color: var(--button-fcolor); text-shadow: var(--button-text-shadow); display: flex; justify-content: center; align-items: center;]magical races[/div]{/tab}{tab=3}[div=/* <---- BUTTON 3 ----> */width: 260px; min-height: 70px; flex: 1; background: var(--button-bg-3), var(--button-color-blend); background-blend-mode: var(--button-blend-mode); border: var(--button-border); border-radius: var(--button-border-radius); padding: 10px; font-size: var(--button-fsize); color: var(--button-fcolor); text-shadow: var(--button-text-shadow); display: flex; justify-content: center; align-items: center;]dark magic[/div]{/tab}[/div][/div][div=
flex: 2;
min-width: 250px;
border: var(--body-border);
border-radius: var(--body-border-radius);
background: var(--body-bg);
padding: 0 10px 10px 10px;][div=
padding: 10px;
font-size: var(--header-fsize);
font-weight: bold;
color: var(--body-color);
text-transform: lowercase;
text-shadow: 1px 1px 1px var(--title-color);
/* <-------- SLIDE HEADER --------> */]slide 2 title[/div][div=
height: 500px;
overflow-y: scroll;
padding: 0 20px 0 10px;
color: var(--body-color);
line-height: var(--body-line-height);
/* <-------- BODY START --------> */]Slide 2 content goes here.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam purus sapien, feugiat sit amet ultrices vehicula, maximus sit amet nulla. Duis a tincidunt ante. Morbi suscipit sodales enim. Ut tempus consectetur arcu. Suspendisse risus sem, dignissim vel maximus sed, cursus vel sapien. In ac sem eu eros ornare pulvinar vitae non nibh. Fusce non tristique nisi. Aliquam vitae dui gravida massa venenatis porta nec eget orci.
[div=
/* <---- SINGLE IMAGE ----> */
width: 200px;
height: 200px;
margin: auto;
/* <---- 200x200 IMAGE HERE ----> */
background: url(https://via.placeholder.com/200x200.png/) 50% 50% / cover;][/div][div=
text-align: center;
font-size: var(--img-caption-size);]Caption for Image[/div]
Nunc sit amet orci et ante suscipit pulvinar. Maecenas nec turpis vitae augue luctus blandit. Mauris sed leo sit amet magna tincidunt eleifend hendrerit quis ex. In id efficitur arcu. Proin faucibus eros nibh, at porta orci aliquam in. Donec vitae tincidunt tortor. Aenean mollis interdum nisl in facilisis. Donec sit amet congue est, sed accumsan dui. Sed bibendum odio nec magna varius, in consectetur dui ornare. Praesent massa lacus, faucibus quis nunc in, vehicula dignissim metus. Ut pharetra interdum tincidunt. Nunc vel mauris tortor.
[div=
/* <---- SIDE BY SIDE IMAGES ----> */
margin: auto;
width: 403px;
display: flex;
flex-wrap: wrap;
gap: 3px;][div=
flex: 1;
min-width: 200px;
max-width: 200px !important;
height: 200px;
margin: auto;
/* <---- (LEFT) 200x200 IMAGE HERE ----> */
background: url(https://via.placeholder.com/200x200.png/) 50% 50% / cover;][/div][div=
flex: 1;
min-width: 200px;
max-width: 200px !important;
height: 200px;
margin: auto;
/* <---- (RIGHT) 200x200 IMAGE HERE ----> */
background: url(https://via.placeholder.com/200x200.png/) 50% 50% / cover;][/div][/div][div=
text-align: center;
font-size: var(--img-caption-size);]Caption for Images[/div]
Phasellus ac neque vestibulum, vulputate ex at, accumsan ex. Suspendisse sit amet euismod purus, ac eleifend lorem. Nunc luctus sapien vitae justo sodales blandit. Curabitur eget pretium ligula. Praesent fermentum vitae lectus quis tincidunt. Fusce semper, est id laoreet mattis, lectus tortor elementum quam, at efficitur orci nibh consequat lorem. Donec elementum imperdiet magna, eu facilisis nisl auctor id. Integer congue nunc eu turpis lacinia, nec vulputate libero pellentesque. Curabitur nec purus molestie, mattis risus ut, facilisis est. Pellentesque posuere, neque eget accumsan malesuada, turpis erat tincidunt felis, ac dictum purus lacus nec nulla. Quisque dictum feugiat erat, ac cursus diam blandit sed. Sed interdum egestas tempor. Morbi venenatis magna sed ex maximus, at tempus leo elementum. Praesent sed arcu in nulla tincidunt commodo. Pellentesque a augue gravida, mattis enim vel, ullamcorper tellus.[/div][div=
/* <-------- BODY END --------> */
/* <-------- SCROLLBAR --------> */
width: 17px;
height: 500px;
display: flex;
flex-direction: column;
float: right;
margin-top: -500px;
background: var(--scrollbar-bg);
color: var(--scrollbar-arrows);
font-size: 15px;
text-align: center;
pointer-events: none;][fa]fa-solid fa-angle-up[/fa][div=
margin-top: auto;][fa]fa-solid fa-angle-down[/fa][/div][/div][/div][/div]{/slide}{slide=3}[div=
/* <-------- SLIDE 3 --------> */
width: 100%;
display: flex;
flex-wrap: wrap;][div=
flex: 1;
margin: auto;
max-width: 330px !important;
padding: 20px;][div=
display: flex;
flex-direction: column;
gap: 10px;
top: -60px;][div=
flex: 1;
font-family: var(--main-font);
font-size: var(--title-fsize);
color: var(--title-color);
text-align: center;
text-transform: lowercase;
text-shadow: 1px 1px 1px #000;
bottom: -30px;
z-index: 2;
/* <-------- NAV TITLE --------> */]magic[/div]{tab=1}[div=/* <---- BUTTON 1 ----> */width: 260px; min-height: 70px; flex: 1; background: var(--button-bg-1), var(--button-color-blend); background-blend-mode: var(--button-blend-mode); border: var(--button-border); border-radius: var(--button-border-radius); padding: 10px; font-size: var(--button-fsize); color: var(--button-fcolor); text-shadow: var(--button-text-shadow); display: flex; justify-content: center; align-items: center;]schools of magic[/div]{/tab}{tab=2}[div=/* <---- BUTTON 2 ----> */width: 260px; margin-left: auto; min-height: 70px; flex: 1; background: var(--button-bg-2), var(--button-color-blend); background-blend-mode: var(--button-blend-mode); border: var(--button-border); border-radius: var(--button-border-radius); padding: 10px; font-size: var(--button-fsize); color: var(--button-fcolor); text-shadow: var(--button-text-shadow); display: flex; justify-content: center; align-items: center;]magical races[/div]{/tab}{tab=3}[div=/* <---- BUTTON 3 ----> */width: 260px; min-height: 70px; flex: 1; background: var(--button-bg-3), var(--button-color-blend); background-blend-mode: var(--button-blend-mode); border: var(--button-border-active); border-radius: var(--button-border-radius); padding: 10px; font-size: var(--button-fsize); color: var(--button-fcolor); text-shadow: var(--button-text-shadow); display: flex; justify-content: center; align-items: center;]dark magic[/div]{/tab}[/div][/div][div=
flex: 2;
min-width: 250px;
border: var(--body-border);
border-radius: var(--body-border-radius);
background: var(--body-bg);
padding: 0 10px 10px 10px;][div=
padding: 10px;
font-size: var(--header-fsize);
font-weight: bold;
color: var(--body-color);
text-transform: lowercase;
text-shadow: 1px 1px 1px var(--title-color);
/* <-------- SLIDE HEADER --------> */]slide 3 title[/div][div=
height: 500px;
overflow-y: scroll;
padding: 0 20px 0 10px;
color: var(--body-color);
line-height: var(--body-line-height);
/* <-------- BODY START --------> */]Slide 3 content goes here.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam purus sapien, feugiat sit amet ultrices vehicula, maximus sit amet nulla. Duis a tincidunt ante. Morbi suscipit sodales enim. Ut tempus consectetur arcu. Suspendisse risus sem, dignissim vel maximus sed, cursus vel sapien. In ac sem eu eros ornare pulvinar vitae non nibh. Fusce non tristique nisi. Aliquam vitae dui gravida massa venenatis porta nec eget orci.
[div=
/* <---- SINGLE IMAGE ----> */
width: 200px;
height: 200px;
margin: auto;
/* <---- 200x200 IMAGE HERE ----> */
background: url(https://via.placeholder.com/200x200.png/) 50% 50% / cover;][/div][div=
text-align: center;
font-size: var(--img-caption-size);]Caption for Image[/div]
Nunc sit amet orci et ante suscipit pulvinar. Maecenas nec turpis vitae augue luctus blandit. Mauris sed leo sit amet magna tincidunt eleifend hendrerit quis ex. In id efficitur arcu. Proin faucibus eros nibh, at porta orci aliquam in. Donec vitae tincidunt tortor. Aenean mollis interdum nisl in facilisis. Donec sit amet congue est, sed accumsan dui. Sed bibendum odio nec magna varius, in consectetur dui ornare. Praesent massa lacus, faucibus quis nunc in, vehicula dignissim metus. Ut pharetra interdum tincidunt. Nunc vel mauris tortor.
[div=
/* <---- SIDE BY SIDE IMAGES ----> */
margin: auto;
width: 403px;
display: flex;
flex-wrap: wrap;
gap: 3px;][div=
flex: 1;
min-width: 200px;
max-width: 200px !important;
height: 200px;
margin: auto;
/* <---- (LEFT) 200x200 IMAGE HERE ----> */
background: url(https://via.placeholder.com/200x200.png/) 50% 50% / cover;][/div][div=
flex: 1;
min-width: 200px;
max-width: 200px !important;
height: 200px;
margin: auto;
/* <---- (RIGHT) 200x200 IMAGE HERE ----> */
background: url(https://via.placeholder.com/200x200.png/) 50% 50% / cover;][/div][/div][div=
text-align: center;
font-size: var(--img-caption-size);]Caption for Images[/div]
Phasellus ac neque vestibulum, vulputate ex at, accumsan ex. Suspendisse sit amet euismod purus, ac eleifend lorem. Nunc luctus sapien vitae justo sodales blandit. Curabitur eget pretium ligula. Praesent fermentum vitae lectus quis tincidunt. Fusce semper, est id laoreet mattis, lectus tortor elementum quam, at efficitur orci nibh consequat lorem. Donec elementum imperdiet magna, eu facilisis nisl auctor id. Integer congue nunc eu turpis lacinia, nec vulputate libero pellentesque. Curabitur nec purus molestie, mattis risus ut, facilisis est. Pellentesque posuere, neque eget accumsan malesuada, turpis erat tincidunt felis, ac dictum purus lacus nec nulla. Quisque dictum feugiat erat, ac cursus diam blandit sed. Sed interdum egestas tempor. Morbi venenatis magna sed ex maximus, at tempus leo elementum. Praesent sed arcu in nulla tincidunt commodo. Pellentesque a augue gravida, mattis enim vel, ullamcorper tellus.[/div][div=
/* <-------- BODY END --------> */
/* <-------- SCROLLBAR --------> */
width: 17px;
height: 500px;
display: flex;
flex-direction: column;
float: right;
margin-top: -500px;
background: var(--scrollbar-bg);
color: var(--scrollbar-arrows);
font-size: 15px;
text-align: center;
pointer-events: none;][fa]fa-solid fa-angle-up[/fa][div=
margin-top: auto;][fa]fa-solid fa-angle-down[/fa][/div][/div][/div][/div]{/slide}[/TABS][/div][div=
font-size: 11px;
text-align: right;
right: 15px;]Coded by Ardent[/div][/div][/div]