dewdrop

===========NAME===========
<style>
#bubble {
color:#f8d8e3;
font-family:Times;
font-size:40px;
font-weight:bold;

}

</style>

<span id="bubble">haruai</span>
<script type="text/javascript">
// <![CDATA[
var bgcolour="#f8d8e3"; // background colour
var fgcolour="#7888B9"; // foreground colour
var speedy=50; // speed of bubbling, lower is faster
var shades=12; // number of shades of bubble

/****************************
* Bubbling Text Effect *
*(c)2003-13 mf2fm web-design*
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
****************************/
var bubbcol=new Array();
var bubbshd;
var bubbler, bubbtxt;
var bubbchr=new Array();

function addLoadEvent(funky) {
var oldonload=window.onload;
if (typeof(oldonload)!='function') window.onload=funky;
else window.onload=function() {
if (oldonload) oldonload();
funky();
}
}

addLoadEvent(bubbagump);

function bubbagump() { if (document.getElementById) {
var i, fg, bg, col;
for (bubbler=0; bubbler<=shades; bubbler++) {
col="#";
for (i=1; i<6; i+=2) {
bg=parseInt(bgcolour.substring(i,i+2),16);
fg=parseInt(fgcolour.substring(i,i+2),16);
col+=dechex(bg+(fg-bg)*(bubbler/shades));
}
bubbcol[bubbler+1]=col;
if (bubbler==Math.floor(shades/2)) bubbshd=col;
}
bubbler=document.getElementById("bubble");
bubbtxt=bubbler.firstChild.nodeValue;
while (bubbler.childNodes.length) bubbler.removeChild(bubbler.childNodes[0]);
for (i=0; i<bubbtxt.length; i++) {
fg=document.createElement("span");
fg.setAttribute("id", "bubb"+i);
fg.style.textShadow=bubbshd+" 0px 0px 2px";
fg.appendChild(document.createTextNode(bubbtxt.charAt(i)));
bubbler.appendChild(fg);
}
bubbler=setInterval("bubbling()", speedy);
}}

function dechex(dec) {
dec=Math.floor(dec);
return ((dec<16)?'0':'')+dec.toString(16);
}

function bubbling() {
var i, bubby;
for (i=0; i<bubbtxt.length; i++) {
bubby=document.getElementById("bubb"+i);
if (bubbchr[i]) {
bubby.style.color=bubbcol[bubbchr[i]];
bubbchr[i]=(bubbchr[i]+1)%bubbcol.length;
}
else if (Math.random()<7.5/(shades*bubbtxt.length)) bubbchr[i]=1;
}
}
// ]]>
</script>



===========MUSIC PLAYER===========
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<link href="//fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">

<script src="https://static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script>

<!-------MUSIC PLAYER BY GLENTHEMES------->
<script src="//glenthemes.github.io/-music-/glenplayer06.js"></script>

<style>

/*-------MUSIC PLAYER BY GLENTHEMES-------*/
:root {
--Music-Player-Vinyl:#7888B9;
--Vinyl-Icon-Size:17px;
--Vinyl-Spin-Speed:3.5s;
--Music-Controls:#7888B9;
--Music-Controls-Size:12px;
--Music-Title-Font-Size:12px;
--Music-Title-Color:#7888B9;
}
.glenjams-06 {
display:none;
position:relative;
z-index:99;
}

.pasta {
display:flex;
align-items:center;
}

.vinyl-spin {
animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
-webkit-animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
-moz-animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
-o-animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
}

.vinyl-pause {
animation-play-state:paused;
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
}

@-webkit-keyframes recordspin {
from {
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
}
to {
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
}

@keyframes recordspin {
from {
-ms-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
}
to {
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
}

.vinyl, .vinyl svg {
width:var(--Vinyl-Icon-Size);
height:var(--Vinyl-Icon-Size);
background: #FFFFFF00;
}

.music-controls {
margin-left:10px;
margin-bottom:-2px;
width:var(--Music-Controls-Size);
overflow:hidden;
cursor: url(http://cur.cursors-4u.net/others/oth-6/oth589.cur), auto;
}

.music-controls svg {
width:var(--Music-Controls-Size);
height:var(--Music-Controls-Size);
color:var(--Music-Controls);
stroke-width:2px;
}

.pausee {display:none;}

.beff {display:none;}
.aff {display:block;}

.music-title {
margin-left:8px;
font-weight:bold;
font-size:var(--Music-Title-Font-Size);
color:var(--Music-Title-Color);
text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff, 0 0;
background: #FFFFFF00;
}
</style>

<body>
<!-------MUSIC PLAYER BY GLENTHEMES------->
<div class="glenjams-06">
<div class="pasta">
<div class="vinyl"></div>
<div class="music-controls">
<div class="playy"><i data-feather="play"></i></div>
<div class="pausee"><i data-feather="pause"></i></div>
</div>
<div class="music-title">トリノコシティ</div>

<audio id="audio" src="https://dl.dropbox.com/s/rjojs3xb8qf51oc/torinoko%20city.mp3" type="audio"></audio>
</div><!--pasta-->
</div><!--glenjams-06-->
<!----end music player---->

<script>feather.replace()</script>
</body>



===========STYLING===========
<style>

:root {
--accent: #7888B9;
}

::selection {
color: #fff;
background: var(--accent);
}

mark {
color: #fff;
background: var(--accent);
font-weight: bold;
padding: 0px 5px 0px;
border: 1px solid #000000;
border-radius: 3px;
}

#image01 {
border: var(--accent) double;
animation: pulse 1.5s linear infinite;
}

@-webkit-keyframes "pulse" {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}

</style>