/*
	Vesta by Kendra Alvares
	A Series of Blurs by Kendra Alvares too. Amazing.
*/

:root {
	/* Var definitions. */
	--font1: "Poppins";
	--font2: "Rajdhani";
	--font3: "Oswald";
	
	--success1: #0F3017;
	--success2: #28A745;
	--info1: #0B2B30;
	--info2: #17A2B8;
	--warning1: #544517;
	--warning2: #FFC107;
	--danger1: #441015;
	--danger2: #DC3545;
}

/* Structural related things. */
.flex, .mobileflex { display: flex; }

.flex01 { flex: 0.1; }
.flex05 { flex: 0.5; }
.flex1 { flex: 1; }
.flex45 { flex: 1 1 45%; }
.flex55 { flex: 1 1 55%; }
.flex100 { flex: 1 1 100%; }
.flexwrap { flex-wrap: wrap; }
.flexcenter { justify-content: center; align-items: center; }
.flexend { justify-content: flex-end; align-items: flex-end; }
.gap1 { gap: 1px; }
.gap5 { gap: 5px; }

.righttext { text-align: right; }
.centertext { text-align: center; }
.sticky { position: sticky; top: 0; }
.margin0 { margin: 0; }
.margin2 { margin: 2px; }
p:first-child { margin-top: 0; }
p:last-child { margin-bottom: 0; }

hr { border: 0; background: var(--bg7); height: 1px; width: 90%; }
.showmobile { display: none; }
.description, .error_box, .warn_box, .success_box { padding: 10px; margin: 10px; }
.description { background: var(--bg6); border: 1px solid var(--accent2); color: var(--accent1); }
.error_box { background: var(--accent2); border: 1px solid var(--bg6); color: var(--bg6); }
.warn_box, .success_box { background: var(--accent1); border: 1px solid var(--bg6); color: var(--bg6); }

/* ~Dumb Buttons~ */
.pagination { padding: 0; margin: 0; list-style-type: none; line-height: 32px; }
.pagination li { display: inline-block; }
.page-link { padding: 8px 10px; background: var(--bg6); margin: 0 -2px; font-size: 0.8em; text-transform: lowercase; }
li.active .page-link { background: var(--accent1); }
li.active a { color: var(--bg5); }
.page-link:hover { background: var(--accent2); color: var(--bg5); }
.button_sm { font-size: 0.7em; text-transform: uppercase; padding: 5px 10px; background: var(--bg6); margin: 2px; }
.button_sm:hover { background: var(--accent2); color: var(--bg5); }
.form_group { padding: 2px;gap: 4px; }
.form_prepend { padding: 10px 12px; flex: 1 1 15%; margin: 0; color: var(--accent1);min-width: 328px; }
.form_control { padding: 4px 8px; background: var(--bg6); border: 1px solid var(--bg5); color: var(--text1); font-family: var(--font1); flex: 1 1 55%; }
optgroup { color: var(--accent2); }
option { color: var(--text1); }
button { cursor: pointer; }
.btn { padding: 4px 8px; font-family: var(--font1); color: var(--bg5); background: var(--accent1); border: 0; }
.btn:hover { background: var(--accent2); }

/* ~Dumb tabs~ */
.nav-tabs { padding: 10px; background: var(--bg4); list-style-type: none; margin: 0; }
.nav-tabs li.active { background: var(--accent2); }
.nav-tabs li { display: inline-block; padding: 4px 8px; }
.nav-tabs li:hover { background: var(--accent1); }
.nav-tabs li:hover a { color: var(--bg6); }

.tab-content { background: var(--bg4); padding: 20px; }
.fade{opacity: 0;transition: opacity .15s linear;}
.fade.in{opacity: 1;}
.tab-content>.tab-pane{display:none;}
.tab-content>.active{display:block;}

/* Header Styling */
h1, h2, h3, h4, h5, h6 { text-transform: uppercase; }
h1, h2, h3 { font-family: var(--font2); }
h4, h5, h6 { font-family: var(--font3); }
h1 { font-size: 2.2em; }
h2 { font-size: 2em; }
h3 { font-size: 1.8em; }
h4 { font-size: 1.6em; }
h5 { font-size: 1.4em; }
h6 { font-size: 1.2em; }

/* Styling. */
html, body { width: 100%; height: 100%; padding: 0; margin: 0; }
body { background: var(--bg1) url(../images/moonwallpaper.jpg) bottom center fixed no-repeat; background-size: cover; color: var(--text1); font: 1em/110% var(--font1); }

a { color: var(--accent1); text-decoration: none; }
a:hover { color: var(--accent2); text-decoration: underline; }

main { display: flex; }
.left { width: 25%; max-width: 300px; position: relative; background: var(--bg3); backdrop-filter: blur(5px); z-index: 9; }
.lefti { padding: 20px; max-height: 100%; overflow: auto; position: sticky; top: 0; }
.username { font: 1.6em/110% var(--font3); text-transform: uppercase; color: var(--group); }
.usericon { margin: 20px 0; }
.usericon img { border-radius: 100%; width: 150px; height: auto; border: 5px solid var(--groupdk); }
.lefta a { display: block; margin: 6px 0; }

a.idx { display: block; height: 500px; width: 100%; }
.wrapper { width: 90%; margin: 40px auto; background: var(--bg3); backdrop-filter: blur(5px); }
.inner { padding: 20px; }

.navigation { padding: 10px; background: var(--bg3); }

.category { margin: 20px 0; padding: 10px; background: var(--bg2); }
.category:first-child { margin: 0 0 20px 0; }
.category:last-child { margin: 20px 0 0 0; }
.categoryt { font: 2.4em/110% var(--font3); text-transform: uppercase; color: var(--accent2); margin: 0 0 10px 0; }

.forum { padding: 10px; background: var(--bg3); }
.forumt { font: 2.2em/110% var(--font2); text-transform: uppercase; color: var(--accent1); }
.forumd { height: 100px; overflow: auto; }
.forumlav img { border: 3px solid var(--group); }
.forumlin span { display: block; }

.topict { font: 2.4em/110% var(--font3); text-transform: uppercase; color: var(--accent2); margin: 10px 0 0 0; }
.topici { margin: 0 0 0 6%; }
.topicd { font: 1.6em/110% var(--font2); text-transform: uppercase; color: var(--accent1); }
.floatright { float: right; }
.btn_smol { font-size: 12pt; color: var(--text1); }
.btn_smol .fas { color: var(--accent1); }

.post { background: var(--bg3); margin: 5px 0; }
.post a { color: var(--group); }
.post .button_sm:hover { background: var(--groupdk); }
.posth, .postb, .postf { padding: 10px; }
.post hr { background-color: var(--groupdk); }
.postera { position: relative; }
.posterav img { width: 200px; height: auto; border: 5px solid var(--group); margin: 0 10px 0 0; }
.posteric { position: absolute; bottom: 6px; left: 8px; }
.posteric img { width: 50px; }

.posterat img { border: 5px solid var(--group); margin: 0 10px 0 0; }
.posterin { font: 2.2em/110% var(--font3); text-transform: uppercase; }
.posteriq { position: relative; padding: 0 0 0 26px; margin: 15px 0; }
.posteriq p { margin: 0; }
.posteriq .fas { color: var(--group); position: absolute; font-size: 1.2em; left: 0; }
.posterib { display: flex; gap: 5px; }
.posterib span { background: var(--grouplt); padding: 6px 12px; color: var(--bg5); text-transform: uppercase; font-size: 0.8em; outline: 1px solid var(--groupdk); outline-offset: -4px; }
.posterib span a { color: var(--bg5); }
.postbb { background: var(--groupdk); padding: 6px 0 6px 6px; color: var(--bg5); }
.postbc { padding: 20px; background: var(--bg2); }
.postbc i, .postbc em { color: var(--grouplt); }
.postbc b, .postbc strong, .postbc h1, .postbc h2, .postbc h3 { font-weight: 300; color: var(--group); }
.postbc h4, .postbc h5, .postbc h6 { color: var(--groupdk); }
.postpl span { margin: 0 6px 0 0; color: var(--grouplt); }
.postts { font-size: 0.7em; text-transform: uppercase; }
.postsi img { border: 5px solid var(--group); }

.statc { margin: 20px 0; padding: 10px; background: var(--bg2); }
.statt { font: 2.4em/110% var(--font3); text-transform: uppercase; color: var(--accent2); margin: 0 0 10px 0; }
.stati { padding: 10px; background: var(--bg3); }
.statrt { padding: 10px; height: 338px; overflow: auto; }
.rcnttpcrow { padding: 4px 8px; border-bottom: 1px solid var(--bg6); margin: 10px 0; }
.rcnttpcrow:last-child { border: 0; }
.rcnttpcsav img { border: 3px solid var(--group); }
.smoltext { font-size: 0.7em; text-transform: uppercase; }

.statwo, .statst { height: 150px; padding: 10px; overflow: auto; font-size: 0.7em; text-transform: uppercase; }
.statwo img, .statst img { border: 3px solid var(--group); }
.stattn { margin: 25px 0 10px 0; }

.paget { font: 2.4em/110% var(--font3); text-transform: uppercase; color: var(--accent2); margin: 0 0 10px 0; }
.navlinks a { display: block; padding: 4px 8px; }
.page b, .page strong, .page h4, .page h5, .page h6 { font-weight: 300; color: var(--accent2); }
.page i, .page em, .page h1, .page h2, .page h3 { color: var(--accent1); }
.page { padding: 5px; }
.pagenv { padding: 10px; }
.pagebc { padding: 20px; background: var(--bg2); }

.claims { text-transform: lowercase; }
.claims strong { display: block; font-weight: 300; color: var(--text1); }
.claims em { font-style: normal; }

.online { margin: 20px 0; background: var(--bg2); padding: 10px; }
.onlinet { font: 2.4em/110% var(--font3); text-transform: uppercase; color: var(--accent2); margin: 0 0 10px 0; }
.onlinerw { padding: 10px; background: var(--bg3); margin: 10px 0; }
.onlineav img { width: 60px; height: auto; }

.profile { background: var(--bg3); }
.profile b, .profile strong, .profile a { color: var(--group); }
.profile em, .profile i, .profile h4, .profile h5, .profile h6 { color: var(--groupdk); }
.profile a:hover, .profile h1, .profile h2, .profile h3 { color: var(--grouplt); }

.profiletb { padding: 10px; background: var(--groupdk); }
.profilebi { background: url(../images/moonwallpaper.jpg) top center; background-size: cover; }
.profilehi { height: 400px; position: relative; backdrop-filter: brightness(0.5); }
.profileav { position: absolute; bottom: 10px; left: 10px; border: 4px solid var(--group); height: 250px; width: 250px; }
.profilein { position: absolute; bottom: 10px; left: 270px; text-shadow: 0 0 4px var(--bg6),1px 1px 4px var(--bg6),-1px -1px 4px var(--bg6); }
.profilenm { font: 2.4em/110% var(--font3); text-transform: uppercase; color: var(--group); padding: 0 10px; margin: 0 0 0 58px; }
.profileqt { padding: 0 10px 10px 10px; margin: 0 0 0 58px; }
.profileqt p { margin: 0; }
.profileoc { background: var(--groupdk); padding: 10px; }
.profileoc img { border: 3px solid var(--group); width: 40px; height: auto; }
.profilelr { padding: 10px; justify-content: space-evenly; }
.profilels { padding: 20px; background: var(--bg3); }
.profilers img { margin: 5px; border: 5px solid var(--groupdk); }

.profiledl { display: flex; gap: 5px; padding: 5px; border-bottom: 1px solid var(--groupdk); }
.profiledl:last-child { border: 0; }
.profiledll { padding: 5px; border-bottom: 1px solid var(--groupdk); }
.profiledll:last-child { border: 0; }
.profiledt { flex: 0.5; color: var(--group); font-family: var(--font3); text-transform: uppercase; }
.profiledd { flex: 1; }
.profilef { padding: 5px; }
.profileic { position: absolute; bottom: 12%; left: 1%; }
.profileic img { height: 50px; width: auto; }

.track { padding: 10px; margin: 10px; background: var(--bg4); }
.tracknm { font: 1.6em/110% var(--font3); text-transform: uppercase; }
.trackno { border-top: 1px solid var(--group); margin: 10px 0 0 0; padding: 10px; }

.managec { background: var(--bg3); }
.managecr { margin: 10px; padding: 10px; background: var(--bg4); }

.rankingav img { border: 4px solid var(--group); width: 100px; height: auto; }
.rankingnm { font: 2.2em/110% var(--font3); text-transform: uppercase; }
.rankingti { font: 1.2em/110% var(--font1); text-transform: uppercase; }
.rankingda { justify-content: space-evenly; border-top: 1px solid var(--groupdk); margin: 10px 0 0 0; padding: 10px 0 0 0; }
.rankingdt { padding: 10px; }
.rankingdt span { display: block; }

.topics { background: var(--bg2); margin: 20px 0; }
.checkbox { padding: 20px 10px; }
.topic_row {display: flex;align-items: center;background: var(--back1);}
.modbox {position: absolute;right: 30px;top: 10px;}
.topic_info {position: relative;flex: 1;padding: 10px;text-align: center;}
.topic_stats {background: var(--border2);font-size: 10pt;-webkit-transform: rotate(-90deg);transform: rotate(-90deg);white-space: nowrap;width: 134px;display: flex;align-items: center;justify-content: center;text-transform: uppercase;padding: 10px 0;gap: 10px;margin-left: -48px;color: var(--group);}
.topic_icon {flex: 0.1;}
.topic_info h6 {margin: 0;padding: 10px 5px;border-bottom: 1px solid var(--group);text-transform: uppercase;font-size: 1.6em;font-weight: 300;}
.topic_info h6 .fas, .topic_info h6 .fab {margin: 0 10px;color: var(--warning2);}
.topicinfo {text-align: right;padding: 0 10px;}
.topicinfo strong {display: block;font-weight: 300;text-transform: uppercase;font-size: 8pt;line-height: 100%;}
.topic_lastpost {flex: 0.1;text-align: center;background: var(--border2);padding: 57px 10px;}
.topic_info a {color: var(--group);}
.topic_block .row2, .topic_block .darkrow2 {display: none;}
.topic_block form .darkrow2 {display: block;text-transform: uppercase;font-size: 9pt;}
.topic_lpav {flex: 0.1;}
.topic_lpav img { width: 60px;height: auto; border: 10px solid var(--group); outline: 1px solid var(--groupdk); outline-offset: -5px; }
.topic_info .small {font-size: 10pt;text-transform: lowercase;font-variant: small-caps;color: transparent;}
.topic_info .small a {background: var(--back1);padding: 2px 6px;margin: 2px;}
.topic-icons {position: relative;width: 90%;margin: 0 auto;top: 20px;}
.topic_info p {margin: 0.4em 0 1em 0;}

.timeline_nav { padding: 20px; }
.timeline_row { padding: 10px; margin: 10px 0; outline-offset: -10px; background: var(--bg3); border-radius: 10px; }
.timeline_row div { padding: 10px; text-align: center; }
.timeline_row img { outline: 1px solid var(--group); outline-offset: -4px; }
.timeline_title a { font-size: 24pt; font-family: var(--font3); text-transform: uppercase; color: var(--group); }
div.timeline_data { text-transform: uppercase; font-size: 10pt; margin: 0; padding: 0; }
.topicstatus { min-width: 140px; }

.membercontainer { flex: 1; }
.memberav { flex: 0.1; }
.memberav img { width: 200px; height: auto; border: 4px solid var(--group); }
.membername { justify-content: space-between; font: 2.1em/110% var(--font3); text-transform: uppercase; margin: 0 0 10px 0; }
.membername .reduce { font-size: 0.6em; font-family: var(--font2); }
.membercharacters { padding: 10px; }
.membercharacters img { width: 60px; height: auto; border: 3px solid var(--group); }
row { display: flex; }
middle { flex: 1; }
middle hr { background-color: var(--groupdk); }

.recent { margin: 20px 0; }
#music_list audio { height: 20px; width: 100%; margin: 10px 0; }
.fullscreen { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.fullscreen_block { background: var(--bg3); padding: 10px; }

footer { font-size: 0.65em; line-height: 100%; text-transform: uppercase; }
.copyright { background: var(--bg4); padding: 20px; }

/* Responsiveness */
@media only screen and (max-width: 1024px) {
	.mobileclick { font-size: 1.6em; padding: 20px; text-align: center; }
	.mobilemenu { position: absolute; top: 0; bottom: 0; left: 0; width: 250px; }

	.wrapper { margin: 0; width: 100%; }
	.flex { display: block; }
	.showmobile { display: block; }
	.showmobile.mobileflex { display: flex; }
	.nomobile { display: none; }

	.profilein { display: flex; flex-wrap: wrap; left: 10px; }
	.profileic { display: none; }
	.profileav { top: 10px; }
	.profilenm, .profileqt { margin: 0; }
}

/* Post template?? */
.tabsvg { position: absolute; bottom: 0px; left: -4px; right: -4px; top: 230px; z-index: 2; }
.tabsvg .svgbg { width: 100%; color: var(--bg5) !important; stroke-width: 3px; fill: var(--bg5);}
.svgbg { color: var(--group); stroke:var(--group); }
.apost1 {border: 1px solid var(--bg6); outline: 1px solid var(--grouplt); outline-offset: -10px; padding: 20px;overflow: hidden;position: relative; background-color: var(--bg5);background-image: url(../images/moonwallpaper.jpg);background-repeat: no-repeat; background-position: center top -50px; background-size: contain; box-shadow: 0px 0px 3px 4px var(--bg6),0px 0px 3px 4px var(--groupdk); width: 75%; margin: 20px auto; border-radius: 10px; }
/*.apost1 .tabsvg { top: 188px; }*/
.apost2 { z-index: 3; overflow: hidden; position: relative; padding: 294px 20px 20px 20px; }
.apost3 { position: absolute; background: var(--bg5); bottom: 0px; left: -4px; right: -4px; top: 530px; z-index: 2; }

.indexquote {margin: 0 40px 40px 40px;background: var(--bg1);border: 1px solid var(--border2);padding: 20px;}
.iancredit { padding: 10px 0 0 10px; border-top: 1px solid var(--border2); text-align: right; text-transform: uppercase; font-size: 9pt; margin: 20px 0 0 0; }

/* Colours
a.ichibantai {color: #b43a3a!important;}
.ichibantai, .grpichibantai {--group: #b43a3a; --groupdk: #822a2a; --grouplt: #e86161; }
a.nibantai {color: #771616!important;}
.nibantai, .grpnibantai {--group: #771616; --groupdk: #450c0c; --grouplt: #ab3030; }
a.sanbantai {color: #9a6d41!important;}
.sanbantai, .grpsanbantai {--group: #9a6d41; --groupdk: #66482b; --grouplt: #cc9156; }
a.yonbantai {color: #ab9c53!important;}
.yonbantai, .grpyonbantai {--group: #ab9c53; --groupdk: #786e3b; --grouplt: #cc9b6a;}
a.gobantai {color: #749364!important;}
.gobantai, .grpgobantai {--group: #749364; --groupdk: #4c6142; --grouplt: #aac79b; }
a.rokubantai {color: #31682b!important;}
.rokubantai, .grprokubantai {--group: #31682b; --groupdk: #193616; --grouplt: #579c4f; }
a.nanabantai {color: #297d71!important;}
.nanabantai, .grpnanabantai {--group: #297d71; --groupdk: #184a43; --grouplt: #4cb0a1; }
a.hachibantai {color: #638dc9!important;}
.hachibantai, .grphachibantai {--group: #638dc9; --groupdk: #4a6a96; --grouplt: #95c0fc; }
a.kyubantai {color: #3367b0!important;}
.kyubantai, .grpkyubantai {--group: #3367b0; --groupdk: #24497d; --grouplt: #5992e3; }
a.jubantai {color: #686dc0!important;}
.jubantai, .grpjubantai {--group: #686dc0; --groupdk: #4c4f8c; --grouplt: #9b9ff2; }
a.juichibantai {color: #634da6!important;}
.juichibantai, .grpjuichibantai {--group: #634da6; --groupdk: #443573; --grouplt: #9179d9; }
a.junibantai {color: #65388c!important;}
.junibantai, .grpjunibantai {--group: #65388c; --groupdk: #402459; --grouplt: #9360bf; }
a.jusanbantai {color: #8f4981!important;}
.jusanbantai, .grpjusanbantai {--group: #8f4981; --groupdk: #5c2f53; --grouplt: #c276b3; }
a.kidoshu { color: #be678c!important; }
.kidoshu, .grpkidoshu {--group: #be678c; --groupdk: #8c4c68; --grouplt: #f29bc1; }
a.academy { color: #bdbdbd!important; }
.academy, .grpacademy {--group: #bdbdbd; --groupdk: #8a8a8a; --grouplt: #EFEFEF; }

a.ironscale {color: #708090!important;}
.ironscale, .grpironscale {--group: #708090; --groupdk: #48525c; --grouplt: #abb6c2; }
a.shinkuchou {color: #c92e3b!important;}
.shinkuchou, .grpshinkuchou {--group: #c92e3b; --groupdk: #96232c; --grouplt: #fc5361; }
a.tetsuryuu {color: #909090!important;}
.tetsuryuu, .grptetsuryuu {--group: #909090; --groupdk: #5c5c5c; --grouplt: #c2c2c2; }
a.rogue {color: #555555!important;}
.rogue, .grprogue {--group: #555555; --groupdk: #212121; --grouplt: #878787; }

a.staff { color: #6A5ACD!important; }
.staff, .grpstaff {--group: #6A5ACD; --groupdk: #4f4399; --grouplt: #998aff; }
a.regular { color: #3C7E86!important; }
.regular, .grpregular {--group: #3C7E86; --groupdk: #265054; --grouplt: #66b2ba; }
a.guest { color: inherit!important; }
.guest, .grpguest {--group: inherit; --groupdk: inherit; --grouplt: inherit; }
a.inactive { color: black!important; }
.inactive, .grpinactive { --group: black; --groupdk: black; --grouplt: black; }*/

a.pink { color: #c47980!important; }
.pink, .grppink { --group: #c47980; --groupdk: #944b52; --grouplt: #e1a6aa; }
a.red { color: #D04744!important; }
.red, .grpred { --group: #D04744; --groupdk: #A12C2A; --grouplt: #F56561; }
a.orange { color: #CD7F32!important; }
.orange, .grporange { --group: #CD7F32; --groupdk: #AC641D; --grouplt: #F39D48; }
a.yellow { color: #C5B358!important; }
.yellow, .grpyellow { --group: #C5B358; --groupdk: #998937; --grouplt: #EBD97D; }
a.green { color: #468746!important; }
.green, .grpgreen { --group: #468746; --groupdk: #275C27; --grouplt: #71B071; }
a.blue { color: #4DA6CA!important; }
.blue, .grpblue { --group: #4DA6CA; --groupdk: #3382A2; --grouplt: #6CC9EF; }
a.indigo { color: #4D75CA!important; }
.indigo, .grpindigo { --group: #4D75CA; --groupdk: #3056A5; --grouplt: #759AE8; }
a.purple { color: #8E58C8!important; }
.purple, .grppurple { --group: #8E58C8; --groupdk: #6B38A1; --grouplt: #AC79E3; }
a.staff { color: #6A5ACD!important; }
.staff, .grpstaff { --group: #6A5ACD; --groupdk: #4A3CA3; --grouplt: #8879E6; }
a.regular { color: #008080!important; }
.regular, .grpregular { --group: #008080; --groupdk: #024141; --grouplt: #1ED5D5; }
a.guest { color: inherit!important; }
.guest, .grpguest { --group: var(--accent1); --group-dk: var(--accent2); --grouplt: var(--accent2); }
a.inactive { color: black!important; }
.inactive, .grpinactive { --group: black; --groupdk: black; --grouplt: black; }