/*	basic stuff	-----------------------------------------------	*/
    #main, .updates, .currentholder, .marqueebox, .cliques, .poll, .recent, .buttons {
        background-color: var(--container);
        color:var(--text);
        border: var(--black) 4px solid;
        border-bottom:var(--black) 10px solid;
    }
    #main, header, #column, #middle {
        width: 796px;  
        margin: 0% auto 0.5% auto;
    }
    .scrollbox, .content, #statuscafe-content, #statuscafe-username {
        text-shadow:
            1px 1px 0 var(--container),
            -1px -1px 0 var(--container),
            1px -1px 0 var(--container),
            -1px 1px 0 var(--container);
    }
    #middle {
        height:400px;
        display: flex; 
    }
    #column {
        display: flex; 
    }

    .poll { 
       width:210px; 
    }
    .cliques { 
        margin-left:8px;
        width:590px;
    }
    .cliques img{
        filter: drop-shadow(1px 1px 0px #fff) drop-shadow(-1px -1px 0px #fff) drop-shadow(2px 2px 0px var(--dk-color)); 
        padding:5px 2px
    }
    .cliques img:active, .marqueebox img:active {top: 2px; position: relative;}

    
/*	link styling and stuff	-----------------------------------------------	*/
    a, footer a:hover, .linkbar a:hover,.nl a:hover {
       text-decoration: none;
       color: var(--accent);
    }
    #main a:hover, .currently a:hover, .scrollbox a:hover, .statusholder a:hover {
       text-decoration: underline dashed;
       color: var(--accent);
    }
    m {
        text-align:center;
        align-items: center;
        display:block;
    }
    hr {
        border-top: 1px dashed #fff;
        border-style: none none dashed; 
        filter: opacity(70%);
    }
    i {
        color:var(--lt-color);
    }
    h1 {
        font-family: 'Consolas';
        letter-spacing: 2px;
        margin: 0 0 1% 0;
    }
/*	header box on divs	-----------------------------------------------	*/
    .titlebox {
        background-color: var(--black);
        width:100%;
        height:20px;
        font-size:15px;
        padding-left:8px;
        letter-spacing: 8px;
        font-family: 'Consolas';
        color:var(--accent);
        line-height: 16px;
    }
    .titlebox span, .blackbar {user-select: none;}

    .content {
        width: 100%;
        padding: 15px;
    }
    .abouttxt {
        width: 460px;
        padding: 10px;
        margin: 6px;
        line-height: 24px;
    }

    .updates {
        margin-left:auto;
        overflow:hidden;
        width:506px;
        background-image: url(index/updtbun.png);
        background-repeat: no-repeat;
        background-position: 97% 98%;
    }
    .scrollbox {
        overflow-y:scroll;
        height: 272px;
        padding: 7px;
        scrollbar-width: thin;
        scrollbar-color: var(--accent) var(--black);
    }

/*	currently box	-----------------------------------------------	*/
    .currentholder{
        width: 282px;
        margin: 10px 0;
    }
    .currently {
        background-color: var(--container);
        overflow-y:scroll;
        scrollbar-width: none;
        height: 224px;
        padding: 10px 8px;
        line-height:20px;
    }
    .currently b, .scrollbox b {
        background-color:var(--accent);
        color:var(--container);
        padding: 1px 3px;
        font-weight:normal;
        font-family: 'Consolas';
        text-shadow:none;
    }

/*	site buttons box  -----------------------------------------------	*/
    .buttons {
        height: 150px;
        width:386px;
        line-height:20px;
        text-align: center;
        overflow:hidden;
    }
    .buttons textarea{
        border: 1px solid var(--accent); 
        height:45px; 
        width:180px; 
        background-color:var(--accent);
        color:white;
        scrollbar-width: thin;
        scrollbar-color: white var(--accent);
    }
/*	recent posts box  -----------------------------------------------	*/
    .recent {
        margin-right:10px;
        height: 150px;
        width: 100%;
        display: flex;
        flex-wrap: wrap; 
        background-color:black;
        overflow:hidden;
    }
    .recentpost {
        width: 127px;
        height: 116px;
        position: relative;
    }
    .postbg{
        filter: opacity(.45) blur(.25px);
        background-size:cover;
        height: 116px;
    }    
    .postbg:hover{filter: opacity(.75);}
    .posttitle, .postdate{
        pointer-events: none;
        position: absolute;
        padding:2px;
        font-weight: bold;
        color:var(--container);
        font-size:10px;
        text-shadow: 1px 1px 0px var(--black), 2px 2px 0px var(--black);
    }
    .posttitle{right:0; top:0;}
    .postdate{bottom:0;}

/*	statuscafe	-----------------------------------------------	*/
    .statusholder {
        background-color: var(--container);
        background-image: url(index/statuscafe.png);
        background-position:bottom right;
        background-repeat:no-repeat;
        height:126px;
        width: 278px;
        padding: 8px 10px;
        box-shadow: var(--black) 5px 5px 0px;
        border-radius:16px;
        margin-bottom:15px;
    }
    #statuscafe {
        height:90px;
        width:230px;
        overflow-y:scroll;
        overflow-x:hidden;
        -ms-overflow-style: none;
        scrollbar-width: none; 
    }
    #statuscafe-username {
        margin-bottom: .5em;
        width:220px;
        font-size:13px;
            }
    #statuscafe-content {
        margin: 0 1em 0.5em .8em;
        font-size:13px;
    }
    #statuscafe a {
        color:var(--accent);
        font-weight:bold;
    }

/*	tooltips styling	-----------------------------------------------	*/
    #s-m-t-tooltip {
        outline: 3px var(--black) solid;
        border: 1px var(--accent) dashed;
        background: var(--black);
        max-width:300px;
        padding:4px 7px; /* space around the text */
        margin:15px 0px 0px 15px; /* positioning of your hover info in relation to the link */
        color:var(--accent); /* text color */
        font-size:13px; /* font size of your hover info */
        letter-spacing: 1px; /* optional letter spacing */
        z-index:999;
    }

/*	selection styling	-----------------------------------------------	*/
    ::-moz-selection { /* Code for Firefox */
        color: var(--dk-color);
        background: var(--lt-color);
        text-shadow:none;
    }
    ::selection {
        color: var(--dk-color);
        background: var(--lt-color);
        text-shadow:none;
    }

/*	scrollbar styling -----------------------------------------------	*/
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        scrollbar-color: var(--lt-color) var(--dk-color);
    }
    *::-webkit-scrollbar {
        width: 5px;
    }
    *::-webkit-scrollbar-track {
        background: var(--lt-color);
    }
*::-webkit-scrollbar-thumb {
        background-color: var(--dk-color);
        border-radius: 10px;
    }

/*	marquee fanlisting box stuff	-----------------------------------------------	*/
    .marqueebox {
        width: 506px;
        float:right;
        margin-bottom:1vh;
    }
    .marqueebox img:hover{filter:brightness(1.15);}
    .marquee-container {
         overflow: hidden;
         background-color: var(--black);
         font-size: 0;
    }
    .marquee-content {
         width: max-content;
         white-space: nowrap;     
         animation: marquee 40s linear infinite; 
    }
    .marquee-content:hover {
         animation-play-state: paused;
    }
    @keyframes marquee {
        from {
            transform: translateX(0);
        }
        to { 
            transform: translateX(-100%);
        }
    }
    @keyframes marquee {
        100% { 
            transform: translateX(-1250px);  
          }
    }

/*	music player	-----------------------------------------------	*/
    #glenplayer02 {
        z-index:9;
        float:right;
    }
    div.ex2 {
        width: 35px;
        height: 35px;     
        background: var(--black);
        color: var(--lttext);
        border: 2px solid var(--black);
        border-top: none;
        border-bottom-left-radius: 25px;
        padding-left: 8px;
        font-size:24px;
    }
    #glenplayer02 a {
        text-decoration:none;
    }
    #glenplayer02 > div {
        align-self:center;
        -webkit-align-self:center;
    }
    .music-controls {
        cursor:help;
    }
    .pausee {
        display:none;
    }

/*	tippy styling	-----------------------------------------------	*/
    .tippy-box[data-theme~="custom"] {
        max-width: 100px;
        z-index:99;
        letter-spacing:1px;
        margin-top:-8px;
        padding: 0;
        color: var(--lttext);
        background: var(--black);
        font-size: 14px;
        font-family: 'Consolas';
        border-radius:0;
        text-align: center;
    }