[html]
<style>
/*=============================================== *
* Jcink.com Forum Hosting Stylesheet
* ==============================================
* #Version: 1.0.2
*=============================================== */
html { overflow-x: auto; }
form { display:inline; scroll-behavior: smooth;}
@font-face {
font-family: 'species';
src:
url('https://files.jcink.net/uploads/ghostsongs/fonts/species.ttf?n6hpnk') format('truetype'),
url('https://files.jcink.net/uploads/ghostsongs/fonts/species.woff?n6hpnk') format('woff'),
url('https://files.jcink.net/uploads/ghostsongs/fonts/species.svg?n6hpnk#species') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^="species-"], [class*=" species-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'species' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.species-aether:before {
content: "\e900";
}
.species-aertas:before {
content: "\e901";
}
.species-air:before {
content: "\e902";
}
.species-amarok:before {
content: "\e903";
}
.species-cantivox:before {
content: "\e904";
}
.species-celestial:before {
content: "\e905";
}
.species-chimera:before {
content: "\e906";
}
.species-cosmos:before {
content: "\e907";
}
.species-crystal:before {
content: "\e908";
}
.species-dragon:before {
content: "\e909";
}
.species-earth:before {
content: "\e90a";
}
.species-electricity:before {
content: "\e90b";
}
.species-energy:before {
content: "\e90c";
}
.species-fire:before {
content: "\e90d";
}
.species-gravity:before {
content: "\e90e";
}
.species-griffin:before {
content: "\e90f";
}
.species-ice:before {
content: "\e910";
}
.species-kitsune:before {
content: "\e911";
}
.species-light:before {
content: "\e912";
}
.species-magus:before {
content: "\e913";
}
.species-manticore:before {
content: "\e914";
}
.species-metal:before {
content: "\e915";
}
.species-naga:before {
content: "\e916";
}
.species-pegasus:before {
content: "\e917";
}
.species-phoenix:before {
content: "\e918";
}
.species-plasma:before {
content: "\e919";
}
.species-player:before {
content: "\e91a";
}
.species-shadow:before {
content: "\e91b";
}
.species-soluna:before {
content: "\e91c";
}
.species-sound:before {
content: "\e91d";
}
.species-space:before {
content: "\e91e";
}
.species-staff:before {
content: "\e91f";
}
.species-time:before {
content: "\e920";
}
.species-unicorn:before {
content: "\e921";
}
.species-vertifera:before {
content: "\e922";
}
.species-water:before {
content: "\e923";
}
/****************************************
Body Background & Text Style
*****************************************/
body {
font: 500 15px montserrat;
margin:0px;
padding:0px;
background: var(--bodybg);
scroll-behavior: smooth;
}
@font-face {
font-family: 'location';
src: url('https://files.jcink.net/uploads/ghostsongs/fonts/location.eot?i3fkkh');
src: url('https://files.jcink.net/uploads/ghostsongs/fonts/location.eot?i3fkkh#iefix') format('embedded-opentype'),
url('https://files.jcink.net/uploads/ghostsongs/fonts/location.ttf?i3fkkh') format('truetype'),
url('https://files.jcink.net/uploads/ghostsongs/fonts/location.woff?i3fkkh') format('woff'),
url('https://files.jcink.net/uploads/ghostsongs/fonts/location.svg?i3fkkh#location') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^="location-"], [class*=" location-"] {
font-family: 'location' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.location-au:before {
content: "\e900";
}
.location-imperatus:before {
content: "\e901";
}
.location-caelaevis:before {
content: "\e902";
}
.location-ingenium:before {
content: "\e903";
}
.location-lautitia:before {
content: "\e904";
}
.location-magelida:before {
content: "\e905";
}
.location-subcinctus:before {
content: "\e906";
}
.location-aquaedis:before {
content: "\e907";
}
.location-archarius:before {
content: "\e908";
}
@font-face {
font-family: 'weathericons';
src: url('https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.12/font/weathericons-regular-webfont.eot');
src: url('../font/weathericons-regular-webfont.eot?#iefix') format('embedded-opentype'), url('https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.12/font/weathericons-regular-webfont.woff2') format('woff2'), url('https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.12/font/weathericons-regular-webfont.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.12/font/weathericons-regular-webfont.ttf') format('truetype'), url('https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.12/font/weathericons-regular-webfont.svg#weather_iconsregular') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="wi-"]:before,[class*=" wi-"]:before {
font-family: "weathericons" !important;font-style: normal !important;font-weight: normal !important;font-variant: normal !important;text-transform: none !important;speak: none;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
[class^="wi-"],[class*=" wi-"]{display:inline-grid;}
@font-face {
font-family: 'groups';
src: url('https://files.jcink.net/uploads/ghostsongs/fonts/groups/groups.eot?mz4m9');
src: url('https://files.jcink.net/uploads/ghostsongs/fonts/groups/groups.eot?mz4m9#iefix') format('embedded-opentype'),
url('https://files.jcink.net/uploads/ghostsongs/fonts/groups/groups.ttf?mz4m9') format('truetype'),
url('https://files.jcink.net/uploads/ghostsongs/fonts/groups/groups.woff?mz4m9') format('woff'),
url('https://files.jcink.net/uploads/ghostsongs/fonts/groups/groups.svg?mz4m9#groups') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'groups' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-aurora:before {
content: "\e900";
}
.icon-blizzard:before {
content: "\e901";
}
.icon-earthquake:before {
content: "\e902";
}
.icon-hurricane:before {
content: "\e903";
}
.icon-mirage:before {
content: "\e904";
}
.icon-supernova:before {
content: "\e905";
}
.icon-tsunami:before {
content: "\e906";
}
.icon-wildfire:before {
content: "\e907";
}
/****************************************
SCROLLBAR
*****************************************/
::-webkit-scrollbar {
width: 6px;
background-color: var(--border2);
}
::-webkit-scrollbar-thumb {
background-color: var(--boardbg);
}
::-webkit-scrollbar:horizontal {
height: 10px;
}
::-webkit-scrollbar, ::-webkit-scrollbar-thumb {
border: 2px solid var(--boardbg);
}
@font-face {
font-family: 'ghost';
src: url(https://files.jcink.net/uploads2/skin02 … Dancer.ttf);
}
/****************************************
Colors
*****************************************/
:root {
--bodybg: #111;
--text1: #eee;
--text2: #222;
--text3: #565656;
--text4: #464756;
--wrapperbg: #222;
--innerwrapper2: #b6bdc5;
--border1: #333;
--border3: #fff;
--topgradient: linear-gradient(to bottom, #dde2e7, #c7cdd3);
--topevent: #d5dae1;
--meshbg: radial-gradient(at 15.752461322081576% 82.17243975903614%, #6594c3 0px, transparent 50%), radial-gradient(at 87.0604781997187% 11.69051204819277%, #4e5688 0px, transparent 50%), radial-gradient(at 82.9817158931083% 83.77886546184739%, #8f568e 0px, transparent 50%), radial-gradient(at 50.773558368495074% 29.96360441767068%, #7a4879 0px, transparent 50%), radial-gradient(at 14.627285513361462% 17.31300200803213%, #5d6598 0px, transparent 50%) #222222;
--main1: #764775;
--main2: #465176;
--main3: #24252d;
--cath1: #1f2027;
--boardbg: #24252d;
--border2: #3a3c49;
--border3: #373945;
--boardbg2: #1f2027;
--boardbg3: #292a33;
--subsf1: #292a33;
--rgb1: 118,71,117;
--rgb2: 70,81,118;
--rgb3: 36,37,45;
--sup: #454756;
}
[data-theme="light"] {
--bodybg: #d3d3d3;
--text1: #222;
--text3: #222;
--wrapperbg: #f1f1f1;
--innerwrapper2: #b6bdc5;
--border1: #ccc;
--border2: #fff;
--sitename: #f1f1f1;
--meshbg: radial-gradient(at 66.66666666666666% 37.7949297188755%, #997dd2 0px, transparent 50%), radial-gradient(at 13.220815752461323% 16.3089859437751%, #6b3f9b 0px, transparent 50%), radial-gradient(at 100% 77%, #af3867 0px, transparent 50%), radial-gradient(at 78% 98%, #bc2144 0px, transparent 50%), radial-gradient(at 90.57665260196906% 19.321034136546185%, #da6492 0px, transparent 50%), radial-gradient(at 21.80028129395218% 86.79091365461848%, #334e9a 0px, transparent 50%) #f1f1f1;
}
.theme-switch input {
display: none;
}
/* TSUNAMI */
GROUP10, .tsunami, #g10, .g10, #tsunami {
--main1: #a378dd;
--main2: #5da9cf;
--main3: #7fd5be;
--rgb1: 163,120,221;
--rgb2: 93,169,207;
--rgb3: 127,213,190;
--b1: #a378dd;
--b2: #8091d6;
--b3: #5da9cf;
--b4: #6ebfc7;
--b5: #7fd5be;
--s1: #a378dd;
--s2: #8c88d8;
--s3: #7499d4;
--s4: #5da9cf;
--s5: #68b8c9;
--s6: #74c6c4;
--s7: #7fd5be;
}
/* AURORA */
GROUP11, .aurora, #g11, .g11, #aurora {
--main1: #dc74bb;
--main2: #ad5ae1;
--main3: #6669e1;
--rgb1: 220,116,187;
--rgb2: 173,90,225;
--rgb3: 102,105,225;
--b1: #dc74bb;
--b2: #c567ce;
--b3: #ad5ae1;
--b4: #8a62e1;
--b5: #6669e1;
--s1: #dc74bb;
--s2: #cc6bc8;
--s3: #bd63d4;
--s4: #ad5ae1;
--s5: #955fe1;
--s6: #7e64e1;
--s7: #6669e1;
}
/* BLIZZARD */
GROUP9, .blizzard, #g9, .g9, #blizzard {
--main1: #84bcd8;
--main2: #617be4;
--main3: #9564ee;
--rgb1: 132,188,216;
--rgb2: 97,123,228;
--rgb3: 149,100,238;
--b1: #84bcd8;
--b2: #739cde;
--b3: #617be4;
--b4: #7b70e9;
--b5: #9564ee;
--s1: #84bcd8;
--s2: #78a6dc;
--s3: #6d91e0;
--s4: #617be4;
--s5: #7273e7;
--s6: #846ceb;
--s7: #9564ee;
}
/* HURRICANE */
GROUP7, .hurricane, #g7, .g7, #hurricane {
--main1: #f5b35f;
--main2: #d064b5;
--main3: #926bd1;
--rgb1: 245,179,95;
--rgb2: 208,100,181;
--rgb3: 146,107,209;
--b1: #f5b35f;
--b2: #e38c8a;
--b3: #d064b5;
--b4: #b168c3;
--b5: #926bd1;
--s1: #f5b35f;
--s2: #e9997c;
--s3: #dc7e98;
--s4: #d064b5;
--s5: #bb66be;
--s6: #a769c8;
--s7: #926bd1;
}
/* EARTHQUAKE */
GROUP8, .earthquake, #g8, .g8, #earthquake {
--main1: #6ccb6c;
--main2: #ebce69;
--main3: #e8945c;
--rgb1: 108,203,108;
--rgb2: 235,206,105;
--rgb3: 232,148,92;
--b1: #6ccb6c;
--b2: #accd6b;
--b3: #ebce69;
--b4: #eab163;
--b5: #e8945c;
--s1: #6ccb6c;
--s2: #96cc6b;
--s3: #c1cd6a;
--s4: #ebce69;
--s5: #eabb65;
--s6: #e9a760;
--s7: #e8945c;
}
/* WILDFIRE */
GROUP6, .wildfire, #g6, .g6, #wildfire {
--main1: #d95866;
--main2: #eca362;
--main3: #ecd466;
--rgb1: 217,88,102;
--rgb2: 236,163,98;
--rgb3: 236,212,102;
--b1: #d95866;
--b2: #e37e64;
--b3: #eca362;
--b4: #ecbc64;
--b5: #ecd466;
--s1: #d95866;
--s2: #df7165;
--s3: #e68a63;
--s4: #eca362;
--s5: #ecb363;
--s6: #ecc465;
--s7: #ecd466;
}
/* SUPERNOVA */
GROUP15, .supernova, #g15, .g15, #supernova {
--main1: #5fc1b4;
--main2: #9d62d9;
--main3: #ec6666;
--rgb1: 95,193,180;
--rgb2: 157,98,217;
--rgb3: 236,102,102;
--b1: #5fc1b4;
--b2: #7e92c7;
--b3: #9d62d9;
--b4: #c564a0;
--b5: #ec6666;
--s1: #5fc1b4;
--s2: #74a1c0;
--s3: #8882cd;
--s4: #9d62d9;
--s5: #b763b3;
--s6: #d2658c;
--s7: #ec6666;
}
/* MIRAGE */
GROUP17, .mirage, #g17, .g17, #mirage {
--main1: #dfd264;
--main2: #ea6c7a;
--main3: #10b4b4;
--rgb1: 223,210,100;
--rgb2: 234,108,122;
--rgb3: 16,180,180;
--b1: #dfd264;
--b2: #e59f6f;
--b3: #ea6c7a;
--b4: #7d9097;
--b5: #10b4b4;
--s1: #dfd264;
--s2: #e3b06b;
--s3: #e68e73;
--s4: #ea6c7a;
--s5: #a1848d;
--s6: #599ca1;
--s7: #10b4b4;
}
/****************************************
Board Base
*****************************************/
#wrapper {
margin: 20px auto auto auto;
width: calc(100vw - 75px);
height: calc(100vh - 75px);
background: var(--wrapperbg);
border-radius: 20px;
padding: 20px;
display: flex;
overflow: hidden;
justify-content: space-between;
box-shadow: 0 0 7px rgba(0,0,0,0.2);
}
.innerwrapper {
width: calc(100vw - 150px);
height: calc(100vh - 70px);
border-radius: 20px;
overflow: auto;
scroll-behavior: smooth;
background: url(https://c.l3n.co/i/nuyrQx.png), url(https://a.l3n.co/i/nuygAk.png), var(--meshbg) fixed;
}
.innerwrapper2 {
background: var(--innerwrapper2);
border-radius: 20px;
margin: 30px auto 30px auto;
width: 985px;
border: 1px solid var(--border3);
position: relative;
z-index: 4;
margin-top: 0px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
/****************************************
Table Styles
*****************************************/
table, tr, td {
font: 500 15px montserrat;
color: #222;
}
.user-links {
height: calc(100vh - 70px);
width: 60px;
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: center;
color: var(--text3);
}
.user-links2 {
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: center;
gap: 10px;
font-size: 25px;
margin-left: 15px;
}
.user-links2 a {
color: var(--dark1);
position: relative;
display: block;
}
.user-links2 msg {
position: absolute;
top: 0;
right: 10px;
font-size: 0;
background: red;
width: 8px;
height: 8px;
border-radius: 100%;
border: 4px solid var(--lightfe);
}
.user-links2 a:hover {
color: var(--dark1);
opacity: 0.7;
}
.user-links3 {
display: flex;
flex-direction: column;
align-items: center;
}
.user-name {
text-transform: uppercase;
font: 800 10px poppins;
letter-spacing: 1px;
width: 200px;
transform: rotate(90deg);
transform-origin: 145px -25px;
text-align: right;
}
.user-name a {
color: var(--dark1);
}
.user-links3 sub {
display: block;
margin-top: -5px;
}
.user-links3 .forminput {
border-radius: 3px;
padding: 2px;
border: 0px;
font: 800 9px poppins;
text-transform: uppercase;
letter-spacing: 1;
margin-top: 5px;
letter-spacing: 1px;
width: 20px;
}
.user-links3 img {
border-radius: 100%;
width: 50px;
height: 50px;
border: 4px solid var(--lightf);
margin-left: 10px;
}
#user-nav {
background: var(--bodybg);
padding: 10px;
position: sticky;
top: 0px;
color: var(--text1);
z-index: 99;
border-bottom: 1px solid var(--border3);
}
#user-nav a {
color: #eee;
border: 1px solid #eee;
background: linear-gradient(to right, var(--main1), var(--main2));
font: 600 10px poppins;
text-transform: uppercase;
letter-spacing: 1px;
padding: 3px;
}
#navstrip {
display: flex;
gap: 10px;
margin-left: -10px;
}
/****************************************
Link colors
*****************************************/
a {
text-decoration: none;
color: var(--text2);
}
a:hover {
color:var(--text3);
text-decoration: none;
}
/**********************************************
INPUT BUTTONS
***********************************************/
.button-large {
display: inline-block;
border: 1px solid var(--border2);
padding: 20px 20px 15px 20px;
margin-top: 10px;
background: linear-gradient(45deg, rgba(var(--rgb1),0.6),rgba(var(--rgb2),0.8));
text-transform: uppercase;
font: 20px abril fatface;
}
a .button-large {
color: var(--text1);
}
a .button-large:hover {
background: linear-gradient(45deg, rgba(var(--rgb1),1),rgba(var(--rgb2),0.8));
}
.button-large:nth-child(1) {
margin-right: 10px;
}
.button-small {
background: var(--main1);
font: 800 10px fira sans;
text-transform: uppercase;
color: var(--dark1)!important;
box-shadow: 0px;
padding: 10px;
}
.post-buttons-top {
margin-top: 3px;
}
.button-large.closed {
}
.forminput {
border: 1px solid var(--dark2);
background: var(--postrow);
color: var(--dark1)!important;
padding: 2px;
}
.textinput {
outline: 1px solid var(--light2);
border: 2px solid var(--light2);
font: 500 13px montserrat;
color: var(--text2)!important;
}
input[type=submit], input[type=button], input[type=reset] {
background: var(--main1)!important;
font: 800 10px fira sans!important;
text-transform: uppercase;
color: var(--dark1)!important;
box-shadow: 0px;
padding: 5px;
border: 0px;
margin: 5px;
vertical-align: middle;
}
.codebuttons, .radiobutton, .checkbox {
background: var(--main1);
border: 1px solid var(--light2);
color: var(--text2);
font-family: montserrat;
font-size: 12px;
padding: 2px;
vertical-align: middle;
}
#smilies-table {
background: var(--light3);
border: 1px solid var(--light2);
}
#topic-summary .pformstrip {
display: none;
}
#topic-summary .tableborder {
background: var(--light3);
}
.post1 {
border: 0px;
background: var(--light1);
color: var(--text1)!important;
}
.post2 {
border: 0px;
background: var(--light4);
color: var(--dark7)!important;
}
.pformright .forminput {
background: var(--light1);
border: 1px solid var(--light2);
var(--dark4)!important;
}
#post_as_selector .forminput {
background: var(--light3)!important;
border: 1px solid var(--light2)!important;
var(--text1)!important;
}
input.row1 {
background: var(--light3);
border: 1px solid var(--light2);
color: var(--dark1);
}
#posting-form input[type=submit], #posting-form input[type=button], #posting-form input[type=reset] {
font: 800 12px fira sans!important;
text-transform: uppercase;
border: 1px solid var(--light2);
box-shadow: 0px;
padding: 5px;
border: 0px;
margin: 5px;
vertical-align: middle;
letter-spacing: 1px;
}
#posting-form .pformstrip {
background: #222;
border-top: 1px solid var(--light2);
padding: 10px;
font: 800 9px fira sans;
text-transform: uppercase;
color: #eee;
}
#posting-form .textinput {
width: 100%;
background: var(--light3);
border: 10px solid var(--light3);
outline: 1px solid var(--light2);
color: var(--text1);
font: 500 14px montserrat;
}
.quick-edit textarea.textinput {
background: var(--light3);
font: 500 14px montserrat;
color: var(--text1)!important;
height: 400px!important;
border: 2px solid var(--light3);
outline: 1px solid var(--light2);
}
#posting-form {
font: 500 12px montserrat;
!important
}
#topic-settings-header .pformleft .topic-title {
font: 12px montserrat;
text-transform: uppercase;
}
#posting-form .forminput {
padding: 10px;
background: var(--light3);
var(--text1)!important;
}
#posting-form .pformleft {
background: var(--light4);
}
#posting-form .pformright {
background: var(--light4);
}
#code-buttons-header .pformstrip {
border-top: 0px;
}
#edit-by-line {
display: none;
}
.postlinksbar {
padding: 10px;
letter-spacing: 1px;
text-transform: uppercase;
font: 800 10px poppins;
border-bottom: 1px solid var(--border3);
position: relative;
z-index: 2;
}
.postlinksbar a {
color: var(--text2);
}
/*******************************
PAGINATION
*******************************/
.pagination .pagination_current, .pagination a {
display: inline-block;
text-align: center;
padding: 10px;
}
.pagination a, .pagination_page {
border: 1px solid var(--border1);
background: linear-gradient(45deg,rgba(var(--rgb1),0.4),rgba(var(--rgb2),0.4));
color: #222;
text-decoration:none;
font: 800 10px poppins;
width: 10px;
height: 10px;
color: #eee;
}
.pagination_pagetxt {
display: none;
}
.pagination a:hover {
width: 10px;
height: 10px;
text-decoration: none;
background: linear-gradient(45deg,rgba(var(--rgb1),0.8),rgba(var(--rgb2),0.8));
}
.pagination .pagination_current {
width: 10px;
height: 10px;
text-decoration:none;
font: 800 10px poppins;
background: linear-gradient(45deg,rgba(var(--rgb1),0.8),rgba(var(--rgb2),0.8));
color: #eee;
border: 1px solid var(--border1);
}
.pagination_first, .pagination_last {
display: inline-block;
width: 50px!important;
text-transform: uppercase;
}
.goto-firstunread {
text-transform: uppercase;
font: 800 10px poppins;
letter-spacing: 1px;
}
.maintitle {
background: var(--boardbg);
border-top: 1px solid var(--border3);
border-bottom: 1px solid var(--border3);
position: relative;
padding: 50px;
text-align: center;
display: flex;
flex-direction: column;
color: #eee;
text-transform: uppercase;
font: 50px abril fatface;
align-items: flex-end;
}
.topic-title-space {
display: none;
}
.topic-desc {
padding: 10px;
border: 1px solid var(--border1);
background: var(--boardbg2);
font: 600 10px poppins;
letter-spacing: 3px;
}
#post-view {
}
.post-top {
height: 200px;
background: var(--boardbg3);
position: relative;
display: flex;
border-bottom: 1px solid var(--border2);
}
.post-quote {
width: 200px;
border-right: 1px solid var(--border2);
background: linear-gradient(to bottom, rgba(var(--rgb1),0.2), rgba(var(--rgb2),0.2), rgba(var(--rgb3),0.2));
height: 120px;
padding: 60px 20px 20px 50px;
color: var(--text1);
}
.post-quote i {
display: block;
position: absolute;
font-size: 100px;
opacity: 0.2;
top: 0px;
left: 10px;
font-style: normal;
}
.post-quote div {
font: 800 10px poppins;
text-transform: uppercase;
letter-spacing: 1px;
text-align: justify;
height: 80px;
width: 150px;
overflow: hidden;
z-index: 2;
}
.post-icon {
position: absolute;
top: 50px;
left: 220px;
z-index: 3;
width: 80px;
height: 80px;
background-size: cover;
border: 10px solid var(--boardbg3);
}
.post-name {
position: relative;
isolation: isolate;
flex: 2;
background: var(--boardbg3);
height: 200px;
}
.post-name:after {
content: "";
z-index: -1;
background-image: url(https://64.media.tumblr.com/aa0af220576 … 55a027.gif);
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: -1;
background-size: cover;
filter: grayscale(100%);
opacity: 0.15;
mix-blend-mode: overlay;
background-position: 100% 30%;
}
.p-name {
margin-left: 60px;
margin-top: 5%;
text-align: center;
width: 450px;
poition: relative;
z-index: 3;
}
.p-name h12 {
margin: 0;
font-family: abril fatface;
text-transform: uppercase;
color: var(--text1);
font-size: 2em;
line-height: .9;
}
.p-name a {
color: var(--text1);
}
.post-infoo {
position: absolute;
top: 20px;
bottom: 20px;
right: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.post-infoo div {
border: 1px solid var(--border2);
background: var(--boardbg2);
color: #eee;
padding: 5px;
display: flex;
justify-content: space-between;
align-items: center;
font: 800 10px poppins;
text-transform: uppercase;
gap: 20px;
letter-spacing: 1px;
}
.post-infoo i {
color: transparent;
-webkit-background-clip: text;
background-image: linear-gradient(45deg, var(--main1), var(--main2), var(--main3));
font-size: 15px;
}
.post-middle {
display: flex;
justify-content: space-between;
}
.post-left {
background: var(--boardbg2);
width: 270px;
border-right: 1px solid var(--border2);
}
.post-date {
display: flex;
justify-content: space-between;
padding: 10px;
color: #eee;
background: var(--boardbg3);
border-bottom: 1px solid var(--border2);
}
.post-date a {
color: #eee;
font: 800 10px poppins;
letter-spacing: 1px;
text-transform: uppercase;
}
.post-count {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--text1);
height: 70px;
padding-right: 20px;
padding-left: 20px;
font: 800 10px poppins;
text-transform: uppercase;
letter-spacing: 1px;
background: linear-gradient(to right, rgba(var(--rgb1),0.2), rgba(var(--rgb2),0.2), rgba(var(--rgb3),0.2));
margin-bottom: 10px;
}
.post-count span {
width: 1px;
background: var(--text1);
height: 40%;
}
.mini-profile {
position: sticky;
top: 10px;
height: 450px;
width: 250px;
margin: auto;
border: 1px solid var(--border2);
margin-bottom: 10px;
}
.mini-av1 {
width: 250px;
height: 450px;
background-size: cover;
position: relative;
overflow: hidden;
transition: all .5s linear;
}
.mini-av2 {
width: 250px;
height: 450px;
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.7);
transition: all .6s linear;
opacity: 0;
}
.mini-profile:hover .mini-av1 {
filter:grayscale(100%);
}
.mini-profile:hover .mini-av2 {
opacity: 1;
}
.mini-info {
position: absolute;
top: 40px;
left: 30px;
right: 30px;
bottom: 40px;
margin: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.mini-info div {
border: 1px solid var(--border2);
background: var(--boardbg2);
color: #eee;
padding: 5px;
display: flex;
justify-content: space-between;
align-items: center;
font: 800 10px poppins;
text-transform: uppercase;
gap: 20px;
letter-spacing: 1px;
}
.mini-info i {
color: transparent;
-webkit-background-clip: text;
background-image: linear-gradient(45deg, var(--main1), var(--main2), var(--main3));
font-size: 15px;
}
.mini-info article {
text-align: center;
}
.mini-info article span {
text-align: center;
display: block;
font: 30px abril fatface;
text-transform: uppercase;
color: #eee;
margin-top: -60px;
text-shadow: 0 0 2px rgba(0,0,0,0.3);
}
.mini-info article i {
font-size: 90px;
}
.mini-info article a {
color: #eee;
}
.mini-info section {
overflow: auto;
height: 30px;
margin-top: 10px;
}
.mini-awards {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.post-right {
background: linear-gradient(to bottom, rgba(var(--rgb1),0.2), rgba(var(--rgb2),0.2), rgba(var(--rgb3),0.2)),var(--boardbg);
width: 714px;
}
.post-buttons {
display: flex;
justify-content: space-between;
color: #eee;
background: var(--boardbg);
border-bottom: 1px solid var(--border2);
height: 35px;
align-items: center;
}
.p-buttons {
display: flex;
justify-content: space-between;
flex: 2;
align-items: center;
padding: 20px
}
.p-buttons a {
color: var(--text1);
font: 800 10px poppins;
text-transform: uppercase;
letter-spacing: 1px;
}
.p-buttons a:before {
content: "[ ";
color: var(--main1);
}
.p-buttons a:after {
content: " ]";
color: var(--main1);
}
.post-shipper {
background: linear-gradient(to right, rgba(var(--rgb1),0.2), rgba(var(--rgb2),0.2), rgba(var(--rgb3),0.2));
padding: 5px;
display: flex;
gap: 10px;
width: 100px;
justify-content: space-between;
align-items: center;
margin: 0;
height: 25px;
border-left: 1px solid var(--border2);
}
.post-shipper a {
color: var(--text1);
font: 800 10px poppins;
text-transform: uppercase;
letter-spacing: 1px;
}
.post-species {
background: var(--boardbg3);
border-bottom: 1px solid var(--border2);
box-sizing: border-box;
display: flex;
gap: 10px;
padding: 12px;
height: 73px;
}
.post-species i {
font-size: 40px;
text-align: center;
color: var(--text1);
}
.species-info {
display: flex;
position: relative;
justify-content: space-between;
width: 670px;
overflow: hidden;
align-items: center;
}
.post-species:hover .species-powers {
right: 0;
}
.post-species:hover .species-name {
left: -250px;
}
.species-name {
font: 25px abril fatface!important;
text-transform: uppercase;
width: 250px;
color: transparent;
-webkit-background-clip: text;
background-image: linear-gradient(to right, var(--main1), var(--main2), var(--main3));
position: absolute;
left: 0;
transition: all 0.6s linear;
}
.species-name sup {
display: block;
font: 800 9px poppins;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text1);
margin-bottom: -5px;
}
.species-name sup:empty {
display: none;}
.species-powers {
display: flex;
justify-content: space-between;
gap: 10px;
position: absolute;
right: -680px;
width: 700px !important;
transition: all 0.6s linear;
align-items: center;
}
.species-powers span {
font: 800 9px poppins;
text-transform: uppercase;
color: var(--text1);
letter-spacing: 0.05em;
}
.species-powers b {
margin-right: 3px;
}
.species-powers span:nth-child(2) b {
color: var(--b1);
}
.species-powers span:nth-child(3) b {
color: var(--b2);
}
.species-powers span:nth-child(4) b {
color: var(--b3);
}
.species-powers span:nth-child(5) b {
color: var(--b4);
}
.species-powers span:nth-child(6) b {
color: var(--b5);
}
.species-powers i {
color: var(--text1);
font-size: 20px;
}
.the-post {
padding: 20px;
}
.post-bottom {
display: flex;
justify-content: space-between;
background: var(--boardbg3);
border-top: 1px solid var(--border2);
height: 160px;
}
.post-relationship {
border-right: 1px solid var(--border2);
width: 250px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
position: relative;
isolation: isolate;
}
.rel-av {
width: 55px;
height: 55px;
position: relative;
z-index: 2;
background-size: cover;
border: 10px solid var(--boardbg2);
}
.rel-status {
text-align: right;
flex: 2;
position: relative;
z-index: 2;
gap: 5px;
}
.rel-status span {
-webkit-background-clip: text;
color: transparent;
background-image: linear-gradient(to right, var(--main1), var(--main2), var(--main3));
font: 16px abril fatface;
text-transform: uppercase;
}
.rel-status sup {
display: block;
font: 800 9px poppins;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text1);
}
.rel-status sub {
display: block;
font: 800 8px poppins;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text4);
text-decoration: line-through;
}
.post-relationship i {
position: absolute;
right: 10px;
color: var(--boardbg2);
font-size: 150px;
}
.post-aesthetics {
background: var(--boardbg2);
flex: 2;
padding: 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.post-aes-img {
width: 70px;
height: 70px;
border: 5px solid var(--border2);
background-size: cover;
}
.post-triggers {
width: 146px;
border-left: 1px solid var(--border2);
}
.post-triggers div {
border-bottom: 1px solid var(--border2);
padding: 7px;
text-align: center;
background: var(--boardbg);
}
.post-triggers div b {
color: transparent;
-webkit-background-clip: text;
background-image: linear-gradient(to right, var(--main1), var(--main2), var(--main3));
font: 18px abril fatface;
text-transform: uppercase;
}
.post-triggers section {
overflow: auto;
height: 90px;
font: 800 10px poppins;
letter-spacing: 1px;
word-break: break-all;
color: var(--text1);
margin: 15px;
text-transform: uppercase;
text-align: justify;
}
.post-triggers section b {
padding: 1px;
background: linear-gradient(
to right,
rgba(var(--rgb1), 0.5),
rgba(var(--rgb2), 0.5),
rgba(var(--rgb3), 0.5)
);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
</style>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<script src="https://unpkg.com/@phosphor-icons/web"></script>
<link href="https://files.jcink.net/uploads/ghostsongs/fonts/ui.css" rel="stylesheet">
<link href="https://files.jcink.net/uploads/ghostsongs/fonts/weathericons.css" rel="stylesheet">
<link href="https://files.jcink.net/uploads/ghostsongs/fonts/honeybee.css" rel="stylesheet">
<link href="https://files.jcink.net/uploads/ghostsongs/fonts/saturnicons.css" rel="stylesheet">
<link href="https://files.jcink.net/uploads/ghostsongs/fonts/cappuccicons.css" rel="stylesheet">
<script src="https://unpkg.com/ionicons@latest/dist/ionicons.js"></script>
</head>
<body>
<div id="wrapper">
<div class="innerwrapper">
<div class="innerwrapper2">
<!--<div id="user-nav"><div id="navstrip" align="left"><span style="display: none;"></span> <a href="#">GHOSTSONGS</a><span class="nav-sep">✦</span><a href="/index.php?act=SC&c=1">BEFORE YOU EMBARK</a><span class="nav-sep">✦</span><a href="/index.php?showforum=52">UPDATES</a></div></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align='left' width="20%" nowrap="nowrap"><span class='pagination'><span class='pagination_pagetxt'><a title="Jump to page..." href="">Pages:</a> (5)</span> <span class='pagination_current'><b>1</b></span> <a href='' class='pagination_page'>2</a> <a href='' class='pagination_page'>3</a> ... <a href='' title='Page: 5' class='pagination_last'>Last »</a></span> <span class='goto-firstunread'>( <a href=''>Go to first unread post</a> )</span></td>
<td align='right' width="80%"><a href=''><div class='button-large'><span>add reply</span></div></a><a href='' title='Start a new topic'><div class='button-large'><span>new topic</span></div></a><a href=''></a></td>
</tr>
</table><BR>-->
<div class="tableborder">
<!-- <div class='maintitle'><span style="display: none;"></span><span class='topic-title-space'> </span><span class='topic-title'>what a wicked game to play</span><span class='topic-desc'>taggedname / taggedname</span></div>
<div align='right' class='postlinksbar'>
<strong> <a href="">Attach New Poll</a> | <a href=''>Track This Topic</a> | <a href=''>Email This Topic</a> | <a href=''>Print This Topic</a></strong>
</div>-->
<div id="post-view" class="g15">
<div class="post-top">
<div class="post-quote"><i>❝</i> <div>but everything is clear in the rear-view mirror some wounds will always sting forever in full bloom. but everything is clear in the rear-view mirror some wounds will always sting forever in full bloom.</div></div><div class="post-icon" style="background-image: url(https://a.l3n.co/i/voYPjr.png);"></div>
<div class="post-name">
<div class="p-name"><a href=""><h12>mephistopheles boucher</h12></a></div>
<div class="post-infoo">
<div>he/they <i class="ph ph-user"></i></div>
<div>223 years old <i class="ph ph-cake"></i></div>
<div>archarius <i class="ph ph-map-pin"></i></div>
<div>mortician & coroner <i class="ph ph-storefront"></i></div>
</div>
</div>
</div>
<div class="post-middle">
<div class="post-left">
<div class="post-date"><i class="ph ph-calendar-heart"></i> <a onclick="link_to_post(1474); return false;" class="permalink">Nov 11 2024, 12:30 AM</a></div>
<div class="post-count"><section>1234 posts</section>
<span></span>
<section>1234 points</section>
</div>
<div class="mini-profile">
<div class="mini-av1" style="background-image: url(https://b.l3n.co/i/H7M7UT.png);"></div>
<div class="mini-av2">
<div class="mini-info">
<article><i class="icon-supernova"></i> <BR><span>supernova</span></article><BR>
<div>laura <i class="ph ph-identification-card"></i></div>
<div>she/they <i class="ph ph-user-focus"></i></div>
<div>est <i class="ph ph-clock"></i></div>
<div>contact <i class="ph ph-discord-logo"></i></div>
<div>yes to mature <i class="ph ph-champagne"></i></div>
<section><span class="mini-awards"><img src="https://files.jcink.net/uploads/ghostsongs/awards/aquarius.png" /> <img src="https://files.jcink.net/uploads/ghostsongs/awards/aquarius.png" /> <img src="https://files.jcink.net/uploads/ghostsongs/awards/aquarius.png" /> <img src="https://files.jcink.net/uploads/ghostsongs/awards/aquarius.png" /> <img src="https://files.jcink.net/uploads/ghostsongs/awards/aquarius.png" /> <img src="https://files.jcink.net/uploads/ghostsongs/awards/aquarius.png" /> <img src="https://files.jcink.net/uploads/ghostsongs/awards/aquarius.png" /></span></section>
</div>
</div>
</div>
</div>
<div class="post-right">
<div class="post-buttons">
<div class="p-buttons"><a href="">quote</a> <a href="">edit</a> <a href="">full edit</a> <a href="">delete</a></div>
<div class="post-shipper"><a href="">shipper</a> <i class="ph ph-pen-nib"></i></div>
</div>
<div class="post-species">
<i class="species-cantivox"></i>
<div class="species-info">
<div class="species-name"><sup></sup>cantivox</div>
<div class="species-powers">
<i class="ph ph-arrow-fat-right"></i>
<span><b>i.</b> biokinesis</span>
<span><b>ii.</b> enhanced condition</span>
<span><b>iii.</b> death sense</span>
<span><b>iv.</b> mediumship</span>
<span><b>v.</b> zoolingualism</span>
</div>
</div>
</div>
<div class="the-post">
xx
</div>
</div>
</div>
<div class="post-bottom">
<div class="post-relationship">
<div class="rel-av" style="background-image: url(https://b.l3n.co/i/lW0k03.png);"></div>
<div class="rel-status"><sup>it's complicated with a</sup>
<span>wynden holloway <sub>testing a subline</sub></span>
</div>
<i class="ph ph-heartbeat"></i>
</div>
<div class="post-aesthetics">
<div class="post-aes-img" style="background-image: url(https://i.pinimg.com/564x/f4/d8/9c/f4d8 … 347ad0.jpg);"></div>
<div class="post-aes-img" style="background-image: url(https://i.pinimg.com/736x/ff/43/81/ff43 … 335c5f.jpg);"></div>
<div class="post-aes-img" style="background-image: url(https://i.pinimg.com/564x/d7/b7/24/d7b7 … a7e512.jpg);"></div>
<div class="post-aes-img" style="background-image: url(https://i.pinimg.com/564x/a9/a3/49/a9a3 … fd8d0f.jpg);"></div>
</div>
<div class="post-triggers"><div><b>please avoid</b></div> <section>needles/blood-drawing, graphic depictions of surgical procedures, <b>ooc pregnancy</b>, descriptions of childbirth, graphic animal abuse</section></div>
</div>
</div></div>
</div>
</div>
<div class="user-links">
<div class="user-links2">
<div class="ldmode"><label class="theme-switch" for="checkbox"> <input type="checkbox" id="checkbox" /> <i class="ph ph-lightbulb"></i></label> </div>
<a href="#" title="settings"><i class="ph ph-gear"></i></a>
<a href="#" title="inbox"><i class="ph ph-envelope"></i><msg>0</msg></a>
<a href="#" title="alerts"><i class="ph ph-bell"></i><msg>1</msg></a>
<a href="#" title="admins"><i class="ph ph-user"></i></a>
<a href="#" title="logout"><i class="ph ph-sign-out"></i></a>
</div>
<div class="user-links3">
<div class="user-name">
<a href="#">firstname lastname</a>
<sub><form action='/index.php?&act=Login&CODE=01&CookieDate=1' name='subswitch' method='POST'>
<input type='hidden' name='auth_key' value='149d15953033f38cb362253f77734a90'>
<input type='hidden' name='UserName' value='subacct'>
<input type='hidden' name='PassWord' value='subacct'>
<input type='hidden' name='referer' value='' />
<select class='forminput' name='sub_id' onchange='this.form.submit()'>
<option value='------------' selected='selected'>Switch Account</option>
<option value='201'> » ALEXEI FAULKNER </option><option value='89'> » ATHENADUS PRIATA </option><option value='190'> » BARTHOLOMEW MARTIN </option><option value='125'> » BEAUREGARD KINCAID </option><option value='146'> » BENJAMIN PUGH </option>
</select>
</form></sub></div>
<img src="https://c.l3n.co/i/BAlpTk.png" /></div>
</div>
</div>
</body>
</html>
[/html]
