/*
-------------------------------------------------------------------------------------------------------
fuck this

-------------------------------------------------------------------------------------------------------
*/



/*

::-webkit-scrollbar-thumb {
    background-color: #0080ff80;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #0080ff;
}
::-webkit-scrollbar-thumb:active {
    background-color: #00ffff;
}
::-webkit-scrollbar {
/*    background-color: #1e1e1e !important;*/
    background-color: var(--darkCol) !important;
}
::-moz-selection {
  color: #00aaff;
  background: #004080;
}
::selection {
  color: #00aaff;
  background: #004080;
}


}
#about a:hover {
    text-decoration: underline !important;
}

#online {
    filter: sepia(1) hue-rotate(198deg);
}

/* media zone lol */
#container, body {
    display: unset;
}
@media only screen and (max-width:1200px){
    .topRight{
        max-width: 550px !important;
    }
}
@media only screen and (max-width:996px){
    .topLeft {
        position: initial !important;
        margin-top: 64px !important;
    }
    .topRight {
        margin-right: 0px !important;
    }
    .extended.box {
        margin-top: 0px !important;
    }
}

/* the things you see while moving (anim) */
@keyframes ScanlineAnimationLeft {
    0% {
        transform: translateX(0px) translateY(0px);
    }
    100% {
        transform: translateX(-32px) translateY(-32px);
    }
}
@keyframes ScanlineAnimationRight {
    0% {
        transform: translateX(0px) translateY(0px);
    }
    100% {
        transform: translateX(32px) translateY(-32px);
    }
}
@-webkit-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

body {
    color: black
}

body {
    background-image: url();
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: gray;
    image-rendering: pixelated;
}

body {
    display: block;
    margin: 8px;
}


* {
    cursor: url(https://myspace.f46n.org/res/discord/attachments/1026982226140872736/1070772978096279552/cursor.cur), auto !important;
}

element.style {
}
div#header {
    background-color: #000000;
    background-position: 0px -400px;
    font-family: "Comic Sans MS";
}
#header {
    all: unset;
    font-family: Arial;
    font-size: 15px;
    background: #;
    color: #000000;
    position: fixed;
    width: calc( 100% - 15px );
    height: 22px;
    padding: 5px;
    left: 0px;
    top: 0px;
    margin-bottom: 40px;
    border-bottom: 1px transparent;
    padding-left: 10px;
    padding-top: 6px;
    overflow: hidden;
    z-index: 300;
}
#header {
    background: #7200a3;
    color: #fff;
    position: fixed;
    width: calc( 100% - 15px );
    height: 22px;
    padding: 5px;
    left: 0px;
    top: 0px;
    margin-bottom: 40px;
    border-bottom: 1px transparent;
    padding-left: 10px;
    padding-top: 6px;
    overflow: hidden;
    z-index: 300;
}

div#hSub {
    color: transparent !important;
    background-color: transparent;
    text-align: center;
    font-family: "Sans Serif";
}

.player audio, .player audio::-webkit-media-controls, .player audio::-webkit-media-controls-panel, .player audio::-webkit-media-controls-enclosure {
    background: #7200a3;
    filter: none;
}
.player audio {
    background: #7200a3;
}

a, .songName {
    color: #7200a3 !important;
}

div.rightHead, div.boxHead {
    background: #7200a3;
    color: transparent;
}

.box {
    border: none;
    overflow: hidden;
}

#commentInput {
    border-color: transparent;
    background-color: #000000b0;
    border-right: 0px solid transparent;
    border-bottom: 0px solid transparent;
    color: #fff !important;
    max-height: 100px !important;
    max-width: 100% !important;
    min-width: 100% !important;
    min-height: 100px !important;
}

input[type="submit" i] {
    background-color: #000000b0;
    border: 0px solid transparent;
    color: #fff !important;
    padding-top: 0px;
    padding-left: 6px;
    padding-right: 6px;
    padding-bottom: 2px;
}
.player {
    padding: 4px;
    margin-top: 20px;
    margin-bottom: 20px;
    background: #000000;
    color: #000;
    width: calc(100% - 10px );
    border: 1px solid #999;
}


.boxButton {
    display: inline-block;
    width: calc( 49% - 60px );
    padding-left: 30px;
    height: 24px;
    font-size: small;
    color: #7200a3;
    padding-top: 7px;
}

a.logo {
    color: transparent;
    text-decoration: none;
    font-size: 0px;
}

.logo::after {
    color: #7200a3;
    text-decoration: none;
    font-size: 16px;
    content: "beast.f46n.org";
    font-family: Comic Sans MS
    font-weight: bold;
}

span#hUp::before {
    content: "i have too much time on my hands";
    animation: blinkingTextBlueK 1s infinite !important;
    color: red;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
}
@keyframes blinkingTextBlueK{
0%{color: #ff0000;}
50%{color: #ffd900;}
100%{color: #7200a3;}
}
/* the button things */
#sMsg {
font-size: 0px;
}
#sMsg:after {
content:"MESSAGE MEEEE"; font-size: small;color: #7200a3; padding-left: 12px;
}
#block {
font-size: 0px;
}
#add {
font-size: small;color: #7200a3;
}
#block:after {
content:"block if you must, idc"; font-size: small;color: #7200a3; padding-left: 12px;
}
#report {
font-size: 0px;
}
#report:after {
content:"dont report the beast!!"; font-size: small;color: #7200a3; padding-left: 12px;
}



/* ============= ANIMATIONS */
@keyframes ScanlineAnimationLeft {
    0% {
        transform: translateX(0px) translateY(0px);
    }
    100% {
        transform: translateX(-32px) translateY(-32px);
    }
}
@keyframes ScanlineAnimationRight {
    0% {
        transform: translateX(0px) translateY(0px);
    }
    100% {
        transform: translateX(32px) translateY(-32px);
    }
}
@-webkit-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* ============== COMMENTS RELATED */
#commentInput {
    border-color: transparent;
    box-shadow: 1px 0 #000000, 0 1px #000000, 1px 1px #000, inset 1px 1px #fff;
    background-color: var(--darkCol);
    border-right: 0px solid transparent;
    border-bottom: 0px solid transparent;
    color: #fff !important;
    max-height: 100px !important;
    max-width: 100% !important;
    min-width: 100% !important;
    min-height: 100px !important;
}
input[type="submit" i] {
    border-color: transparent;
    background-color: var(--darkCol);
    border-right: 0px solid transparent;
    border-bottom: 0px solid transparent;
    color: #fff !important;
    padding-top: 0px;
    padding-left: 6px;
    padding-right: 6px;
    padding-bottom: 2px;
}
.fwiends > .rightHead > b:after {
    content:" (very fwiendly)";
}
#userWall tr {
    background-color: var(--darkCol);
}
/* make userwall section not stupid long; make it scroll */
#userWall {
    height: 360px;
    overflow: auto;
    background: var(--darkCol);
    overflow-x: hidden;
}

*/
div#about {
    height: 256px;
    overflow: scroll;
    overflow-x: hidden !important;
    border-bottom: 2px solid var(--zgreen);
    border-top: 2px solid var(--zgreen);
    background: var(--darkCol);
}
div#who {
    height: 256px;
    overflow: scroll;
    overflow-x: hidden !important;
    border-bottom: 2px solid var(--zgreen);
    border-top: 2px solid var(--zgreen);
    background: var(--darkCol);
}
#online {
    margin-top: 0px !important;
    transform: translateY(16px);
}



/*

/* ================= MAIN BODY STYLING */

}
/* THIS IS TO MAKE THE FANCAM THING 512x512 */
.blurbs > #who > p > iframe {
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 512px;
	height: 512px;
        border: 0;
}
/* remove video url after the embed */
.blurbs > #who > p > a[href="https://www.youtube.com/watch?v=otALAwD3kwo"] {
    display: none;
}
/* DIVIDERS IN ABOUT */
#about img[src="https://liloandstit.ch/divvy.png"] {
    height: 2px;
    width: 100%;
}
/* and blog */
.blogCorpus img[src="https://liloandstit.ch/divvy.png"] {
    height: 2px;
    width: 100%;
}

}
.blurbs, #top, #box, .box, #header {
    color: #fff !important;
    padding-right: 2px;
    padding-left: 3px;
    padding-top: 3px;
    padding-bottom: 2px;
    background-color: var(--darkCol);
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
}
button {
    color: black !important;
    padding-right: 2px;
    padding-left: 3px;
    padding-top: 3px;
    padding-bottom: 2px;
}
.blogCorpus h1 {
    background: var(--darkCol);
    padding-left: 8px;
}
.rightHead, .boxHead {
    background: var(--darkCol) !important;
    color: #fff !important;
}

/* ====== NO FOOTER AND OTHER MISC THINGS */
#footer {
  display: none;
}
#sMsg {
    text-transform: uppercase;
}
#add {
    text-transform: uppercase;
}

/* ============== USERINFO RELATED */
.boxButton {
    color: #fff !important;
    text-decoration: none !important;
}
#lastLogin {
    font-size: 0px !important;
}
#lastLogin:after {
    /*content: "5967856757 years ago";*/
    content: " ";
    font-family: "Comic sans ms"
    padding-top: 45px !important;
    font-size: 15px !important;
}
/* #online img { filter: grayscale(1) brightness(50); } */
.avatar {
    border: 0px solid #000000;
}
.url.box a {
    display: none;
}
.url.box {
    display: none;
}
#avatar {
    margin-left: 12px;
    margin-right: 12px;
}
.topLeft button {
    border-color: transparent;
    background-color: var(--darkCol);
    border-right: 0px solid transparent;
    border-bottom: 0px solid transparent;
    color: #fff !important;
    padding-top: 0px;
    padding-left: 6px;
    padding-right: 6px;
    padding-bottom: 2px;
}
#age {
    font-size: 0px !important;
}
#age:before {
    font-size: 15px !important;
    content: "";
}
#age:after {
    font-size: 15px !important;
    /*content: "hi";*/
    content: "1400"
}
#country {
    font-size: 0px !important;
}
/*#country:before {
    font-size: 15px !important;
    content: "";
}*/
#country:after {
    font-size: 15px !important;
    /*content: "hi";*/
    content: "i am not active here anymore just find me somewhere."
}
#imgPreview {
    backdrop-filter: blur(4px);
}
#report {
    display: none;
}
#block {
    display: none;
}
.shortRight {
    text-align: center;
}