Page 12 - Junie

<!
DOCTYPE html>
<head>
<title>{Title}: members</title>
<link rel="shortcut icon" href="{Favicon}">

<link rel="alternate" type="application/rss+xml" href="{RSS}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></
script>


<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Jost:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?
family=Montserrat+Alternates:wght@400;500;600;700;800&display=swap"
rel="stylesheet">


<script src="https://unpkg.com/phosphor-icons"></script>
<script src="https://unpkg.com/phosphor-icons@1.4.0"></script>


<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>

<style type="text/css">
/*--- EDIT HERE ----*/

:root {
/*---- COLORS -----*/

--background:#eee;
--content:#f8f8f8;
--title:#666;
--text:#888;
--link:#e6676b;
--accent:#f57e82;
--accent-two:#f38e78;
--accent-three:#f3ac8f;
--borders:#ddd;
--shadow:#edd1c6;
--gradient-one:#e6676b;
--gradient-two:#e67e67;
--gradient-three:#e29b7d;
--gradient-text:#fff;
/*---- VARIABLES ---*/

--border-radius:10px; /*-- 0px, 5px, or 10px recommended --*/
--glow: 0 0 10px; /*-- change to 0 if you don't want the glow --*/
/*---- FONT STYLE -----*/

--body-font:'Jost';
--title-font:'Montserrat Alternates';
/*-- to change the fonts: search the font name and replace with the name of the
font you want --*/
--font-size:16px;
}
/*----- TOOLTIPS -----*/
.tippy-tooltip.custom-theme {
background:linear-gradient(to right, var(--gradient-one), var(--gradient-two));
color:var(--gradient-text);
text-shadow:var(--glow);
text-align:center;
text-transform:uppercase;
letter-spacing:.1em;
font-size:.95em;
border-radius:var(--border-radius);
margin-bottom:.5em;
}
/*--- SCROLLBAR ---*/

::-webkit-scrollbar {
width:5px;
height:5px;
background:var(--background);
}
::-webkit-scrollbar-track {
border-radius: 5px;
}
::-webkit-scrollbar-thumb {
background:linear-gradient(to bottom, var(--gradient-one), var(--gradient-
two));
border-radius: 5px;
}
/*--- TEXT SELECTION ---*/

::-moz-selection { /* Code for Firefox */
background:var(--accent);
}
::selection {
}
/*----- BASIC STYLING -----*/
body {
font-family: var(--body-font), sans-serif;
font-size: var(--font-size);
color: var(--text);
line-height:140%;
word-wrap: break-word;
margin:0;
padding:0;
transition:.5s;
}
a {
color:var(--link);
text-decoration: none;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
a:hover {
color: var(--accent);
}
#hua {
display: inline-block;
position: relative;
}
#hua:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: var(--link);
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
#hua:hover:after {
transform-origin: bottom left;
}
blockquote {
border-left:2px solid var(--borders);
padding-left:.75em;
margin-left:1em;
}
li {list-style-type:circle;}
li::marker {color:var(--accent)}
h1, h1 a, h2, h3, h4, h5 {

font-family:var(--title-font), sans-serif;
color:var(--title);
}
h1 {font-size:1.3em;}
h1 a:hover {color:var(--accent);}
h4 {margin:0 0 1em 0; text-align:center;}

h5 {margin:0; padding:0;}
small {font-size: 0.95em;}

big {font-size: 1.1em;}
hr {
height: 1px;
border: none;
box-shadow: none;
background-color: var(--borders);
}
pre {
line-height: inherit;
font-size: inherit;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}
b, strong {
color:var(--title);
font-weight:800;
}
b a:hover {
color:var(--accent);
}
.tmblr-iframe-compact .tmblr-iframe--unified-controls {
z-index: 999999999!important;
margin-top:60px;
opacity:0;
}
.tmblr-iframe-compact .tmblr-iframe--unified-controls:hover {
opacity:1;
}
/*---- HEADER ----*/
header {
position:fixed;
top:0;
left:300px;
right:0;
height:50px;
padding:.25em 1em .25em 1em;
background:linear-gradient(to right, var(--gradient-one), var(--gradient-two),
var(--gradient-three));
display:flex;
align-items:center;
justify-content:space-between;
gap:1em;
z-index:999;
}
.topicon {
display:flex;
align-items:center;
gap:.5em;
}
.topicon img {
width:2.5em;
height:2.5em;
padding:4px;
border-radius:100%;
box-shadow:2px 8px 8px rgba(0,0,0,.1);
}
.topicon b {
font-size:1.1em;
}
nav {
display:flex;
justify-content:center;
align-items:center;
gap:1em;
}
nav .topnav, nav #totop {

display:flex;
align-items:center;
padding:2px;
border-radius:100%;
background:rgba(255,255,255,.25);
}
nav a {
display:flex;
align-items:center;
gap:1em;
padding:.5em;
border-radius:100%;
}
nav i {
font-size:1.4em;
text-shadow:var(--glow)
}
.topnav:hover, #totop:hover {
box-shadow:2px 5px 8px transparent;
transform:scale(.95);
}
#totop:hover i {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
animation-iteration-count:1;
-webkit-animation-iteration-count:1;
animation-name: totop;
-moz-animation-name: totop;
}
#totop a {cursor:help;}
@keyframes totop {
0% {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px)
}
18% {
-webkit-transform: translateY(-3px);
-ms-transform: translateY(-3px);
transform: translateY(-3px)
}
36% {
}
54% {
}
82% {
}
100% {
}
}
/*--- CREDIT: DO NOT TOUCH ---*/
.credit {
z-index:999999;
}
.credit {
padding:2px;
border-radius:100%;
background:var(--accent-three);
display:flex;
align-items:center;
}
.credit i {
font-size:1.5em;
}
.credit:hover {
transform:scale(1.05);
}
.credit:hover i {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
animation-name: bounce;
-moz-animation-name: bounce;
}
.credit a {
display:flex;
align-items:center;
gap:1em;
padding:.5em;
}
@keyframes bounce {
0% {
}
25% {
}
50% {
}
75% {
}
100% {
}
}
/*----- CONTAINERS -----*/
main {
position: relative;
width:90%;
margin:80px auto 2em auto;
}
section {
display:flex;
justify-content:flex-end;
flex-wrap:wrap;
gap:1em;
}
.sidepanel {
position:fixed;
top:0;
left:0;
bottom:0;
width:300px;
overflow:auto;
padding:1em 0 1em 0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
gap:1em;
background:var(--content);
}
article {
width:calc(100% - 300px - 2em);
position:relative;
padding:1em;
display:flex;
gap:.5em;
}
/*---- BASICS ----*/
.heading {
width:calc(100% - 2em);
display:flex;
align-items:center;
border-radius:30px;
margin-bottom:.5em;
}
.heading i {
font-size:1.4em;
}
.heading span {
font-size:1.1em;
font-weight:600;
}
.subheading {
color:var(--title);
font-weight:600;
margin-top:.25em;
}
.sidedesc a, .sidestats a, .sidestatus a {

display:inline-block;
position:relative;
border-bottom:2px solid var(--borders);
}
.sidedesc a:after, .sidestats a:after, .sidestatus a:after {

content: '';
position:absolute;
width:100%;
transform:scaleX(0);
height:2px;
bottom:-2px;
left:0;
transform-origin:middle;
transition: transform 0.25s ease-out;
}
.sidedesc a:hover:after, .sidestats a:hover:after, .sidestatus a:hover:after {
transform-origin: middle;
}
/*--- SIDE PANEL CONT'D ---*/
.sidepanel .subtitle {
width:100%;
font-size:1.2em;
color:var(--title);
font-weight:600;
padding-bottom:.25em;
border-bottom:1px solid var(--borders);
}
.sidedesc {
display:flex;
align-items:center;
}
.sidedesc #text {
padding:0 1em 0 1em;
text-align:center;
}
.sidedesc #text h1 {margin-bottom:.25em;}
.sideimg {
width:150px;
height:150px;
padding:4px;
border-radius:100%;
box-shadow:2px 8px 8px var(--shadow);
}
.sideimg img {
width:150px;
height:150px;
border-radius:100%;
object-fit:cover;
}
.sideicon {
width:90px;
height:90px;
padding:4px;
border-radius:100%;
}
.sideicon img {
width:90px;
height:90px;
border-radius:100%;
}
.sidestats {
display:flex;
gap:.75em;
}
.sidestats li {
display:flex;
align-items:center;
gap:1em;
}
.sidestats b {
width:28%;
text-align:center;
font-size:1.5em;
text-shadow:2px 2px 1px var(--shadow);
}
.sidestats span {width:72%; color:var(--text);}
.sidestatus {
display:flex;
gap:.5em;
}
.sidestatus li {
margin-left:1.5em;
display:flex;
align-items:center;
gap:1em;
}
.sidestatus i {
font-size:1.6em;
}
.sidestatus li.off i {
color:var(--borders);
text-shadow:none;
}
.sidestatus b {font-weight:normal; color:var(--text);}
.sidelinks {
display:flex;
gap:.5em;
}
.sidelinks a {
display:flex;
align-items:center;
gap:1em;
border-radius:30px;
border:2px solid var(--link);
}
.sidelinks i {
font-size:1.3em;
color:var(--link);
}
.sidelinks span {
color:var(--link);
}
.sidelinks a:hover {background:var(--link);}

.sidelinks a:hover i {
color:var(--content);
}
.sidelinks a:hover i:last-of-type {margin-right:1em;}
.sidelinks a:hover span {
color:var(--content);
}
/*--- ADMINS ---*/
.admins {
width:100%;
display:flex;
justify-content:space-evenly;
flex-wrap:wrap;
gap:1em;
}
.admin {
position:relative;
width:250px;
display:flex;
gap:.25em;
}
.adminimg {
position:relative;
width:250px;
height:250px;
padding:2px;
background:linear-gradient(to top, var(--gradient-one), var(--gradient-two),
}
.adminimg img {
width:250px;
height:250px;
object-fit:cover;
}
.adminname {
width:250px;
display:flex;
align-items:center;
gap:.5em;
}
.adminname .name {
color:var(--title);
font-size:1.1em;
font-weight:600;
}
a.cthrough {cursor:help;}
.dropdown i {
font-size:1.4em;
padding:.1em;
border-radius:100%;
background:linear-gradient(to top, var(--accent), var(--accent-two), var(--
accent-three));
}
.admins .sub {
position:absolute;
top:2px;
left:2px;
bottom:2px;
right:2px;
width:calc(250px - 2em);
height:calc(250px - 2em);
display:flex;
gap:.5em;
padding:1em;
z-index:99;
}
.admins .sub #subtitle {

text-align:center;
border-bottom:1px solid rgba(255,255,255,.1);
}
.admins .sub #text {

text-align:center;
}
.admins .sub #sublinks {

display:flex;
align-items:center;
gap:.5em;
}
.admins #sublinks i {
font-size:1.2em;
padding:.4em;
border-radius:100%;
}
.admins #sublinks a:hover i {

box-shadow:none;
}
/*--- STAFF ---*/
.staff-wrap {
width:100%;
display:flex;
flex-wrap:wrap;
gap:1em;
}
.staff {
position:relative;
width:200px;
display:flex;
gap:.25em;
}
.staffimg {
position:relative;
width:200px;
height:200px;
padding:2px;
}
.staffimg img {
width:200px;
height:200px;
object-fit:cover;
}
.staffname {
width:200px;
display:flex;
align-items:center;
gap:.5em;
}
.staffname .name {
color:var(--title);
font-size:1.1em;
font-weight:600;
}
a.cthrough {cursor:help;}
.dropdown i {
font-size:1.4em;
padding:.1em;
border-radius:100%;
background:linear-gradient(to top, var(--accent), var(--accent-two), var(--
accent-three));
}
.staff .sub {
position:absolute;
top:2px;
left:2px;
bottom:2px;
right:2px;
width:calc(200px - 2em);
height:calc(200px - 2em);
display:flex;
gap:.5em;
padding:1em;
z-index:99;
}
.staff .sub #subtitle {

text-align:center;
border-bottom:1px solid rgba(255,255,255,.1);
}
.staff .sub #text {

text-align:center;
}
.staff .sub #sublinks {

display:flex;
align-items:center;
gap:.5em;
}
.staff #sublinks i {
font-size:1.2em;
padding:.4em;
border-radius:100%;
}
.staff #sublinks a:hover i {
box-shadow:none;
}
/*--- MEMBERS ---*/
.members {
width:100%;
display:flex;
flex-wrap:wrap;
gap:.5em;
}
.member {
position:relative;
width:23.5%;
display:flex;
align-items:center;
gap:.5em;
}
.memberimg {
width:4em;
height:4em;
padding:2px;
border-radius:100%;
}
.memberimg img {
width:4em;
height:4em;
border-radius:100%;
object-fit:cover;
}
a.membername {
display:flex;
align-items:flex-start;
text-align:left;
line-height:120%;
}
.membername .name {
color:var(--title);
font-weight:600;
}
.membername .namesub {
color:var(--text);
}
a.membername:hover .name {
text-shadow:none;
}
a.membername:hover .namesub {
color:var(--title);
}
/*---- RESPONSIVENESS ---*/
@media only screen and (max-width: 1000px) {

.tmblr-iframe-compact .tmblr-iframe--unified-controls {display:none;!important;}
.admin {width:200px;}
.adminimg {width:200px;height:200px;}
.adminimg img {width:200px;height:200px;}
.adminname {width:200px;}
.admin .sub {width:calc(200px - 2em); height:calc(200px - 2em);}
.member {width:49%;}

header {left:0;}
article {width:100%;}
.sidepanel {display:none;}
tumblr_controls, .tmblr-iframe{display:none!important;}
}

.topicon img {display:none;}
}

.topnav:not(:first-child) {display:none;}
.members {justify-content:flex-start;}
}
{CustomCSS}
</style>
</head>

<body>
<main> 

<header>
<div class="topicon">
<img src="{portraiturl-128}">
<b>members</b>
</div>
<nav>
<div class="topnav"><a title="home" href="/"><i
class="ph-house"></i></a></div>
<div class="topnav"><a title="contact" href="/ask"><i class="ph-chats-
circle"></i></a></div>
<div class="topnav"><a title="archive" href="/archive"><i class="ph-
archive"></i></a></div>


<div id="totop"><a href="#top" target="_self"><i title="back to top"
class="ph-arrow-up"></i></a></div>
</nav>


<div class="credit"><a title="junie page by sage"
href="https://demontimes.tumblr.com"><i class="ph-ghost"></i></a></div>
</header>
<section>
<div class="sidepanel">
<div class="sidedesc">

<div
class="sideimg"><img
src="https://64.media.tumblr.com/f82641e0e8a74ee3f7c70ecfb8c2d640/2942418c550d8a9e-
ba/s2048x3072/b13ffbfb754fee55cc6cd9d43410b97c8160a25d.png"></div>
<div id="text">

<h1>junie</h1>
this is a members/character page made to go with both <a
href="/post/686464195842211840/teyana-fansite-theme-by-sage-static-
preview">teyana</a> & <a href="/post/685608005883101184/tangerine-theme-by-sage-
static-preview-code">tangerine</a>
</div>
</div>

<div class="sidestats">
<div class="subtitle">stats</div>

<li><b>3</b><span>admins</span></li>
<li><b>4</b><span>staff</span></li>
<li><b>52</b><span>members</span></li>
</div>

<div class="sidestatus">
<div class="subtitle">status</div>

<li class="off"><i class="ph-toggle-left-fill"></i><b>staff apps are
closed</b></li>
<li><i class="ph-toggle-right-fill"></i><b>open for members</b></li>
<li><i class="ph-toggle-right-fill"></i><b>accepting affiliates</b></li>
</div>

<div class="sidelinks">
<div class="subtitle">links</div>
<a href="/"><span>link name</span> <i class="ph-caret-right"></i></a>
</div>
</div>


<article>
<div class="heading"><span>admins</span><i class="ph-flower-lotus"></i></div>
<div class="admins">


<div class="admin">
<div class="adminimg"><img
src="https://64.media.tumblr.com/93f8cb9f7febd7d9b5b7bfa7bb997c4a/b6c29d4ce381faa2-
53/s540x810/c2748fe4c282ab66fa3234d0eed5514c9d092f59.pnj">
</div>
<div class="adminname">
<div class="name">admin name</div>
<div class="dropdown"><a title="more info" href="#"
class="cthrough"><i class="ph-info"></i></a>
<div class="sub">
<div id="subtitle">@name</div>
<div id="text">this is a description, put whatever you
want here!</div>
<div id="sublinks">
<a title="link" href="/"><i class="ph-user-fill"></i></a>
<a title="link" href="/"><i class="ph-heart-fill"></i></a>
</div>
</div>
</div>
</div>
</div>


<div class="admin">
src="https://64.media.tumblr.com/9f06eedb0a96ade93249d10bfe4d6317/b6c29d4ce381faa2-
3d/s540x810/941c52f28244900568bcc2a9b2817c574bd0de38.pnj">
</div>
<div class="sub">
want here!</div>
<div id="sublinks">
</div>
</div>


<div class="admin">
src="https://64.media.tumblr.com/f956e04836b8765f92c13565ac914c3d/b6c29d4ce381faa2-
b3/s540x810/639c0fe350cddfb3bd2c7e60a01d72e1dfbfb682.pnj">
</div>
<div class="sub">
want here!</div>
<div id="sublinks">
</div>
</div>
</div>

</article>


<article>
<div class="heading"><span>staff</span><i class="ph-moon-stars"></i></div>
<div class="staff-wrap">


<div class="staff">
<div class="staffimg"><img
src="https://64.media.tumblr.com/56006d3ac9e2ded901785609f7374528/b6c29d4ce381faa2-
fd/s540x810/6fb07180bf79525123b3d484a470b646608e99fa.pnj">
</div>
<div class="staffname">
<div class="name">staff name</div>
<div class="sub">
want here!</div>
<div id="sublinks">
</div>
</div>
</div>


<div class="staff">
src="https://64.media.tumblr.com/a988b7a1f6f77921c13034bb424ea591/121993c594cd7392-
86/s500x750/97cddca261c2f448045e780d017feb8ee2a49c52.pnj">
</div>
<div class="sub">
want here!</div>
<div id="sublinks">
</div>
</div>


<div class="staff">
src="https://64.media.tumblr.com/7cbbc758447b8ade70c8ca4051523b79/b6c29d4ce381faa2-
41/s500x750/9cbd9bb7eff7d60ec91c1ff2accc6185705fbce5.pnj">
</div>
<div class="sub">
want here!</div>
<div id="sublinks">
</div>
</div>


<div class="staff">
src="https://64.media.tumblr.com/5d8450d570c858cef34bd1b231b0dab6/b6c29d4ce381faa2-
3e/s500x750/1d2aabc544126cbb23fa5e3f103e7bff38eb9a15.pnj">
</div>
<div class="sub">
want here!</div>
<div id="sublinks">
</div>
</div>
</div>

</article>

<article>
<div class="heading"><span>members</span><i class="ph-butterfly"></i></div>
<div class="members">


<div class="member">
<div class="memberimg"><img
src="https://64.media.tumblr.com/fd79bcc407ead8cd05b870f3cb86f628/b6c29d4ce381faa2-
19/s540x810/82fdb294279db72d9307856de60114518f59b37e.pnj">
</div>
<a class="membername" href="/">
<div class="name">name</div>
<div class="namesub">subtitle</div>
</a>
</div>


src="https://64.media.tumblr.com/fd79bcc407ead8cd05b870f3cb86f628/b6c29d4ce381faa2-
19/s540x810/82fdb294279db72d9307856de60114518f59b37e.pnj">
</div>


src="https://64.media.tumblr.com/44677deed9744534bfaf4b447264b301/121993c594cd7392-
22/s1280x1920/2f8933ce7898eb0f9806955d6cea65de225a6eed.pnj">
</div>


src="https://64.media.tumblr.com/44677deed9744534bfaf4b447264b301/121993c594cd7392-
22/s1280x1920/2f8933ce7898eb0f9806955d6cea65de225a6eed.pnj">
</div>


src="https://64.media.tumblr.com/e00355939540c8e6c695dd588db6df2e/b6c29d4ce381faa2-
b6/s540x810/f051c522dc13ae5651c3379dca0a8b9a573eecb8.pnj">
</div>


src="https://64.media.tumblr.com/e00355939540c8e6c695dd588db6df2e/b6c29d4ce381faa2-
b6/s540x810/f051c522dc13ae5651c3379dca0a8b9a573eecb8.pnj">
</div>


src="https://64.media.tumblr.com/ce56d9fe47d58065a7e441d9f665e8ae/b6c29d4ce381faa2-
16/s1280x1920/dfb702894be1371ba1176af6cf37d5a48ad8470e.pnj">
</div>


src="https://64.media.tumblr.com/ce56d9fe47d58065a7e441d9f665e8ae/b6c29d4ce381faa2-
16/s1280x1920/dfb702894be1371ba1176af6cf37d5a48ad8470e.pnj">
</div>
</div>

</article>
</section>
</main>
<script>
// tooltips
tippy('[title]', {
theme: 'custom',
arrow: false,
followCursor: true,
delay: 100,
placement: 'bottom',
offset: "40, 10",
zIndex: 9999999999,
maxWidth: 400,
content(reference) {
const title = reference.getAttribute('title');
reference.removeAttribute('title');
return title;
},
});
//scroll to top
$(document).ready(function(){
$('#totop a').click(function(){
$('html, body').animate({scrollTop : 0},400);
return false;
});
});
//drop downs
$(document).ready(function() {
$(".sub").hide();
$(".cthrough").click(function(event){
$(this).next(".sub").slideToggle(500);
event.preventDefault();
$(this).toggleClass('upside', 500);
});
});
</script>
</body>
</html>

Page 12 - Junie

Uploaded by

Copyright:

Available Formats

Page 12 - Junie

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Page 12 - Junie

Uploaded by

Copyright:

Available Formats

<!

<link rel="shortcut icon" href="{Favicon}">

SEARCH 'EDIT HERE'

/*--- EDIT HERE ----*/

/*---- COLORS -----*/

/*---- VARIABLES ---*/

/*---- FONT STYLE -----*/

/*----- TOOLTIPS -----*/

/*--- SCROLLBAR ---*/

/*--- TEXT SELECTION ---*/

/*----- BASIC STYLING -----*/

h1, h1 a, h2, h3, h4, h5 {

h4 {margin:0 0 1em 0; text-align:center;}

small {font-size: 0.95em;}

/*---- HEADER ----*/

nav .topnav, nav #totop {

/*--- CREDIT: DO NOT TOUCH ---*/

/*----- CONTAINERS -----*/

/*---- BASICS ----*/

.sidedesc a, .sidestats a, .sidestatus a {

.sidedesc a:after, .sidestats a:after, .sidestatus a:after {

/*--- SIDE PANEL CONT'D ---*/

.sidestats span {width:72%; color:var(--text);}

.sidestatus b {font-weight:normal; color:var(--text);}

.sidelinks a:hover {background:var(--link);}

/*--- ADMINS ---*/

.admins .sub #subtitle {

.admins .sub #text {

.admins .sub #sublinks {

.admins #sublinks a:hover i {

/*--- STAFF ---*/

.staff .sub #subtitle {

.staff .sub #text {

.staff .sub #sublinks {

/*--- MEMBERS ---*/

/*---- RESPONSIVENESS ---*/

@media only screen and (max-width: 1000px) {

@media only screen and (max-width: 825px) {

@media only screen and (max-width: 600px) {

@media only screen and (max-width: 500px) {

<main>

<!--- EDIT HERE: HEADER

<section>

<!-- EDIT HERE: SIDE IMG AND DESCRIPTION

<div id="text">

<!-- EDIT HERE: SIDE STATS

<!-- EDIT HERE: SIDE STATUSES

TOGGLE OFF FORMAT:

<!-- EDIT HERE: LINKS

</div>

/--- EDIT HERE ----/

/---- COLORS -----/

/---- VARIABLES ---/

/---- FONT STYLE -----/

/----- TOOLTIPS -----/

/--- SCROLLBAR ---/

/--- TEXT SELECTION ---/

/----- BASIC STYLING -----/

/---- HEADER ----/

/--- CREDIT: DO NOT TOUCH ---/

/----- CONTAINERS -----/

/---- BASICS ----/

/--- SIDE PANEL CONT'D ---/

/--- ADMINS ---/

/--- STAFF ---/

/--- MEMBERS ---/

/---- RESPONSIVENESS ---/