← Back to Layouts
Vibe. Will make my own enventually.

Name: FriendRewind
Author: FriendRewind
Author: VoidButterfly
Category: Classic
Created: October 25, 2026
It's like that one on here mixed with music thingy
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 */
</style><style>


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

<div class="demos">
  <div class="demos-head">Music</div>

  
  <p class="demos-now">Now Playing</p>
  <iframe class="demos-player" name="demo-player" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube-nocookie.com/embed/Q8xhReeqqJU?enablejsapi=1&amp;origin=https%3A%2F%2Ffriendrewind.com" title="Demo player" allow="autoplay; encrypted-media; picture-in-picture" allowfullscreen sandbox="allow-scripts allow-same-origin allow-popups allow-presentation"></iframe>

  
  <a class="demo" href="https://www.youtube-nocookie.com/embed/Q8xhReeqqJU?autoplay=1" target="demo-player" referrerpolicy="strict-origin-when-cross-origin">
    <img src="/proxy/image.php?url=https%3A%2F%2Fimg.youtube.com%2Fvi%2FQ8xhReeqqJU%2Fmqdefault.jpg" alt="">
    <span class="demo-text"><span class="demo-title">Hubris</span><span class="demo-artist">Patterns</span></span>
    <span class="demo-play"></span>
  </a>
  <a class="demo" href="https://www.youtube-nocookie.com/embed/VIDEO_ID_2?autoplay=1" target="demo-player" referrerpolicy="strict-origin-when-cross-origin">
    <img src="/proxy/image.php?url=https%3A%2F%2Fimg.youtube.com%2Fvi%2FVIDEO_ID_2%2Fmqdefault.jpg" alt="">
    <span class="demo-text"><span class="demo-title">Title</span><span class="demo-artist">Artist</span></span>
    <span class="demo-play"></span>
  </a>
  <a class="demo" href="https://www.youtube-nocookie.com/embed/VIDEO_ID_3?autoplay=1" target="demo-player" referrerpolicy="strict-origin-when-cross-origin">
    <img src="/proxy/image.php?url=https%3A%2F%2Fimg.youtube.com%2Fvi%2FVIDEO_ID_3%2Fmqdefault.jpg" alt="">
    <span class="demo-text"><span class="demo-title">Title</span><span class="demo-artist">Artist</span></span>
    <span class="demo-play"></span>
  </a>
  <a class="demo" href="https://www.youtube-nocookie.com/embed/VIDEO_ID_4?autoplay=1" target="demo-player" referrerpolicy="strict-origin-when-cross-origin">
    <img src="/proxy/image.php?url=https%3A%2F%2Fimg.youtube.com%2Fvi%2FVIDEO_ID_4%2Fmqdefault.jpg" alt="">
    <span class="demo-text"><span class="demo-title">Title</span><span class="demo-artist">Artist</span></span>
    <span class="demo-play"></span>
  </a>
  <a class="demo" href="https://www.youtube-nocookie.com/embed/VIDEO_ID_5?autoplay=1" target="demo-player" referrerpolicy="strict-origin-when-cross-origin">
    <img src="/proxy/image.php?url=https%3A%2F%2Fimg.youtube.com%2Fvi%2FVIDEO_ID_5%2Fmqdefault.jpg" alt="">
    <span class="demo-text"><span class="demo-title">Title</span><span class="demo-artist">Artist</span></span>
    <span class="demo-play"></span>
  </a>
</div>
</div><style>
/* customization - please refer to layout page for instructions + resources */
:root {
    --background-color: silver;
    --background-image: url("");
    --banner-image: url("");
    --accent: #030303;
    /* image that replaces the Japanese banner text */
    --banner-text-image: url("https://friendrewind.com/media/photos/photo-82f9e6735f086f59.webp");
    --banner-text-height: 100%;      /* how tall the image is, compared to the banner box */
    --banner-text-ratio: 1920 / 886; /* your image's width / height, so it never stretches */
}
/* code itself below this line */
::-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}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%}.myspace-header{height:50px!important;position:fixed;top:0;z-index:999}.myspace-header .top{height:50px;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:0!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}.myspace-header .search-box::before{content:"Search Everything!:";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}.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}.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{color:color-mix(in srgb,var(--accent) 50%,#000);filter:saturate(3)}.online::after{content:"ONLINE!"}.online img{display:none}.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%,#000);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{width:11vw;height:11vw!important}.profile-pic .pfp-fallback{border:1px solid gray;width:100%!important;height:100%!important;object-fit:cover}.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}.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;grid-column:span 3;image-rendering:pixelated;border:1px solid #000!important;width:80%!important;position:relative;margin-bottom:0!important;font-size:0}.url-info::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:var(--banner-text-height);aspect-ratio:var(--banner-text-ratio);max-width:100%;background:var(--banner-text-image) center/contain no-repeat;image-rendering:auto;pointer-events:none}.table-section.interests{width:95%!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{position:absolute;height:510px;width:19%;;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:0}.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}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: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;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}#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:0!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}.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:0!important;margin:0!important}.inner>p b{font-weight:normal!important;margin-left:5px}.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{position:fixed;left:1%;top:510px;height:180px!important;padding:5px 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:"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}.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{border-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{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;}}

/* ===== DEMO MUSIC BOX: dark glossy style ===== */

/* make the free space box dark too, so the music box blends in */
.free-space:has(.demos) {
    background: #0b0b0b;
    border-color: #808080;
}

/* the whole music box: dark gradient, gray border, soft inner glow, rounded corners */
.demos {
    --mb-glow: white;            /* glow color for text, borders, buttons */
    --mb-row-fade: 0.10;         /* how visible each thumbnail is behind its row, 0 to 1 */
    --mb-row-fade-active: 0.35;  /* same, for the song you just clicked */
    text-align: left;
    background: linear-gradient(#535353 0%, #000000cc 6%);
    border: 1px solid #808080;
    box-shadow: inset 0 0 5px 1px #535353, #000 1px 1px 10px 2px;
    border-radius: 5px;
    padding: 8px;
}

/* every bit of text inside: white with a faint glow */
.demos * {
    color: #fff !important;
    text-shadow: 0 0 3px var(--mb-glow);
}

/* the title at the top */
.demos-head {
    font-variant: small-caps;
    font-size: 18px;
    letter-spacing: 1px;
    padding: 2px 4px 8px;
}

/* the small NOW PLAYING label */
.demos-now {
    margin: 0 0 4px;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.8;
}

/* the YouTube player */
.demos-player {
    display: block;
    box-sizing: border-box;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid #808080;
    border-radius: 4px;
    background: #000;
    margin-bottom: 8px;
}

/* one song row. Built without relying on flexbox, because the site
   seems to rearrange links, so everything is placed with positioning */
.demos .demo {
    display: block !important;
    position: relative;          /* anchor point for the thumbnail and play button */
    overflow: hidden;            /* clip the thumbnail to the row */
    box-sizing: border-box;
    width: 100%;
    padding: 10px 46px 10px 12px;   /* extra right padding leaves room for the play button */
    margin: 0 0 6px;
    border: 1px solid #3a3a3a;
    border-radius: 4px;
    background: transparent !important;
    text-decoration: none !important;
    filter: none;
    transition: border-color 0.5s ease, box-shadow 0.5s ease;   /* smooth glow in and out */
}

/* the thumbnail becomes a faint background image behind the row */
.demos .demo img {
    position: absolute !important;
    inset: 0;                    /* stretch to all four edges */
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    opacity: var(--mb-row-fade);
    filter: grayscale(1);
    pointer-events: none;
    z-index: 0;
}

/* song text block, sits above the thumbnail */
.demos .demo .demo-text {
    display: block;
    position: relative;
    z-index: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant: small-caps;
    font-size: 14px;
    letter-spacing: 0.5px;
}

/* title on top, artist underneath */
.demos .demo .demo-title,
.demos .demo .demo-artist {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}
.demos .demo .demo-title  { font-weight: bold; }
.demos .demo .demo-artist { font-size: 12px; opacity: 0.85; }

/* round play button, pinned to the right edge and centered vertically */
.demos .demo .demo-play {
    display: block;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    border: 1.5px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 4px var(--mb-glow);
}
.demos .demo .demo-play::before {   /* the triangle, drawn with borders */
    content: "";
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    border-left: 8px solid #fff;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

/* hover: white glowing border */
.demos .demo:hover {
    border-color: #fff !important;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.25);
}

/* the song you clicked: brighter thumbnail + glowing border */
.demos .demo:focus {
    outline: none;
    border-color: #fff;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.25);
}
.demos .demo:focus img {
    opacity: var(--mb-row-fade-active);
}

/* the song you clicked: play button turns into 3 bouncing equalizer bars */
.demos .demo:focus .demo-play {
    border-color: transparent;
    box-shadow: none;
    background: linear-gradient(#fff, #fff) center calc(100% - 3px) / 3px 60% no-repeat;   /* middle bar */
    animation: mb-eq-mid 0.9s ease-in-out infinite alternate;
}
.demos .demo:focus .demo-play::before,
.demos .demo:focus .demo-play::after {   /* left and right bars */
    content: "";
    position: absolute;
    top: auto;
    bottom: 3px;
    transform: none;
    border: 0;
    width: 3px;
    height: 60%;
    background: #fff;
    box-shadow: 0 0 3px var(--mb-glow);
    animation: mb-eq-side 0.7s ease-in-out infinite alternate;
}
.demos .demo:focus .demo-play::before { left: 3px; }
.demos .demo:focus .demo-play::after  { right: 3px; left: auto; animation-delay: -0.35s; }

@keyframes mb-eq-mid  { from { background-size: 3px 20%; } to { background-size: 3px 85%; } }
@keyframes mb-eq-side { from { height: 25%; } to { height: 80%; } }

/* phones: let the free space grow to fit */
@media (max-width: 768px) { .free-space { height: auto; } }

</style>