@font-face {
    font-family: Geneva;
    src: url(https://file.garden/Z6x-0c5xHS17z_H6/Geneva.ttf);
}

@keyframes floatingguy {
    from {
        top: 0.00px;
    }
   to {
        top: 20.00px;
    }
}

a, .boxButton {
    color:white;
}

a:hover, .boxButton:hover, #header a:hover, #hSub a:hover {
    color:#ff79d6;
}

a:active, .boxButton:active, #header a:active, #hSub a:active {
    color:#ff0000;
}



a, .boxButton, .fwiendFace {
    color:pink;
    transition: color 0.1s, background 0.1s, outline 0.1s, border-radius 0.1s;
}

a:hover, .boxButton:hover, #header a:hover, #hSub a:hover, .fwiendFace:hover {
    color:lightyellow;
}

a:active, .boxButton:active, #header a:active, #hSub a:active, .fwiendFace:active  {
    color:brown;
    transition: none;
    background:pink;
    outline: 3px solid pink;
    border-radius:3px;
}

*:not(.tableRight *) {
    font-weight:normal;
}

.date {
    font-weight:normal;
}

body {
    image-rendering:pixelated;
    background:#171717;
    background: url("https://file.garden/Z6x-0c5xHS17z_H6/xmb.gif");
    background-attachment: fixed;
    background-size:cover;
    color:white;
    width:fit-content;
    text-align:center;
    margin:auto;
    font-size:9pt;
    -webkit-font-smoothing: none;
    font-family:Geneva;
    padding-top: 15px;
    text-transform: lowercase;
}

body::before {}

#container:hover {
    animation-play-state:paused !important;
}

#container {
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    width:923px;
    animation: floatingguy 4s infinite ease-in-out !important;
    animation-direction:alternate !important;
    position: relative;
}

.svmsg {
    display: none;
}

.url.box {
    display: none;
}

#hSub {
    width:100%;
    background:#060606;
    background: linear-gradient(0deg,rgba(6, 6, 6, 1) 0%, rgba(6, 6, 6, 1) 25%, rgba(6, 6, 6, .7) 100%);
    display:block;
    position:static;
    padding-bottom:21px;
    margin-top:-40px;
    margin-bottom:5px;
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
    border-color: dimgrey;
    border-width: 0px 1px 1px 1px;
    border-style:solid;
    box-sizing:border-box;
    font-family:inherit;
    font-size:0;
    filter:contrast(0.65);
    backdrop-filter: blur(7px) drop-shadow(1px 1px 50px #0a0a0a);
}

#hSub a {
    font-size:9pt;
    margin: 0 5px;
}

#header {
    padding-bottom:20px;
    width:100%;
    background: #060606;
    background: linear-gradient(0deg,rgba(6, 6, 6, .7) 0%, rgba(6, 6, 6, .7) 50%, rgb(51 51 51) 100%);
    border-bottom:0;
    display:block;
    position:static;
    border-top-left-radius:3px;
    border-top-right-radius:3px;
    border-color: dimgrey;
    border-width: 1px 1px 0px 1px;
    border-style:solid;
    box-sizing:border-box;
    font-family:inherit;
    font-size:inherit;
    filter:contrast(0.65);
    backdrop-filter: blur(7px) drop-shadow(1px 1px 50px #0a0a0a);
    text-align:left;
}

#header a:not(.logo) {
    text-align:end;
    font-size:9pt;
    font-family:inherit;
}

.player {
    border-radius: 10px;
    border-color: dimgrey;
    background: linear-gradient(0deg, rgba(6, 6, 6, 0.5) 0%, rgba(6, 6, 6, 0.3) 80%, rgba(61, 60, 60, 0.6) 100%);
    color: white;
}

.songName {
    font-size:9pt;
}

.player img {
    filter:invert(1);
}

.topLeft {
    background: linear-gradient(0deg,rgba(6, 6, 6, 1) 0%, rgba(6, 6, 6, .7) 96%, rgb(51 51 51) 100%);
    border: 1px solid dimgrey;
    border-radius:3px;
    width: calc(40% - 25px);
    float: right;
    backdrop-filter: blur(7px) drop-shadow(1px 1px 50px #0a0a0a);
    filter:contrast(0.65);
}

.topRight {
    background: linear-gradient(0deg,rgba(6, 6, 6, 1) 0%, rgba(6, 6, 6, .7) 97%, rgb(51 51 51) 100%);
    border: 1px solid dimgrey;
    border-radius:3px;
    width: calc(60% - 25px);
    min-height: 630px;
    max-height: calc(100vH - 180px);
    overflow-y: scroll;
    scrollbar-width: none;
    float: left;
    backdrop-filter: blur(7px) drop-shadow(1px 1px 50px #0a0a0a);
    filter:contrast(0.65);
}

#imgPreview {
    width: 50vW;
    height: 100vH;
    position: fixed;
    background: transparent;
}

a.logo {
    font-size: 0;
}

a.logo:after {
    content: "Be your true mind...";
    font-size: 9pt;
    font-style:italic;
}

button, input {
    background: linear-gradient(0deg,rgba(6, 6, 6, 1) 0%, rgba(6, 6, 6, .7) 60%, rgb(61 60 60) 100%);
    border: 1px solid dimgrey;
    border-radius:100px;
    color: white;
    padding: 2.5px 15px;
}

button:hover, input:hover {
    border: 1px solid #5451b3;
}

.boxHead, .rightHead {
    background: linear-gradient(0deg,rgba(6, 6, 6, 1) 0%, rgba(6, 6, 6, .7) 60%, rgb(61 60 60) 100%);
    border: 1px solid dimgrey;
    border-radius:100px;
    color: white;
    padding: 2px 15px;
}

h4 {
    color:#a2a2a2;
}

.extended.box {
    background: linear-gradient(0deg,rgba(6, 6, 6, .3) 0%, rgba(6, 6, 6, .1) 60%, rgb(61, 60, 60, .4) 100%);
    border: 1px solid dimgrey;
    border-radius:15px;
    color: white;
    padding: 2px 15px;
}

.boxInfo {
    border-radius: 10px;
    border-color: dimgrey;
    background: linear-gradient(0deg,rgba(6, 6, 6, .5) 0%, rgba(6, 6, 6, .3) 80%, rgb(61, 60, 60, .6) 100%);
}

.boxInfo .boxHead {
  border:0;
    background:transparent;
}

.tableLeft, .tableRight {
    background: linear-gradient(0deg,rgba(6, 6, 6, 1) 0%, rgba(6, 6, 6, .7) 96%, rgb(51 51 51) 100%);
    border: 1px solid dimgrey;
    border-radius:3px;
    margin: 5px;
}

.avatar, .fwiendFace img, .tableLeft img {
    transition: filter .3s;
    border: 1px solid dimgray;
    border-radius: 6px;
    object-fit: cover;
    margin-top: 5px;
    aspect-ratio: 1 / 1;
}

img {
    filter:saturate(0);
}

img:hover:not(.player img) {
    filter:saturate(0.45);
    transition: filter 2s;
}

.tableLeft img {
    width: 100%;
}

#footer {
    display: none;
}

audio {}

.box.blog {
    border-radius: 10px;
    border-color: dimgrey;
    border-style:solid;
    border-width:1px;
    background: linear-gradient(0deg,rgba(6, 6, 6, .5) 0%, rgba(6, 6, 6, .3) 80%, rgb(61, 60, 60, .6) 100%);
}

#commentInput {
    background: transparent;
    color: white;
    padding: 3px;
    border-radius: 3px;
    width:98%;
}

.blogCard .avatar {
    width: 196px;
}

.blogTitle {
    display: none;
}

hr {
    border: none;
}

body:after {
    display:block;
    content: "hi";
    font-size:0;
    background: url(https://file.garden/Z6x-0c5xHS17z_H6/rain.png);
    background-size:256px;
    position:fixed;
    top:0;
    width:calc(100vW + 40px);
    height:100vH;
    pointer-events:none;
    opacity: 0.025;
    animation: testt 10s infinite linear, wiggle 4s infinite ease-in-out;
    animation-direction: normal, alternate;
}

@keyframes testt {
    from {
        background-position: 0px 0px;
    }
    to {
        background-position: 0px 1024px;
    }
}

@keyframes wiggle {
    from {
        left: -40px;
    }
    to {
        left: 0px;
    }
}