From 68d265c28bb1d2755b63e897d05e576fe8eb941a Mon Sep 17 00:00:00 2001
From: HT <glenthemes.exe@gmail.com>
Date: Fri, 22 Jul 2022 04:31:35 +0100
Subject: [PATCH] =?UTF-8?q?=E2=82=8A=E2=81=BA=E2=9C=BF=CB=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 music-pages/02-Melodic-Wish | 979 ++++++++++++++++++++++++++++++++++++
 1 file changed, 979 insertions(+)
 create mode 100644 music-pages/02-Melodic-Wish
diff --git a/music-pages/02-Melodic-Wish b/music-pages/02-Melodic-Wish
new file mode 100644
index 0000000..e76f11c
--- /dev/null
+++ b/music-pages/02-Melodic-Wish
@@ -0,0 +1,979 @@
+<!-----------------------------------------------------------------------
+Music Page [02]: Melodic Wish
+Made by glenthemes
+
+Initial release: 2019/05/03
+Revamp date: 2022/03/25
+Last updated: 2022/03/25
+
+TERMS OF USE:
+1) Do not remove the credit.
+2) Do not repost/redistribute.
+3) Do not take parts of the code and use them as your own.
+4) Do not use my works as a base code.
+5) Do not mix my works together.
+
+HOW TO USE:
+https://docs.google.com/presentation/d/1VPynhrrjrrgED_WfqKW4BK0QD8O96lYJB_NV82Wq_QE/edit?usp=sharing
+
+CREDITS:
+(ﾉ´ヮ´)ﾉ*:･ﾟ✧ ~ glencredits.tumblr.com/melodic-wish
+------------------------------------------------------------------------>
+
+<!DOCTYPE>
+<html>
+
+<head>
+
+<title>{Title}</title>
+
+<link rel="shortcut icon" href="{Favicon}">
+
+<meta name="viewport" content="width=device-width, initial-scale=1">
+
+<!------- JQUERY ------->
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
+
+<!------- FONTS ------->
+<link href="https://fonts.googleapis.com/css?family=Philosopher|Work+Sans|Quicksand:500|Rubik:300,400|Newsreader" rel="stylesheet">
+
+<link rel="preload" href="//glen-assets.github.io/fonts/Ra-Mono.otf" as="font" type="font/otf" crossorigin>
+
+<!------- ICON LIBRARIES ------->
+<script src="https://static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script>
+
+<script src="https://unpkg.com/phosphor-icons"></script>
+
+<!------- ESSENTIALS ------->
+<script src="//static.tumblr.com/snld4jp/adOr5n1p5/malihu-tooltips.js"></script>
+
+<link href="https://glenthemes.s3.eu-west-2.amazonaws.com/music-pages/02/mwish.css" rel="stylesheet">
+
+<script src="https://glenthemes.s3.eu-west-2.amazonaws.com/music-pages/02/mwish.js"></script>
+
+<!-------------------------------------------------------------------->
+
+<style type="text/css">
+
+@font-face { font-family: "ra mono"; src: url("//glen-assets.github.io/fonts/Ra-Mono.otf"); }
+
+/*----- TOOLTIPS -----*/
+#s-m-t-tooltip {
+    padding:5px 10px;
+    margin:20px;
+    background-color:var(--Tooltips-BG);
+    border-radius:2px;
+    font-family:var(--Tooltips-Font);
+    font-size:var(--Tooltips-Text-Size);
+    letter-spacing:0.06em;
+    text-transform:uppercase;
+    color:var(--Tooltips-Text);
+    z-index:99;
+    max-width:40vw;
+}
+
+/*----- TUMBLR CONTROLS -----*/
+iframe#tumblr_controls, .iframe-controls--desktop {
+    top:calc(var(--Screen-Padding) - (8px * var(--TumblrControls-Resize-Factor)))!important;
+    right:calc(var(--Screen-Padding) - (15px * var(--TumblrControls-Resize-Factor)))!important;
+    position:fixed!important;
+    
+    --TumblrControls-Resize-Factor:0.69;
+    transform:scale(var(--TumblrControls-Resize-Factor),var(--TumblrControls-Resize-Factor));
+    
+    transform-origin:100% 0;
+    opacity:calc(100% - var(--TumblrControls-Transparency));
+    z-index:999999!important;
+}
+
+[tumblr-controls="black"] #iframe_tumblr_controls,
+[tumblr-controls="black"] .iframe-controls--desktop {
+    filter:invert(100%) hue-rotate(180deg)!important;
+    -webkit-filter:invert(100%) hue-rotate(180deg)!important;
+}
+
+/*----- TEXT HIGHLIGHT -----*/
+::selection {
+    background:var(--Highlighted-Text-BG);
+    color:var(--Highlighted-Text-Color);
+}
+
+::-moz-selection {
+    background:var(--Highlighted-Text-BG);
+    color:var(--Highlighted-Text-Color);
+}
+
+/*----- BASICS -----*/
+html, body {overflow:hidden;}
+
+body {
+    /* ignore this */
+    
+    opacity:0;
+    transition:opacity 0.420s ease-in-out;
+    text-align:left;
+}
+
+
+
+/*----- CUSTOMIZATION OPTIONS -----*/
+
+body {
+    background-color:#222;
+    
+    background-image:url("");
+    background-attachment:fixed;
+    background-repeat:repeat;
+}
+
+:root {
+    
+    /*--- GENERAL SETTINGS ---*/
+    --Show-Guide-Message:yes;
+    
+    --Screen-Padding:45px;
+    --Screen-Left-Width:50%;
+    --Screen-Right-Width:50%;
+    --Screen-Center-Gap:69px;
+    
+    /*--- TOP LEFT INTRO ---*/
+    --Back-Icon-Size:20px;
+    --Back-Icon-Color:#ccc;
+    --Back-Icon-Right-Gap:13px;
+    
+    --Headphones-Icon-Size:30px;
+    --Headphones-Icon-Color:#ccc;
+    --Headphones-Icon-Right-Gap:17px;
+    
+    --Intro-Title-Font:"philosopher";
+    --Intro-Title-Color:#ccc;
+    --Intro-Title-Size:15px;
+    
+    --Intro-Subtitle-Font:"quicksand";
+    --Intro-Subtitle-Color:#aaa;
+    --Intro-Subtitle-Size:9px;
+    
+    --Intro-Text-Spacing:2px;
+    
+    /*--- SHUFFLE BUTTON SETTINGS ---*/
+    --Shuffle-Icon-Size:15px;
+    --Shuffle-Icon-Color:#bbb;
+    --Shuffle-Icon-Right-Gap:6px;
+    --Shuffle-Text-Font:"rubik";
+    --Shuffle-Text-Size:10px;
+    --Shuffle-Text-Color:#ccc;
+    
+    --Shuffle-CLICKED-Icon-Color:#ccbba8;
+    --Shuffle-CLICKED-Text-Color:#ccbba8;
+    
+    /*--- PLAY-ALL BUTTON SETTINGS ---*/
+    --PlayAll-Icon-Size:15px;
+    --PlayAll-Icon-Color:#bbb;
+    --PlayAll-Icon-Right-Gap:6px;
+    --PlayAll-Text-Font:"rubik";
+    --PlayAll-Text-Size:10px;
+    --PlayAll-Text-Color:#ccc;
+    
+    --PlayAll-CLICKED-Icon-Color:#ccbba8;
+    --PlayAll-CLICKED-Text-Color:#ccbba8;
+    
+    --Playlist-Buttons-Spacing:18px;
+    
+    --Intro-Bottom-Gap:40px;
+    
+    /*--- PLAYLIST SETTINGS ---*/
+    --Playlist-FadeIn:yes;
+    --Playlist-FadeIn-Gap-Amount:22px;
+    --Playlist-FadeIn-Speed:420ms; /* ms only */
+    --Playlist-FadeIn-Step-Delay:50ms; /* ms only */
+    
+    --Song-Row-Padding:16px;
+    --Song-Row-Corner-Roundness:2px;
+    
+    --Music-Buttons-Size:12px;
+    --Music-Buttons-Style:"filled"; /* can be "filled" or "hollow" */
+    --Music-Buttons-Color:#ccc;
+    --Music-Buttons-Right-Gap:13px;
+    
+    --Song-Name-Font:"work sans";
+    --Song-Name-Text-Size:12px;
+    --Song-Name-Text-Color:#ccc;
+    
+    --Song-Duration-Font:"ra mono";
+    --Song-Duration-Text-Size:11px;
+    --Song-Duration-Text-Color:#ccc;
+    --Song-Duration-Colon-Spacing:-0.5px;
+    
+    --Song-HOVER-Background:#333;
+    --Song-HOVER-Buttons-Color:#eee;
+    --Song-HOVER-Name-Color:#eee;
+    --Song-HOVER-Duration-Color:#eee;
+    --Song-HOVER-Speed:269ms;
+    
+    --Song-CLICKED-Background:transparent;
+    --Song-CLICKED-Buttons-Color:#ccbba8;
+    --Song-CLICKED-Name-Color:#ccbba8;
+    --Song-CLICKED-Duration-Color:#ccbba8;
+    --Song-CLICKED-Speed:400ms;
+    
+    /*--- AUTOPLAY OPTIONS ---*/
+    --Autoplay-First-Song:no;
+    --Autoplay-Next-Song:yes;
+    --Loop-Playlist:yes;
+    
+    /*--- SCROLLBAR SETTINGS ---*/
+    --Scrollbar-Left-Gap:8px;
+    --Scrollbar-Thumb:#989395;
+    --Scrollbar-Track:#393738;
+    --Scrollbar-Background:#222;
+    --Scrollbar-Width:13px;
+    
+    /*--- SIDEBAR IMAGE SETTINGS ---*/
+    --Sidebar-Image-Width:220px;
+    --Sidebar-Image-Corner-Roundness:3px;
+    --Sidebar-Image-Shadow:#252525;
+    --Sidebar-Image-Bottom-Gap:30px;
+    
+    /*--- VINYL SETTINGS ---*/
+    --Vinyl-Left-Gap:50%;
+    --Vinyl-Size:90%;
+    
+    --Vinyl-Load-In-Speed:1.1s;
+    --Vinyl-Spin-Speed:2s;
+    
+    /*--- SIDEBAR TEXT SETTINGS ---*/
+    --Sidebar-Text-Width:220px;
+    --Sidebar-Text-Spacing:7px;
+    
+    --Artist-Name-Font:"work sans";
+    --Artist-Name-Size:13px;
+    --Artist-Name-Color:#d7d2cf;
+    
+    --Album-Name-Font:"quicksand";
+    --Album-Name-Size:11px;
+    --Album-Name-Color:#aaa;
+    
+    --Sidebar-Divider-Spacing:25px;
+    --Sidebar-Divider-Width:150px;
+    --Sidebar-Divider-Thickness:2px;
+    --Sidebar-Divider-Color:#b4af9a;
+    --Sidebar-Divider-Roundness:4px;
+    
+    --Divider-QuoteMark-Font:"newsreader";
+    --Divider-QuoteMark-Size:45px;
+    --Divider-QuoteMark-Color:#ccc;
+    --Divider-QuoteMark-Gap-Top:4px;
+    --Divider-QuoteMark-Gap-Right:17px;
+    
+    --Description-Font:"work sans";
+    --Description-Text-Size:12.5px;
+    --Description-Text-Color:#bbb;
+    --Description-Italic:#b2b69a;
+    --Description-Bold:#c5b8a3;
+    --Description-Links:#a5b089;
+    --Description-Links-Underline:#555;
+    --Description-LineHeight:200%;
+    
+    /*--- NAVBAR SETTINGS ---*/
+    --Navbar-Width:80%;
+    --Navbar-Background:#323232;
+    --Navbar-Padding:15px;
+    --Navbar-Corner-Roundness:2px;
+    --Navbar-Box-Shadow:#181818;
+    
+    --Navbar-Stripe-1-Width:6px;
+    --Navbar-Stripe-1-Color:#b4af9a;
+    
+    --Navbar-Stripe-Spacing:4px;
+    
+    --Navbar-Stripe-2-Width:1px;
+    --Navbar-Stripe-2-Color:#b4af9a;
+    
+    --Navbar-Title-Font:"philosopher";
+    --Navbar-Title-Size:12px;
+    --Navbar-Title-Color:#d7d2cf;
+    
+    --Navbar-Links-Font:"work sans";
+    --Navbar-Links-Size:10px;
+    --Navbar-Links-Color:#cfc4bd;
+    
+    --Navbar-Links-Divider:"✧";
+    --Navbar-Links-Divider-Size:11px;
+    --Navbar-Links-Divider-Color:#ccc;
+    --Navbar-Links-Divider-Spacing:14px;
+    
+    /*--- TOOLTIPS ---*/
+    --Tooltips-BG:#333;
+    --Tooltips-Font:"work sans";
+    --Tooltips-Text-Size:9px;
+    --Tooltips-Text:#ccc;
+    
+    /*--- TEXT HIGHLIGHT ---*/
+    --Highlighted-Text-BG:#4f4b41;
+    --Highlighted-Text-Color:inherit;
+    
+    /*--- TUMBLR CONTROLS ---*/
+    --TumblrControls-Color:white;
+    --TumblrControls-Transparency:30%; /* % only */
+    
+    /*--- CREDIT SETTINGS ---*/
+    --Credit-Corner-Gap:13px;
+    --Credit-Area-Size:16px;
+    --Credit-Dots-Size:4px;
+    --Credit-Dots-Color:#908c7b;
+    
+    /* end root // end :root */
+}
+
+/* what you see in customize page view */
+/* you can edit or remove this as you like */
+[customize-page="true"]:root {
+    --Screen-Padding:5vw;
+    --Screen-Center-Gap:5vw;
+}
+
+/*----- CONTAINER STUFF -----*/
+[maincont]{
+    position:absolute;
+    top:0;margin-top:var(--Screen-Padding);
+    left:0;margin-left:var(--Screen-Padding);
+    width:calc(100vw - (var(--Screen-Padding) * 2));
+    height:calc(100vh - (var(--Screen-Padding) * 2));
+}
+
+[leftstuff]{
+    position:absolute;
+    width:calc(var(--Screen-Left-Width) - (var(--Screen-Center-Gap) / 2));
+    height:100%;
+    display:flex;
+    flex-direction:column;
+}
+
+[rightstuff]{
+    position:absolute;
+    right:0;
+    width:calc(var(--Screen-Right-Width) - (var(--Screen-Center-Gap) / 2));
+    height:100%;
+}
+
+/*----- TOP LEFT INTRO -----*/
+[intro]{
+    display:flex;
+    align-items:center;
+    margin-bottom:var(--Intro-Bottom-Gap);
+}
+
+[back-to-blog]{
+    display:block;
+    --Back-Icon-Padding:5px;
+}
+
+[back-to-blog] svg {
+    width:var(--Back-Icon-Size);
+    height:var(--Back-Icon-Size);
+    color:var(--Back-Icon-Color);
+}
+
+[intro] > svg, [back-to-blog] + svg {
+    margin-right:var(--Headphones-Icon-Right-Gap);
+    width:var(--Headphones-Icon-Size);
+    height:var(--Headphones-Icon-Size);
+    color:var(--Headphones-Icon-Color);
+}
+
+[intro] span {
+    display:block;
+}
+
+[intro-title]{
+    font-family:var(--Intro-Title-Font);
+    font-size:var(--Intro-Title-Size);
+    color:var(--Intro-Title-Color);
+    letter-spacing:0.03em;
+    line-height:var(--Intro-Title-Line-Height);
+}
+
+[intro-subtitle]{
+    font-family:var(--Intro-Subtitle-Font);
+    font-size:var(--Intro-Subtitle-Size);
+    text-transform:uppercase;
+    color:var(--Intro-Subtitle-Color);
+    letter-spacing:0.1420em;
+    line-height:var(--Intro-Subtitle-Line-Height);
+}
+
+[intro-title] + [intro-subtitle]{
+    margin-top:var(--Intro-Text-Spacing);
+}
+
+/*------ PLAYLIST BUTTONS (TOP) ------*/
+[playlist-buttons] {
+    margin-right:var(--Song-Row-Padding);
+}
+
+[playlist-buttons], [playlist-buttons] > * {
+    display:flex!important;
+    align-items:center;
+    cursor:pointer;
+}
+
+[playlist-buttons] > * + * {
+    margin-left:var(--Playlist-Buttons-Spacing);
+}
+
+/*------ SHUFFLE BUTTON ------*/
+[shuffle-button] .ph {
+    margin-right:var(--Shuffle-Icon-Right-Gap);
+    font-size:var(--Shuffle-Icon-Size);
+    color:var(--Shuffle-Icon-Color);
+}
+
+[shuffle-button] [text]{
+    font-family:var(--Shuffle-Text-Font);
+    text-transform:uppercase;
+    font-size:var(--Shuffle-Text-Size);
+    letter-spacing:0.069em;
+    color:var(--Shuffle-Text-Color);
+}
+
+[shuffle-button]:active .ph {
+    color:var(--Shuffle-CLICKED-Icon-Color);
+}
+
+[shuffle-button]:active [text]{
+    color:var(--Shuffle-CLICKED-Text-Color);
+}
+
+/*------ PLAY-ALL BUTTON ------*/
+[play-all-button] .ph {
+    margin-right:var(--PlayAll-Icon-Right-Gap);
+    font-size:var(--PlayAll-Icon-Size);
+    color:var(--PlayAll-Icon-Color);
+}
+
+[play-all-button] [text]{
+    font-family:var(--PlayAll-Text-Font);
+    text-transform:uppercase;
+    font-size:var(--PlayAll-Text-Size);
+    letter-spacing:0.069em;
+    color:var(--PlayAll-Text-Color);
+}
+
+[play-all-button]:active .ph {
+    color:var(--PlayAll-CLICKED-Icon-Color);
+}
+
+[play-all-button]:active [text]{
+    color:var(--PlayAll-CLICKED-Text-Color);
+}
+
+@media(max-width:800px){
+    [playlist-buttons] .ph {
+        margin-right:0;
+    }
+    
+    [playlist-buttons] [text]{
+       display:none;
+    }
+}
+
+/*----- PLAYLIST MAIN -----*/
+[playlist-main]{
+    position:relative;
+    height:100%;
+    margin-left:calc(0px - var(--Song-Row-Padding));
+    margin-right:calc(0px - var(--Scrollbar-Left-Gap));
+    min-height:0;
+    overflow:auto;
+    padding-right:var(--Scrollbar-Left-Gap);
+}
+
+::-webkit-scrollbar {
+    width:var(--Scrollbar-Width);
+    height:var(--Scrollbar-Width);
+    background-color:var(--Scrollbar-Background);
+}
+
+::-webkit-scrollbar-thumb {
+    border:calc((var(--Scrollbar-Width) - 1px) / 2) solid var(--Scrollbar-Background);
+    background-color:var(--Scrollbar-Thumb);
+}
+
+::-webkit-scrollbar-track {
+    border:calc((var(--Scrollbar-Width) - 1px) / 2) solid var(--Scrollbar-Background);
+    background-color:var(--Scrollbar-Track);
+}
+
+::-webkit-scrollbar-corner {
+    background:var(--Scrollbar-Background);
+}
+
+[song-row]{
+    display:flex;
+    align-items:center;
+    justify-content:space-between;
+    padding:var(--Song-Row-Padding) calc(var(--Song-Row-Padding) + 2px);
+    border-radius:var(--Song-Row-Corner-Roundness);
+    transition:background-color var(--Song-HOVER-Speed) ease-in-out;
+}
+
+/*---------------*/
+
+[playlist-main][fadein="yes"] [song-row]{
+    opacity:0;
+    animation:fadeIn ease-in;
+    animation-fill-mode:forwards;
+    animation-duration:var(--Playlist-FadeIn-Speed);
+}
+
+@keyframes fadeIn {
+    from {
+        opacity:0;
+        margin-top:var(--Playlist-FadeIn-Gap-Amount);
+    }
+    
+    to {
+        opacity:1;
+        margin-top:0px;
+    }
+}
+
+/*----- SONGS -----*/
+[song-row] * {
+    cursor:default;
+}
+
+[bootons]{
+    position:relative;
+    margin-right:var(--Music-Buttons-Right-Gap);
+    width:var(--Music-Buttons-Size);
+    height:var(--Music-Buttons-Size);
+}
+
+[bootons] .ph {
+    position:absolute;
+    top:0;left:0;
+    font-size:var(--Music-Buttons-Size);
+    color:var(--Music-Buttons-Color);
+    transition:color var(--Song-HOVER-Speed) ease-in-out, opacity 0s ease-in-out;
+}
+
+.xpause {opacity:0;}
+
+[song-name]{
+    font-family:var(--Song-Name-Font);
+    font-size:var(--Song-Name-Text-Size);
+    color:var(--Song-Name-Text-Color);
+    transition:color var(--Song-HOVER-Speed) ease-in-out;
+}
+
+[song-duration]{
+    padding-left:10px;
+    font-family:var(--Song-Duration-Font);
+    font-size:var(--Song-Duration-Text-Size);
+    color:var(--Song-Duration-Text-Color);
+    letter-spacing:0.08em;
+}
+
+[song-duration] [colon]{
+    margin:0 var(--Song-Duration-Colon-Spacing);
+}
+
+/*----- SONGS: hover -----*/
+[song-row]:hover {
+    background:var(--Song-HOVER-Background);
+}
+
+[song-row]:hover .ph {
+    color:var(--Song-HOVER-Buttons-Color);
+}
+
+[song-row]:hover [song-name]{
+    color:var(--Song-HOVER-Name-Color);
+}
+
+/*----- SONGS: clicked -----*/
+.song-clickt {
+    background:var(--Song-CLICKED-Background)!important;
+    transition:background-color var(--Song-CLICKED-Speed) ease-in-out!important;
+}
+
+.song-clickt .ph {
+    color:var(--Song-CLICKED-Buttons-Color)!important;
+    transition:color var(--Song-CLICKED-Speed) ease-in-out!important;
+}
+
+.song-clickt [song-name]{
+    color:var(--Song-CLICKED-Name-Color)!important;
+    transition:color var(--Song-CLICKED-Speed) ease-in-out!important;
+}
+
+.song-clickt [song-duration]{
+    color:var(--Song-CLICKED-Duration-Color)!important;
+    transition:color var(--Song-CLICKED-Speed) ease-in-out!important;
+}
+
+/*-------- ALBUM COVER & VINYL --------*/
+[main-page="true"] [lhcwt] > *:first-child {
+    margin-top:24px;
+}
+
+[sidebar-image]{
+    position:relative;
+    width:var(--Sidebar-Image-Width);
+    margin-left:calc((100% - var(--Sidebar-Image-Width)) / 2);
+    z-index:3;
+}
+
+[sidebar-image] img {
+    border-radius:var(--Sidebar-Image-Corner-Roundness);
+    box-shadow:-0.7vw 1vw 4vw var(--Sidebar-Image-Shadow);
+}
+
+[sidebar-image] img[src*="66.media.tumblr.com/826ccd0082a8512bc6638d0f560cabd3/tumblr_pquw89YkQ31qg2f5co1_r1_1280.png"]{
+    filter:brightness(87%) contrast(122%) hue-rotate(13deg);
+}
+
+[vinyl-img]{
+    position:absolute;
+    top:0;left:0;
+    margin-top:calc((100% - var(--Vinyl-Size)) / 2);
+    width:var(--Vinyl-Size);
+    transform-origin:center;
+    border-radius:0!important;
+    box-shadow:none!important;
+    filter:brightness(120%) contrast(110%);
+    z-index:-1;
+}
+
+.rollin {
+    animation:theyseemerollin ease-in;
+    animation-fill-mode:forwards;
+    animation-duration:var(--Vinyl-Load-In-Speed);
+    animation-timing-function:cubic-bezier(0.6, 0, 0.2, 1.69);
+}
+
+@keyframes theyseemerollin {
+    from {
+        margin-left:0px;
+        transform:rotate(0deg);
+        
+    }
+    
+    to {
+        margin-left:var(--Vinyl-Left-Gap);
+        transform:rotate(45deg);
+        
+    }
+}
+
+.vinplayin {
+    animation:haha var(--Vinyl-Spin-Speed) infinite;
+    animation-timing-function:linear;
+}
+
+@keyframes haha {
+    from {
+        margin-left:var(--Vinyl-Left-Gap);
+        transform:rotate(45deg);
+        
+    }
+    
+    to {
+        margin-left:var(--Vinyl-Left-Gap);
+        transform:rotate(405deg);
+        
+    }
+}
+
+.vinpaused {
+    animation-play-state:paused;
+}
+
+/*-------- SIDEBAR TEXT --------*/
+[sidebar-image] + *:not([navbar]){
+    margin-top:var(--Sidebar-Image-Bottom-Gap);
+}
+
+[artist-name], [album-name], [description]{
+    margin-left:calc((100% - var(--Sidebar-Text-Width)) / 2);
+    width:var(--Sidebar-Text-Width);
+    text-align:center;
+}
+
+[artist-name]{
+    font-family:var(--Artist-Name-Font);
+    font-size:var(--Artist-Name-Size);
+    color:var(--Artist-Name-Color);
+}
+
+[album-name]{
+    font-family:var(--Album-Name-Font);
+    font-size:var(--Album-Name-Size);
+    text-transform:uppercase;
+    letter-spacing:0.1em;
+    word-spacing:-0.05em;
+    color:var(--Album-Name-Color);
+}
+
+[artist-name] + [album-name]{
+    margin-top:var(--Sidebar-Text-Spacing);
+}
+
+[divider-line]{
+    position:relative;
+    margin:var(--Sidebar-Divider-Spacing) 0;
+    margin-left:calc((100% - var(--Sidebar-Divider-Width)) / 2);
+    width:var(--Sidebar-Divider-Width);
+    height:var(--Sidebar-Divider-Thickness);
+    background:var(--Sidebar-Divider-Color);
+    border-radius:var(--Sidebar-Divider-Roundness);
+}
+
+[divider-line][quote-mark="yes"]:before {
+    content:"“";
+    position:absolute;
+    top:0;margin-top:calc(0px - (var(--Divider-QuoteMark-Size) / 4) + var(--Divider-QuoteMark-Gap-Top));
+    right:0;margin-right:calc(100% + var(--Divider-QuoteMark-Gap-Right));
+    font-family:var(--Divider-QuoteMark-Font);
+    font-size:var(--Divider-QuoteMark-Size);
+    color:var(--Divider-QuoteMark-Color);
+    line-height:1em;
+}
+
+[description]{
+    font-family:var(--Description-Font);
+    font-size:var(--Description-Text-Size);
+    color:var(--Description-Text-Color);
+    line-height:var(--Description-LineHeight);
+}
+
+[description] b, [description] strong {
+    font-weight:normal;
+    -webkit-text-stroke-color:var(--Description-Bold);
+    -webkit-text-stroke-width:.5px;
+    letter-spacing:0.015em;
+}
+
+[description] i, [description] em {
+    color:var(--Description-Italic);
+}
+
+[description] a {
+    padding-bottom:1.5px;
+    border-bottom:1px solid var(--Description-Links-Underline);
+    color:var(--Description-Links);
+}
+
+[description] [glitch]{
+    font-family:sans-serif;
+    position:relative;
+    display:inline-block;
+    margin-left:1px;
+}
+
+[description] [glitch]:before {
+    content:"";
+    position:absolute;
+    top:50%;left:0;
+    transform:translateY(-50%);
+    width:110%;
+    margin-left:-5%;
+    height:1px;
+    background:linear-gradient(to right, transparent 0%, transparent 10%, var(--Description-Text-Color) 40%, var(--Description-Text-Color) 90%, transparent);
+    transform:rotate(-3deg);
+}
+
+/*----- CUSTOM LINKS BAR -----*/
+[navbar]{
+    position:absolute;
+    bottom:0;
+    left:0;margin-left:calc(((100% - var(--Navbar-Width)) / 2) + 5px);
+    
+    width:var(--Navbar-Width);
+    border-radius:var(--Navbar-Corner-Roundness);
+    overflow:hidden;
+    box-shadow:-0.7vw 1vw 1.5vw var(--Navbar-Box-Shadow);
+    z-index:4;
+}
+
+[navbar]:before {
+    content:"";
+    position:absolute;
+    top:0;left:0;
+    width:var(--Navbar-Stripe-1-Width);
+    height:100%;
+    background:var(--Navbar-Stripe-1-Color);
+}
+
+[navbar]:after {
+    content:"";
+    position:absolute;
+    top:0;left:0;
+    margin-left:var(--Navbar-Stripe-1-Width);
+    width:var(--Navbar-Stripe-2-Width);
+    height:100%;
+    background:var(--Navbar-Stripe-2-Color);
+    border-left:var(--Navbar-Stripe-Spacing) solid var(--Navbar-Background);
+}
+
+[lb-bg]{
+    margin-left:calc(var(--Navbar-Stripe-1-Width) + var(--Navbar-Stripe-Spacing) + var(--Navbar-Stripe-2-Width));
+    height:100%;
+    padding:calc(var(--Navbar-Padding) - var(--qugiw)) var(--Navbar-Padding);
+    background:var(--Navbar-Background);
+    display:flex;
+    align-items:center;
+    justify-content:space-between;
+    box-sizing:border-box;
+}
+
+[bar-title]{
+    font-family:var(--Navbar-Title-Font);
+    font-size:var(--Navbar-Title-Size);
+    letter-spacing:0.02em;
+    color:var(--Navbar-Title-Color);
+}
+
+[bar-title] + [some-links]{
+    margin-left:8px;
+}
+
+[some-links]{
+    display:flex;
+    align-items:center;
+    flex-wrap:wrap;
+    font-family:var(--Navbar-Links-Font);
+    font-size:var(--Navbar-Links-Size);
+    text-transform:uppercase;
+    letter-spacing:0.03em;
+    margin-right:calc(var(--Navbar-Links-Divider-Spacing) / -4);
+}
+
+[some-links] a {
+    display:block;
+    margin:0 calc(var(--Navbar-Links-Divider-Spacing) / 4);
+    flex-shrink:0;
+    color:var(--Navbar-Links-Color);
+}
+
+[some-links] [divider]{
+    margin:0 calc(var(--Navbar-Links-Divider-Spacing) / 4);
+    font-size:var(--Navbar-Links-Divider-Size);
+    color:var(--Navbar-Links-Divider-Color);
+}
+
+[some-links][align="right"]{
+    justify-content:flex-end;
+    text-align:right;
+}
+
+[some-links][align="center"]{
+    justify-content:center;
+    text-align:center;
+}
+
+[some-links][align="left"]{
+    justify-content:flex-start;
+    text-align:left;
+}
+
+/* end style */
+</style>
+
+</head>
+
+<body>
+
+<!-- CREDIT || PLEASE DO NOT REMOVE -->
+<a class="crdz" href="//glenthemes.tumblr.com" title="&#x2756; Melodic Wish &#x2756; by glenthemes"></a>
+
+<div maincont>
+    <div leftstuff>
+    
+        <!----- TOP LEFT INTRO ----->
+        <div intro>
+        
+            <a back-to-blog href="/" title="back to blog" icon-name="chevron-left"></a>
+            
+            <span icon-name="headphones"></span>
+            
+            <span intro-title> Melodic Wish </span>
+            <span intro-subtitle> favorite nier tracks </span>
+            
+            <span playlist-buttons>
+                <span shuffle-button>shuffle</span>
+                <span play-all-button>play all</span>
+            </span>
+        </div><!--end intro // don't delete-->
+        
+        
+        <!---------------------------------->
+        
+        
+        <!----- PLAYLIST / SONGS ----->
+        <!--
+              HOW TO ADD YOUR OWN MUSIC:
+              https://linktr.ee/direct_file_links
+        -->
+        <div playlist-main>
+        
+            <!---- START A NEW SONG ---->
+            <div song-row>
+                <span song-name>Alien Manifestation (Instrumental)</span>
+                <audio src="https://cdn.discordapp.com/attachments/902408500104286219/902408595449196554/Alien_Manifestation_Instrumental.mp3" volume="100%" ></audio>
+            </div><!--end a song // don't delete-->
+            
+            <!---- START A NEW SONG ---->
+            <div song-row>
+                <span song-name>Bipolar Nightmare</span>
+                <audio src="https://cdn.discordapp.com/attachments/900670626774265886/954998598007926824/Bipolar_Nightmare.mp3" volume="80%"></audio>
+            </div><!--end a song // don't delete-->
+            
+        </div><!--end playlist // don't delete-->
+    </div><!--end leftstuff // don't delete-->
+    
+    <!---------------------------------->
+    
+    <div rightstuff>
+        <!------ SIDEBAR IMAGE ------>
+        <div sidebar-image vinyl="yes">
+            <img src="https://66.media.tumblr.com/826ccd0082a8512bc6638d0f560cabd3/tumblr_pquw89YkQ31qg2f5co1_r1_1280.png">
+        </div>
+        
+        <!------ SIDEBAR TEXT ------>
+        <div artist-name>Keiichi Okabe</div>
+        <div album-name>NieR: Automata OST</div>
+        
+        <div divider-line quote-mark="yes"></div>
+        
+        <div description>
+            
+            Here is your description!
+            <b>bold</b>,
+            <i>italic</i>,
+            <a href="https://demo.tumblr.com">sample link</a>
+            
+        </div><!--end description // don't delete-->
+        
+        <!------ NAVBAR ------>
+        <div navbar>
+            <span bar-title>Please select an item.</span>
+            
+            <div some-links align="right">
+            
+                <a href="/">home</a>
+                <a href="/ask">message</a>
+                <a href="/archive">archive</a>
+                
+            </div><!--end links-->
+        </div><!--end navbar-->
+        
+    </div><!--end rightstuff-->
+</div><!--end maincont-->
+
+
+<script>feather.replace()</script>
+</body>
+
+</html>
\ No newline at end of file
