theme.Glass

/* simple configuration */

@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

body, h1, .player, ::-webkit-scrollbar-track {
/*Below is the property that changes the source image of the background. Common color names, hex colors, and images (using url()) are allowed.*/
    background: url(https://images.pexels.com/photos/906143/pexels-photo-906143.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    font-family: montserrat !important;
}

.rightHead, .boxHead {
/* The background color used for the headers on the right container. */
    background-color: rgb(143 163 131 / 76%);
/* The text color used*/
    color: white;
}

div.boxInfo.box {
/* This color should be changed along with the above header colors.*/
    border-bottom: rgb(143 163 131 / 76%) 2px solid !important;
}

div.blogs>div>b, .fwiendCount, td.tableRight>div>b, div.extended.box>a>h3 {
/* Text color used on friend count, blog title, and comment date */
    color: rgb(113 143 95)
}

/*Shared container properties*/
#container>div.topRight, .topLeft {
    background-color: #ffffff6e;
    border-radius: 20px;
    border: double #ffffff 2px;
    text-align: -webkit-center;
    backdrop-filter: blur(3px);
    padding: 0px;
}

p, h6, h5, h3, h2, td.shortRight, div.blogs>div:not(:first-child) {
/*Text color of paragraphs,blog titles, headers and the area right next to the avatar.*/
    color: #2b2c2d;
}

#name {
/* The color of your name*/
    color: #ffffff
}

#header>a.logo:before {
    /* The logo's color can be tinkered with using the filter property. */
    background: url(https://cdn.discordapp.com/attachments/704499836375793775/807979760554606612/223_Myspace_logo-512.png) no-repeat 0 0;
    filter: grayscale(1) brightness(10) hue-rotate(0deg);
    background-size: 24px 24px;
}

#hSub a, #header {
/* Change the color of the text in the subheading. Do not remove the !important tag. */
    color: #fff !important;
    text-decoration: none !important;
    filter: drop-shadow(1px 1px 3px #000b)!important;
}

.player:after, .songName b:after {
/*image that the music player uses*/
    background-image: url("https://f4.bcbits.com/img/a3162559052_10.jpg");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}
/* Complex (i.e. i didnt feel like organizing it) */

/*Header and Subheader*/
#header {
    background: transparent !important;
    font-family: Montserrat !important;
    font-size: 15px !important;
    width: calc( 100% - 15px) !important;
    height: 22px !important;
    padding: 5px !important;
    left: 0px !important;
    top: 0px !important;
    border-bottom: 0px transparent !important;
}

#header>a.logo:before {
    content: " ";
    margin-right: 0px;
    display: inline-block;
    height: 24px;
    width: 24px;
}

#header>a>b>span {
    font-size: 0px;
    position: absolute;
}

#header>a>b>span:before {
    font-size: 20px;
    content: "myspace";
    padding-left: 2px;
}

#hSub {
    font-family: Montserrat !important;
    background: #ffffff00 !important;
    font-size: smaller !important;
    position: fixed !important;
    margin-top: -22px !important;
    text-align: center !important;
    color: #0000 !important;
}

/*Links and Buttons CSS*/

button, #form>form>input[type=submit]:nth-child(3), #hSub a, .boxButton, #top>a>div>b, td.tableLeft>a>div>b, div.blogs>div>a, #viewFriends>b>a {
    color: #ffffff;
    font-family: montserrat;
    transition: all 0.3s;
    position: relative;
}
button::before, #form>form>input[type=submit]:nth-child(3):before, #hSub a:before, .boxButton:before, #top>a>div>b:before, td.tableLeft>a>div>b:before, div.blogs>div>a:before, #viewFriends>b>a:before {
    content: url();
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    transition: all 0.3s;
    border-top: 1px #ffffff80 solid;
    border-bottom: 1px #ffffff80 solid;
    transform: scale(0.1, 1);
}
button:hover, #form>form>input[type=submit]:nth-child(3):hover, #hSub a:hover, .boxButton:hover, #top>a>div>b:hover, td.tableLeft>a>div>b:hover, div.blogs>div>a:hover, #viewFriends>b>a:hover {
    letter-spacing: 2px;
}
button:hover::before, #form>form>input[type=submit]:nth-child(3):hover:before, #hSub a:hover:before, .boxButton:hover:before, #top>a>div>b:hover:before, td.tableLeft>a>div>b:hover:before, div.blogs>div>a:before, #viewFriends>b>a:hover:before {
    opacity: 1;
    transform: scale(1, 1);
}
button::after, #form>form>input[type=submit]:nth-child(3):after, .boxButton:after, #top>a>div>b:after, td.tableLeft>a>div>b:after, div.blogs>div>a:after, #viewFriends>b>a:after {
    content: url();
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: all 0.3s;
}
button:hover::after, #form>form>input[type=submit]:nth-child(3):hover:after, .boxButton:hover:after, #top>a>div>b:hover:after, td.tableLeft>a>div>b:hover:after, div.blogs>div>a:hover:after, #viewFriends>b>a:hover:after {
    opacity: 0;
    transform: scale(0.1, 1);
}
button, #form>form>input[type=submit]:nth-child(3), #top>a>div>b, td.tableLeft>a>div>b, div.blogs>div>a, #viewFriends>b>a {
    line-height: 20px;
    height: 30px;
    text-align: center;
    width: max-content;
    cursor: pointer;
    background-color: transparent;
    border: transparent 1px solid
}
/* End of Links and Buttons CSS */

/*Avatar (own) CSS*/
#avatar:hover {
    box-shadow: rgb(255 255 255) 122px 1px 0px 0px;
    border-top-left-radius: 0px;
    border-bottom-right-radius: 0px;
    transition: all 1s;
}
.avatar {
    border-radius: 100px;
    border: solid white 3px;
    width: 200px;
    margin-right: 20px;
    cursor: default!important;
    transition: all 0.4s;
}
/*Fwiendlist CSS*/
/*Fwiend image and comments image CSS*/
.fwiendFace b {
    overflow: hidden;
    height: 20px;
}
.fwiendFace img, .tableLeft img {
    height: 100px;
    width: 100px;
    border-radius: 100px;
    border: solid white 3px;
    background-color: white;
    place-self: center;
    object-fit: cover;
}
/* CSS to hide the rest of the Fwiendcounter */
div.fwiendCounter {
    font-size: 0px;
}
.fwiendCount {
    font-size: initial;
}
.fwiendCount:after {
    color: rgb(255 255 255);
    content: " fwiends";
    font-size: x-small;
}
/* CSS to condense the "View all of \ Fwiends" text */
#viewFriends>b {
    font-size: 0px;
    margin-right: 20px
}
#viewFriends>b>a, #viewFriends>b>a:before {
    content: "View ";
    font-size: x-small;
}
div.blogs>div .fwiendFace:hover {
    max-width: 50%;
    display: inline-grid;
    padding: 3px;
    text-align: center;
    transition: .5s;
}
/*Fwiend Username css*/
#top>a>div>b {
    display: table-column;
    padding-left: 0%;
    text-overflow: ellipsis;
    animation: marquee 5s linear infinite;
    max-width: 120px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    place-self: center;
    animation-play-state: paused;
}
#top>a>div>b {
    color: #ffffff;
    width: revert !important
}
/*Comments Section CSS*/
.tableRight {
    background: #ffffff91;
    padding: 13px;
    width: auto;
    display: inline-grid;
    overflow-wrap: anywhere;
    border-radius: 21px;
}
.tableRight:hover {
    transform: scale(1.04);
    background-color: #ffffffd6;
    width: 93%;
    transition: 0.3s;
}
td.tableRight>div>b {
    color: rgb(113 143 95);
    float: right;
}
.tableLeft {
    background: #fff0;

}
/* Headers (i dont know why this is placed here)*/
h4 {
    border-bottom: dotted 1px;
    color: white;
    background-attachment: fixed;
}
h1 {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom: double 2px;
    color: white;
}

.rightHead {
    filter: drop-shadow(0px 1px 2px);
}
/*CSS for the blurb right of the Avatar*/
td.shortRight {
    width: 60px;
    font-size: x-small;
    text-align: -webkit-center;
}
#online:after {
    content: "Online";
    color: rgb(113 143 95);
    background: url()
}
#online>img {
    display: none
}
/*Info/Contact Box CSS*/
#container>div.topRight>div.extended.box, div.boxInfo.box {
    border: 0px;
}
div.boxInfo.box {
    height: 26px;
    background: #ffffff75;
    transition: all 0.3s;
}
div.boxInfo.box:hover {
    height: 100px;
    transition: 1s
}
#container>div.topLeft>div.boxInfo.box>div>b:before {
    content: "___";
    color: transparent;
    background: url(https://www.flaticon.com/svg/vstatic/svg/566/566020.svg?token=exp=1612727011~hmac=a4a08636ba2ac179c88d2ea6c9beb048) no-repeat no-repeat;
    margin-right: 6px;
    filter: invert(1);
}
/*Info/Contact Box buttons CSS*/
.boxButton {
    color: #A2B097 !important;
}
#container>div.topLeft>div.boxInfo.box>a {
    filter: invert(1)drop-shadow(0px 2px 1px rgb(113 143 95));
    color: #ffffff !important;
    font-size: smaller;
}
#sMsg {
    background-image: url(https://www.flaticon.com/svg/vstatic/svg/725/725643.svg?token=exp=1612739200~hmac=b7b3599b27459bbf237e9801011c9ccc);
}
#report {
    background-image: url(https://www.flaticon.com/svg/vstatic/svg/726/726186.svg?token=exp=1612739166~hmac=673bd78e19ac58586880be48a08c70db);
}
#add {
    background-image: url(https://www.flaticon.com/svg/vstatic/svg/880/880594.svg?token=exp=1612738730~hmac=386188bc8706bc6e1b45f7109d269430);
}
#block {
    background-image: url(https://www.flaticon.com/svg/vstatic/svg/101/101783.svg?token=exp=1612738875~hmac=08ecaac632443f14f0f77f93142fc89f);
}
.url {
    border: solid 2px #69c;
    padding: 2px;
    display: none;
}
/* MP3 Player CSS (from mike-kommandant) */

.player {
    position: relative;
    color: #2b2c2d;
    --controls-filter: invert(1);
    --time-text-color: #FFF;
}
.songName {
    padding: 10px 16px;
    font-size: 100%;
}
.songName b {
    display: block;
}
.songName a {
    position: absolute;
    top: 16px;
    right: 16px;
}
.songName a img {
    display: block;
    height: 16px !important;
    padding: 0 !important;
}
.songName a img {
    filter: invert(1);
}
.songTitle {
    font-size: 12px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.player audio {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 40px;
}
.player:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    filter: blur(4px);
    opacity: .9;
    pointer-events: none;
    z-index: 5;
}
.songName {
    color: #fff;
    text-align: center;
    position: relative;
    z-index: 10;
}
.player audio {
    position: relative;
    z-index: 10;
}
.songName b {
    display: block;
    font-size: 0;
    line-height: 0;
}
.songName b:after {
    content: "";
    display: block;
    background-color: #333;
    width: 130px;
    height: 130px;
    display: block;
    margin: 0 auto;
}
.songName a {
    position: absolute;
    top: 0;
    left: 16px;
    width: 130px;
    height: 130px;
    background: rgba(0, 0, 0, 0.8);
    margin: 10px auto 0;
    color: #FFF;
    display: block;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.2s linear;
}
.songName a:hover {
    text-decoration: none;
    opacity: 1;
}
.songName a img {
    filter: invert(1);
    float: none !important;
    height: 20px !important;
    margin: 44px auto 0;
}
.songName a:after {
    content: "Download";
    display: block;
    font-size: 10px;
    line-height: 1;
    margin-top: 8px;
}
.songTitle {
    color: #fff;
    font-weight: bold;
    height: 20px;
    margin-top: 10px;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .player:after {
        opacity: 0.2;
    }
}
@media (prefers-color-scheme: dark) and (min-resolution: 0.001dpcm), (prefers-color-scheme: light) and (min-resolution: 0.001dpcm), (prefers-color-scheme: no-preference) and (min-resolution: 0.001dpcm) {
    .player audio::-webkit-media-controls, .player audio::-webkit-media-controls-panel, .player audio::-webkit-media-controls-enclosure {
        background: transparent
    }
    .player audio::-webkit-media-controls-play-button, .player audio::-webkit-media-controls-mute-button, .player audio::-webkit-media-controls-volume-slider, .player audio::-webkit-media-controls-timeline {
        filter: var(--controls-filter);
    }
    .player audio::-webkit-media-controls-current-time-display, .player audio::-webkit-media-controls-time-remaining-display {
        color: var(--time-text-color);
        text-shadow: none;
        font-size: 10px;
    }
}
/* End of MP3 Player CSS */

/* Blog CSS */

.blog img {
    height auto;
    max-width: 100%;
    max-height: 50vh;
    margin: auto;
}
.blog {
    background-color: transparent;
}
#name>a {
    display: none
}
.blogTitle {
    margin-top: -40px;
}
.blogCard .avatar {
    width: 80% !important;
    margin-right: 0px;
    image-orientation: from-image;
}
.blogCard .avatar:hover {
    transition: none !important;
    border-radius: 100px !important;
    box-shadow: none !important;
}
.blogCorpus {
    text-align: justify;
    font-size: larger
}
.blogCorpus>h1, .blogCorpus>h2, .blogCorpus>h3, .blogCorpus>h4, .blogCorpus>h5, .blogCorpus>h6 {
    text-align: center;
}
/* Scrollbar */

::-webkit-scrollbar {
    width: 1.2vw;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 2px 0px 6px rgb(255 255 255 / 85%);
    -webkit-border-radius: 10px;
    border-radius: 0px;
    border-left: 1px white solid;
    background-attachment: local !important;
    background-position: right !important;
}
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgb(255 255 255);
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgb(255 255 255 / 40%);
}