← Back to Layouts
test1 wip

Name: FriendRewind
Author: FriendRewind
Author: PopatoCrisps_6724
Category: Classic
Created: October 30, 2026
wip
Comments (0)

No comments yet. Be the first!
You must log in to comment.
CSS Code

<style id="fr-vb2">
/* VB2_STATE:{"cursorUrl":"","overlayUrl":"","overlayOpacity":0.2,"avatarAnimation":"","pageFont":"","useLiveProfile":true,"previewUrl":"/profile?id=4","pageBgImage":"","pageBgMode":"cover","heroImageUrl":"","profileRowBgImage":"","profileRowBgMode":"cover","navBgColor":"#2b333f","navBgImage":"","navBgMode":"cover","navLinkColor":"#ffffff","navLinkHover":"#66aaff","boxBgColor":"#ffffff","boxOpacity":1,"boxRadius":8,"contactHeaderBg":"#4169e1","contactHeaderText":"#ffffff","contactContentBg":"#ffffff","contactBorderColor":"#4169E1","contactBorderWidth":1,"contactBorderRadius":5,"contactBoxAnimation":"","interestsHeaderBg":"#daa520","interestsHeaderText":"#ffffff","interestsContentBg":"#ffffff","interestsBorderColor":"#DAA520","interestsBorderWidth":1,"interestsBorderRadius":5,"contentBoxAnimation":"","textBody":"#000000","textHeading":"#000000","textLink":"#0066cc","headingShadowColor":"#000000","headingShadowBlur":2,"headingShadowEnable":false,"moduleImages":{"contact":"","urlInfo":"","tableSection":"","tunes":"","blogPreview":"","blurbs":"","friends":"","Comments Background":"","comments":""}} */
/* Generated by FriendRewind.com Visual Builder */

.contact {
    border: 1px solid #4169e1 !important;
    border-radius: 5px !important;
  }

.contact .heading {
    background-color: #4169e1 !important;
    color: #ffffff !important;
  }

.table-section, .friends, .blurbs, .module, .profileInfo {
    border: 1px solid #daa520 !important;
    border-radius: 5px !important;
  }

.table-section .heading, .friends .heading, .blurbs .heading, .section .heading, .module .heading, .profileInfo .heading {
    background-color: #daa520 !important;
    color: #ffffff !important;
  }
</style><style>


/* FR_MANUAL_EXTRAS */
</style><div class="free-space">

 
  
  
  
  
</div><style>
/* customization - please refer to layout page for instructions + resources */
:root {
    --background-color: #dfdfdf;
    --background-image: url("");
    --banner-image: url("");
    --accent: #000000;} /*headers color*/

/*toolbar*/
::-webkit-scrollbar{width:16px}
::-webkit-scrollbar:horizontal{height:17px}
::-webkit-scrollbar-corner{background:#dfdfdf}
::-webkit-scrollbar-track{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGElEQVR4AWI6cODAfxBgsre3Zzh48CADAAAA///4rE1UAAAABklEQVQDAGwACkBLoYrPAAAAAElFTkSuQmCC)}
::-webkit-scrollbar-thumb{
  background-color:#dfdfdf;
  box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf}
::-webkit-scrollbar-button:horizontal:end:increment,::-webkit-scrollbar-button:horizontal:start:decrement,::-webkit-scrollbar-button:vertical:end:increment,::-webkit-scrollbar-button:vertical:start:decrement{display:block}::-webkit-scrollbar-button:vertical:start{
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAARCAYAAADUryzEAAAAfUlEQVR4AdyQ0Q3AIAhEL06imziajuImOgmj2NKExmiJ1a+mHyeg3iNgiKjSpgBUcx6w1i4rpcRWXADOSilYEXtYN4CLHX0c4L2fTqWOIGaJGukR0Jv6uoUNAO2zdj8Acs7IitrOkg8AeXgb/wKIMaqLmy3UOOcQQtgSL/oAAAD//+wSoxgAAAAGSURBVAMA7CKgEzu7+lcAAAAASUVORK5CYII=);
  height:17px}
::-webkit-scrollbar-button:vertical:end{
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAARCAYAAADUryzEAAAAhElEQVR4AdyRzRHAEBhEd1RCJ0qjFJ1QiVKSrBk58IlwyuTwEj+7bwYq53zkTQAc6vpAa71MCIFVFAFHKSWswA65BZzs8EGBtRZ2gHTE7ggxRimH0XonYLsNt3NmKqKAm7VU/1yTGAoYnpWZeRQwMOMvAu99eWde2lvq3ShjDJxzW1ByAgAA//9CZxRbAAAABklEQVQDABC4oBMHj25uAAAAAElFTkSuQmCC);
  height:17px}
::-webkit-scrollbar-button:horizontal:start{
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAARCAYAAADUryzEAAAAfElEQVR4AczQwQ2AIBBE0QmVQCeUBqXQCVSypaBjorddFk4evtGYeQaDiEw5DMAM9wUxxu1aa5ziAXg3xsBO3LAP4MNJSyDnbLomsBpTVgHPWAW8YxXovfOdK/UIXkQF+HkPYgIeZAkQsfoJUGsFf9hO77FCSgmllKOIXAAAAP//skopKgAAAAZJREFUAwCYX5cTE8iWqwAAAABJRU5ErkJggg==);
  width:16px}
::-webkit-scrollbar-button:horizontal:end{
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAARCAYAAADUryzEAAAAfUlEQVR4AbzPwQ2AIBBE0QmVQCeUBqXQCVSypahjoifZXTh4+EZj5gWCiByyGYAjXA/EGJdrrXGKG+DbGAMrccNegB87TYGcs8ubAlx7EBXwICZgIS6g907nMxPQxhRVwBqrgGesAvzpSb3Cf0CtFbzzSs/pQkoJpZStiJwAAAD//1YvrgUAAAAGSURBVAMAaF+XE5WugAwAAAAASUVORK5CYII=);
  width:16px}
/*html*/
body,html{overflow:visible!important}
body{
  font-family:'MS PGothic';
  background:var(--background-color) var(--background-image)!important;background-attachment:fixed}
.master-container{
  width:100%;
  max-width:100%}
/*header*/
.myspace-header{
  height:75px!important;
  position:fixed;
  top:0;
  z-index:999}
.myspace-header .top{
  height:75px;
  background:#fff!important;
  color:#000!important;
  justify-content:center}
.myspace-header .links{
  background:#fff;
  border:0!important}
.myspace-header .navigation{
  display:flex;width:100%;
  padding-inline:0px!important;
  padding-bottom:0px!important;
  padding-top:5px!important;
  border-bottom:2px solid #000;
  background:#fff0;
  margin-top:-8px;
  gap:10px;
  text-align:center;
  justify-content:center}
.myspace-header .navigation a{
  width:fit-content;
  padding-inline:3vw!important;
  padding-block:3px!important;
  border-radius:10px 10px 0 0;
  border:1px solid #000;
  transform:translateY(1px);
  margin-top:2px;
  display:inline-block;
  font-size:revert!important;
  font-family:SimSun;
  font-weight:400!important;
  text-decoration:none!important;
  box-shadow:0 -2px 2px 3px rgb(255 255 255 / .5) inset;
  color:#fff!important;
  text-shadow:0 0 1px color-mix(in srgb,var(--accent) 70%,#000),
   0 0 1px color-mix(in srgb,var(--accent) 70%,#000), 
   0 0 1px color-mix(in srgb,var(--accent) 70%,#000), 
   1px 1px 0 color-mix(in srgb,var(--accent) 70%,#000), 
   -1px -1px 0 color-mix(in srgb,var(--accent) 70%,#000), 
   -1px 1px 0 color-mix(in srgb,var(--accent) 70%,#000), 
   1px -1px 0 color-mix(in srgb,var(--accent) 70%,#000)!important;
  background:var(--accent);
  white-space:nowrap;
  text-transform:uppercase;
  height:100%!important;
  line-height:100%!important}
.myspace-header .main-nav-wrapper{background:white!important}
.myspace-header .navigation a:hover{
  background:color-mix(in srgb,var(--accent) 90%,white)!important}
.myspace-header .main-nav-wrapper{height:auto!important}
.dropdown-menu a{
  border-radius:10px 10px 10px 10px!important;
  width:100%!important}
.dropdown-menu{
  background:none!important;
  border:none!important}
.mutual-friends-section{display:none}
.nav-logo{
  filter:drop-shadow(1px 1px 0 black) drop-shadow(1px 0 0 black) drop-shadow(0 1px 0 black) drop-shadow(-1px -1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black)}
.top .left:before{
  content:"";
  position:absolute;
  background:var(--accent);
  width:100%;
  height:130%;
  top:-10px;
  mix-blend-mode:lighten;
  z-index:9999;
  opacity:.9;
  pointer-events:none}
.top .left{
  background:#fff;
  margin-right:auto}
.top .right{margin-right:auto}
/*search bar*/
.myspace-header .search-box::before{
  content:"Search Anything and Everything! All of the Time!:";
  margin-right:10px;
  font-family:"ms pgothic"}
.myspace-header .search-input{
  border:1px gray solid;
  border-radius:3px 3px 3px 3px!important;
  margin-right:10px;
  font-family:'ms pgothic';
  font-size:12px;
  text-transform:lowercase}
.myspace-header .search-button{
  border:1px gray solid;
  border-radius:3px 3px 3px 3px!important;
  font-weight:400;
  color:#000;
  font-family:'ms pgothic';
  font-size:12px}
/*content blocks*/
/*profile content background*/
.row{
  top:65px;
  width:75%;
  position:absolute;
  right:0;
  padding-bottom:40px;
  background:#fff;
  color:#000;
  display:block}
.col{
  width:100%!important;
  display:block;
  background:#fff;
  border-left:1px solid #000}
.col.left{
  display:grid;
  grid-template-columns:repeat(2,1fr) 15%;
  grid-column-gap:10px;
  padding-bottom:0}
/*sidebar*/
.general-about{
  position:fixed;
  left:1%;
  top:115px;
  padding:5px 5px 40px;
  height:250px;
  width:23%;
  border:1px solid #000;
  background:#fff}
.details{
  text-align:right;
  margin-right:10px}
/*online status pill*/
.online{
  color:color-mix(in srgb,var(--accent) 50%,#000);
  filter:saturate(3)}
.online::after{content:"ONLINE!"}
.online img{display:none}
/*mood*/
.profile-mood *,.mood *{font-weight:400}
.profile-mood{
  text-transform:uppercase;
  top:305px;width:21%!important;
  left:2vw;border-top:1px dashed var(--accent);
  padding-top:5px;
  position:fixed;
  padding-inline:5px}
.mood{
  text-transform:uppercase;
  top:335px;
  width:21%!important;
  left:2vw;
  padding-top:5px;
  position:fixed;
  padding-inline:5px}
.mood p:last-child{white-space:nowrap}
.mood p:last-child{overflow:hidden;text-overflow:ellipsis}

.col a{
  color:color-mix(in srgb,var(--accent) 50%,#000000);
  filter:saturate(3);
  text-decoration:underline}
.col a:has(img) img{filter:saturate(.4)}
.profile h1{
  top:90px;
  background:#fff;
  width:23%;
  padding-inline:10px;
  padding-bottom:3px;
  border-radius:10px 10px 0 0;
  background:var(--accent);
  box-shadow:0 -8px 3px 3px rgb(255 255 255 / .5) inset border:1px solid #000;
  border-bottom:0;
  position:fixed;
  left:1%;
  color:#fff!important;
  text-shadow:0 0 1px color-mix(in srgb,var(--accent) 70%,#000),
  0 0 1px color-mix(in srgb,var(--accent) 70%,#000),
  0 0 1px color-mix(in srgb,var(--accent) 70%,#000),
  1px 1px 0 color-mix(in srgb,var(--accent) 70%,#000),
  -1px -1px 0 color-mix(in srgb,var(--accent) 70%,#000),
  -1px 1px 0 color-mix(in srgb,var(--accent) 70%,#000),
  1px -1px 0 color-mix(in srgb,var(--accent) 70%,#000)}
/*profile pic*/
.profile-pic{
  width:11vw;
  height:11vw!important}
.profile-pic .pfp-fallback{
  border:1px solid gray;
  width:100%!important;
  height:100%!important;
  object-fit:cover}
/*contacts*/
.contact{
  width:23%!important;
  top:365px;
  border:0!important;
  position:fixed;
  left:1%}
.contact .inner{
  background:#fff;
  border:1px solid #000;
  height:120px}
.contact .f-col{
  overflow:hidden;
  text-overflow:ellipsis}
.contact .f-col a{
  color:color-mix(in srgb,var(--accent) 50%,#000)!important;
  font-weight:400;
  text-transform:uppercase;
  font-size:revert!important}
.contact .f-col a img{
  filter:saturate(1);
  height:18px;
  width:18px;
  margin-right:5px}
.contact .f-col a:first-child{
  font-size:13px;
  margin-right:5px}
/*box headers*/
.heading{
  border-radius:8px 8px 0 0;
  background:var(--accent)!important;
  box-shadow:0 -4px 3px 3px rgb(255 255 255 / .5) inset;
  border:1px solid #000;
  border-bottom:0;color:#fff!important;
  text-shadow:0 0 1px color-mix(in srgb,var(--accent) 70%,#000),
    0 0 1px color-mix(in srgb,var(--accent) 70%,#000),
    0 0 1px color-mix(in srgb,var(--accent) 70%,#000),
    1px 1px 0 color-mix(in srgb,var(--accent) 70%,#000),
    -1px -1px 0 color-mix(in srgb,var(--accent) 70%,#000),
    -1px 1px 0 color-mix(in srgb,var(--accent) 70%,#000),
    1px -1px 0 color-mix(in srgb,var(--accent) 70%,#000);
  text-transform:uppercase}
.heading *{
  font-weight:normal!important;
  letter-spacing:2px}
.heading a{color:silver}
.profile-info{display:none}
.url-info{
  background:#fff var(--banner-image);
  background-size:cover;
  background-position:0% 30%;
  height:250px;
  padding-top:0px;
  grid-column:span 3;
  image-rendering:pixelated;
  border:1px solid #000!important;
  width:75%!important;
  position:relative;
  margin-bottom:0!important;
  font-size:0px}
.url-info::before{
  content:"welcome to my humble adobe ";
  font-size:35px;
  color:#fff;
  text-shadow:var(--accent) 3px 0 0,var(--accent) 2.83487px .981584px 0,var(--accent) 2.35766px 1.85511px 0,var(--accent) 1.62091px 2.52441px 0,var(--accent) .705713px 2.91581px 0,var(--accent) -.287171px 2.98622px 0,var(--accent) -1.24844px 2.72789px 0,var(--accent) -2.07227px 2.16926px 0,var(--accent) -2.66798px 1.37182px 0,var(--accent) -2.96998px .42336px 0,var(--accent) -2.94502px -.571704px 0,var(--accent) -2.59586px -1.50383px 0,var(--accent) -1.96093px -2.27041px 0,var(--accent) -1.11013px -2.78704px 0,var(--accent) -.137119px -2.99686px 0,var(--accent) .850987px -2.87677px 0,var(--accent) 1.74541px -2.43999px 0,var(--accent) 2.44769px -1.73459px 0,var(--accent) 2.88051px -.838247px 0}
/*my interests*/
.table-section.interests{
  width:90%!important;
  grid-column:span 2;
  height:250px;
  border:0!important}
.table-section.interests .inner{
  border:1px solid #000;
  height:calc(100% - 20px);
  overflow-y:auto;text-align:right}
.table-section.interests tbody{
  display:grid;
  width:100%;
  grid-template-columns:1fr 1fr;
  gap:5px}
.table-section.interests tr{
  display:block;
  width:100%;
  border:1px solid color-mix(in srgb,var(--accent) 50%,#000)}
.table-section.interests td:first-child{
  white-space:nowrap;
  background:linear-gradient(color-mix(in srgb,var(--accent) 40%,#fff 50%),#fff 100%)!important;
  height:20px}
.table-section.interests td{
  display:block;
  width:100%!important;
  background:white!important}
.table-section.interests td:first-child p{
  color:color-mix(in srgb,var(--accent) 80%,#000);
  text-decoration:underline;
  font-weight:400;
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  text-align:left}
/*free-space*/
.free-space{
  position:absolute;
  height:575px;
  width:17%;
  background:#fff;position:absolute;right:10px;top:20px;border:1px solid #000;padding:5px;overflow-y:scroll;text-align:center}
.free-space img{max-width:100%}
.table-section:not(.interests){border:0!important}
.col.right{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  padding-top:10px}
.blurbs{margin:0!important;order:-2;grid-column:span 3}
.blurbs .inner{overflow-y:auto;padding:20px!important}
.col.right .inner{border:1px solid #000}
/*blogs */
body .blog-preview{grid-column:span 1}
.blog-preview{
  order:-1;
  padding:0!important;
  margin:auto!important;
  width:100%}
.blog-preview,.table-section:not(.interests){
  height:200px!important;
  margin:0!important}
.blog-preview h4{
  height:20px;
  overflow:hidden;
  letter-spacing:2px;
  margin:0;width:100%;
  display:block;
  font-weight:400;
  text-transform:uppercase;
  padding-inline:10px;
  padding-bottom:35px;
/
  border-radius:8px 8px 0 0;
  background:var(--accent)!important;
  box-shadow:0 -4px 3px 3px rgb(255 255 255 / .5) inset;
  border:1px solid #000;
  border-bottom:0;color:#fff!important;
  text-shadow:0 0 1px color-mix(in srgb,var(--accent) 70%,#000),
    0 0 1px color-mix(in srgb,var(--accent) 70%,#000),
    0 0 1px color-mix(in srgb,var(--accent) 70%,#000),
    1px 1px 0 color-mix(in srgb,var(--accent) 70%,#000),
    -1px -1px 0 color-mix(in srgb,var(--accent) 70%,#000),
    -1px 1px 0 color-mix(in srgb,var(--accent) 70%,#000),
    1px -1px 0 color-mix(in srgb,var(--accent) 70%,#000);
  text-transform:uppercase}
*/
/*
  border-radius:8px 8px 0 0;
  background:var(--accent);
  box-shadow:0 -8px 3px 3px rgb(255 255 255 / .5) inset;
  border:1px solid #000;
  border-bottom:0;color:#fff!important;
  text-shadow:0 0 1px color-mix(in srgb,var(--accent) 70%,#000),
  0 0 1px color-mix(in srgb,var(--accent) 70%,#000),
  0 0 1px color-mix(in srgb,var(--accent) 70%,#000),
  1px 1px 0 color-mix(in srgb,var(--accent) 70%,#000),
  -1px -1px 0 color-mix(in srgb,var(--accent) 70%,#000),
  -1px 1px 0 color-mix(in srgb,var(--accent) 70%,#000),
  1px -1px 0 color-mix(in srgb,var(--accent) 70%,#000)}
*/
.free-space img{display:inline-block!important}
.table-section:not(.interests) .inner{
  height:calc(100% - 20px);
  padding:10px;
  overflow-y:auto}
.blog-preview p{
  margin:0;
  display:block;
  border:1px solid #000;
  height:calc(100% - 20px);
  padding:10px;overflow-y:auto}
.blog-preview h4 a{color:silver!important}

/*friends and comments*/
#comments{grid-column:span 2;height:480px!important}
.friends:not(#comments){order:5;height:480px!important}
.friends .inner{
  height:calc(100% - 20px)!important;
  overflow-y:auto;
  padding:5px!important}
#comments .inner{height:calc(100% - 20px)!important}
#top8-grid{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:8px 12px!important;
  width:100%!important}

/*friends*/
.profile .friends .person p{
  color:inherit;
  margin-left:0!important}
.profile .friends .person img{border:1px solid gray}
.inner>p{
  position:sticky;
  top:0;background:#fff;
  width:100%;z-index:1;
  border-bottom:1px solid gray;
  font-size:12px;
  padding:0px!important;
  margin:0!important
  }
.inner>p b{
  font-weight:normal!important;
  margin-left:5px}

/*comments*/
.comments-table{
  border-collapse:collapse!important;
  width:calc(100% - 20px)!important;
  margin:10px}
.comments-table tr{border:1px solid var(--accent)}
.comments-table td{background:linear-gradient(color-mix(in srgb,var(--accent) 50%,#fff) 0,#fff 10%)!important}
.comments-table td:first-child{width:10%!important}
.comments-table b,.comments-table small{
  font-weight:400!important;
  font-size:10px;
  color:color-mix(in srgb,var(--accent) 80%,#000);
  letter-spacing:1px}
.friends:not(#comments) .inner{
  height:calc(100% - 20px)!important;
  overflow-y:auto}
  
/*footer*/
footer{
  position:fixed;
  left:1%;
  top:510px;
  height:180px!important;
  padding:5px;
  width:23%;
  border:1px solid #000;
  background:#fff;
  overflow-y:auto}
footer .links,footer p{margin:0}
footer::before{
  content:"";
  display:block;
  height:20px;
  width:20px;
  background:url(https://friendrewind.com/uploads/gallery/23490/img_6a78d8dfdb4f15.51568776.gif);
  margin:auto;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  filter:grayscale()brightness(0)}
footer::after{
  content:"";
  background:var(--accent);
  width:100%;
  height:25px;
  display:block;
  position:absolute;
  top:0;
  left:0;
  mix-blend-mode:lighten}
footer .links{
  display:block;
  height:fit-content;
  background:transparent!important;
  margin-bottom:5px}
.top .right *,footer a{
  color:color-mix(in srgb,var(--accent) 50%,#000)!important;
  text-decoration:underline!important;
  text-transform:uppercase;
  font-weight:400;
  font-size:10px!important;
  text-shadow:none!important}
footer p:nth-child(3){
  margin-top:10px;
  margin-bottom:10px}
footer p:last-child::after{
  content:"original layout by: friendrewind.com/daidai";
  display:block;
  border-top:1px dashed var(--accent);
  margin-top:5px;
  padding:5px;
  font-size:12px}
footer *{font-style:normal}

/*playlist*/
.profile-playlist-mount{position:fixed;top:700px;left:1%;overflow:visible!important}
.profile-playlist-mount *{font-family:'ms pgothic'!important;text-shadow:none!important}
.profile-playlist-widget{max-width:none!important;width:23vw!important;height:180px;background:white!important;color:black!important;box-shadow:none!important;border:1px solid black!important;border-radius:0!important}
.pp-header h3{color:color-mix(in srgb,var(--accent) 50%,#000)!important;text-transform:uppercase;letter-spacing:2px}
.pp-header h3::after{content:"ρ（＾o＾）♪";text-transform:none}
.profile-playlist-add-hint{display:none}
.profile-playlist-widget ul{height:80%!important;max-height:100%!important;overflow-y:scroll!important}
.profile-playlist-widget li.current .song-info{color:color-mix(in srgb,var(--accent) 50%,#000)!important}
.pp-equalizer span{background:color-mix(in srgb,var(--accent) 50%,#000)!important}
.profile-playlist-widget li{
  order-radius:0!important;
  border:1px solid black!important}
.profile-playlist-widget .song-artist{color:color-mix(in srgb,var(--accent) 50%,#000)!important;font-size:11px}
.profile-playlist-widget button,.profile-playlist-widget .pp-drag{
  color:var(--accent)!important}
.profile-playlist-widget button:hover,.profile-playlist-widget .pp-drag:hover{background:none!important}
.profile-playlist-widget li.current{
  background-color:color-mix(in srgb,var(--accent) 50%,#fff)!important;color:color-mix(in srgb,var(--accent) 50%,#000)!important}
.profile-playlist-widget li:hover{
  background-color:color-mix(in srgb,var(--accent) 50%,#fff)!important;color:color-mix(in srgb,var(--accent) 50%,#000)!important;
  border:1px solid var(--accent)!important}
/*music-bar footer*/
/*
.music-bar{filter:grayscale()invert()brightness(1.5);box-shadow:none!important}
.music-bar *{border-radius:0!important}
*/
html::after{
  content:"";
  background:color-mix(in srgb,var(--accent) 80%,#000)!important;
  width:100%;
  height:40px;
  bottom:0;
  position:fixed;
  z-index:99999999;
  mix-blend-mode:overlay;
  pointer-events:none}
/
.table-section.interests tr:nth-child(6){grid-column:span 2;order:6}@media (max-width:768px){body{background:white!important}
.url-info{display:none}
.myspace-header{margin:0!important}
.myspace-header .navigation{display:flex!important;flex-wrap:wrap!important;height:fit-content!important;margin-top:0;gap:0}
.myspace-header .left{margin-left:0px!important}
body.profile-page .master-container{width:100%!important;max-width:100vw!important;box-sizing:border-box!important;padding-left:0px!important;padding-right:0px!important}
.col.left,.col.right,.row{border:0!important}
.col.left{margin-top:-60px}
.general-about .profile-pic{width:40%!important;height:100%!important}
.general-about .profile-pic img{max-height:100%!important;max-width:100%!important}
.contact,.general-about,.mood,span h1,.profile-playlist-mount{display:block!important;position:static!important;width:100%!important}
.profile-mood{position:static;width:100%!important;margin-top:-50px}
.profile-playlist-widget{margin-top:30px;max-width:none!important;width:calc(100vw - 35px)}
footer,footer *{width:0;height:0;opacity:0!important;pointer-events:none}
.col.left{display:block}
.row{width:100%}
footer::before{display:none!important}

nav{position:relative!important}
.profile{margin-top:80px!important}
.table-section.interests .inner{height:250px!important;overflow-y:scroll}
.free-space{position:static;width:100%;height:200px}
.friends{margin-top:20px}
.blog-preview,.table-section:not(.interests){grid-column:span 3!important;width:100%!important}
.blog-preview{margin-bottom:20px!important}
body:has(.photos-preview,.videos-preview)
.blog-preview{grid-column:span 3!important}
.table-section:not(.interests),.friends{padding-bottom:2px}
body.profile-page .friends,body.profile-page #comments{height:400px!important}
.friends table{margin:0!important;height:calc(100% - 15px)!important;overflow-y:scroll}
.friends table tbody{padding-bottom:20px}
body .blog-preview{grid-column:span 3}
.friends{grid-column:span 3!important}
.logo{max-width:100%!important;height:30px!important;}}
*/
</style>