VS#33 World is Mine

VS#33MNS: World is Mine

CSS

/* Last Update: 10/27/18*/

/* MUSICBOX CSS IMPORT - PLACE NOTHING ABOVE */
@import url("https://dl.dropboxusercontent.com/s/cvduve2pku4zf7l/musicbox.css?dl=0");

/* PAGE BACKGROUND AND FONTS */
body {
background:#ff1493 url(http://img15.deviantart.net/7477/i/2017/089/b/0/checkered_pink_black_squares_1920x1080_by_cera_nore-db442np.png) center fixed;
background-size:cover;
font-family:serif;
}
#title {
font-family:rochester,script,serif;
}

/* MAIN DISPLAY COLORS */
#mugshot, h1, .walkway {
box-shadow:5px 5px 20px 5px #444444;
text-shadow:1px 1px 4px #444444;
}
#musicbox, #title {
color:#ffd700;
text-shadow:0px 0px 8px #ffd700;
}
h1 {
background-color:#ffffff;
}
.walkway {
background-color:#b22222;
border-top:2.4vh ridge #eff0ed;
border-bottom:2.4vh ridge #eff0ed;
color:#eff0ed;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:8px;
height:8px;
background-color:#eff0ed;
}
::-webkit-scrollbar-thumb {
background-color:#999999;
}

/* CSS MEAT */
#mugshot, .list {
position:fixed;
}
#musicbox, h1, .walkway {
position:absolute;
}
#mugshot {
z-index:1;
top:2.5%;
left:0.5%;
height:95%;
}
#musicbox {
z-index:3;
left:1%;
bottom:3%;
}
#title {
z-index:2;
position:fixed;
bottom:3.5%;
left:1%;
height:18%;
font-size:7.5vh;
line-height:6vh;
white-space:nowrap;
}
#title div {
display:inline-block;
position:relative;
}
#title div:nth-child(2) {
top:6vh;
}
#title div:nth-child(3) {
top:12vh;
}
.list {
z-index:4;
height:20%;
width:57.5%;
}
#one {
top:10%;
left:35%;
}
#two {
top:40%;
left:40%;
}
#three {
top:70%;
left:37.5%;
}
.list h1 {
display:inline-block;
font-size:7.5vh;
padding:0 0.5%;
}
.walkway {
left:60px;
right:0%;
top:10%;
max-height:100%;
padding:1%;
overflow-y:auto;
}
.walkway img {
display:inline-block;
max-height:100%;
}
#credit {
position:fixed;
height:17px;
right:1%;
bottom:0%;
background-color:#ffffff;
border-radius:5px;
}

HTML

<link href="https://fonts.googleapis.com/css?family=Rochester" rel="stylesheet"/>

<img src="http://www.cosplaydeal.com/images/detailed/5/Vocaloid_Hatsune_Miku_World_is_Mine_Cosplay_Costume.jpg" alt="" id="mugshot"/>

<div id="title">
<div>
World
</div>
<div>
is
</div>
<div>
Mine
</div>
</div>

<div id="musicbox">
<div id="m-button"></div>
<audio controls controlsList="nodownload">
<source src="http://k003.kiwi6.com/hotlink/vn66kkedp6/World_Is_Mine.mp3" type="audio/mpeg">
</audio>
</div>

<div class="list" id="one">
<h1>1.</h1>
<div class="walkway">
<h2>You must notice when I change my hairstyle.</h2>
</div>
</div>

<div class="list" id="two">
<h1>2.</h1>
<div class="walkway">
<h2>Take a good look, all the way to my shoes.</h2>
</div>
</div>

<div class="list" id="three">
<h1>3.</h1>
<div class="walkway">
<h2>For every one word I say, reply with three.</h2>
</div>
</div>

<a href="https://tinyurl.com/midoriya" target="_blank" title="VS#33">
<img src="https://i.imgur.com/7XPiOlr.png" id="credit"/>
</a>