Digi Xmas

<style>

@font-face{
 src: url(https://dl.dropboxusercontent.com/u/4556289/somepx.ttf);
 font-family: 'bodyfont';
}

#whole{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-image:url(https://puu.sh/sYokJ/101b176d6c.jpg);
background-repeat: no-repeat;
background-size: 150% auto;
background-position: top center;
background-color: #4a608f;}

#digicover{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
height: 600px;
width: 1000px;
overflow: hidden;
box-shadow: 3px 4px 7px white;}

#digicenter{
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background-image:url(https://puu.sh/sYoBO/9f30f34666.png);
background-size: 100% auto;
background-position: right center;
background-repeat: no-repeat;
box-sizing: border-box;}

#blurdiv, #blurdiv2, #blurdiv3, #blurdiv4{
position: absolute;
filter:blur(7px);
background: #adf1fc;}

#blurdiv{
top: -10px;
height: 20px;
left: 0px;
right: 0px;}

#blurdiv2{
left: -10px;
top: -10px;
bottom:-10px;
width: 20px;}

#blurdiv3{
right: -10px;
top: -10px;
bottom: -10px;
width: 20px;
}

#blurdiv4{
bottom: -10px;
left: -10px;
right: -10px;
height: 20px;}

#XmasLayer{position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
background-image:url(http://i.picpar.com/y2Db.gif);
 background-repeat: repeat;
background-size: 30% auto;
z-index:2;
filter:blur(3px);
opacity: .7;
}

#XmasLayer2{position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
background-image:url(http://i.picpar.com/y2Db.gif);
 background-repeat: repeat;
background-size: 10% auto;
z-index: 0;
filter:blur(1px);
opacity: .5;
}

@font-face{
font-family:'Xmasfont';
src:url(https://dl.dropboxusercontent.com/u/4556289/Liva.ttf);}

#ChristmasTitle{
position: absolute;
    top: 50px;
    left: 50px;
    height: 100px;
    width: 500px;
    font-size: 40px;
    font-family: 'Xmasfont', Times, Arial;
    font-style: italic;
    color: white;
    text-shadow: 0px 0px 11px #577ca5;
}

#totaltitle{
 position: absolute;
 font-size: 60pt;
 height: 82px;
 width: 201px;
 border: 0px solid black;
 bottom: 2%;
right: 2%;
 color: #013F63;
 font-style: italic;
font-family:'bodyfont', 'Times';
zoom: 150%;
overflow: hidden;
 z-index: 6;
text-shadow: 0px 0px 7px white;
}

#musicbox{
    position: absolute;
    top: 99px;
    left: 48px;
    width: 393px;
    height: 4px;
-webkit-animation: blinker 6s infinite linear;
animation: blinker 6s infinite linear;
z-index: 5;
overflow: hidden;
border-radius: 3px;
}

#musicbox audio{
zoom: 2000%;
margin-top: -10px;
margin-left: -3px;
opacity: 0;
}

@keyframes blinker{
0%{box-shadow: 0px 0px 7px transparent;
background: #9de0ee;}
50%{box-shadow: 0px 0px 7px white;
    background: #20669a;}
100%{box-shadow: 0px 0px 7px transparent;
background: #9de0ee;}
}

@-webkit-keyframes blinker{
0%{box-shadow: 0px 0px 7px transparent;
background: #9de0ee;}
50%{box-shadow: 0px 0px 7px white;
    background: #20669a;}
100%{box-shadow: 0px 0px 7px transparent;
background: #9de0ee;}
}


</style>

<div id="whole">
<div id="XmasLayer2" style="opacity: .1;">
</div>
<div id="digicover">
<div id="digicenter">
<div id="blurdiv">
</div>
<div id="blurdiv2">
</div>
<div id="blurdiv3">
</div>
<div id="blurdiv4">
</div>
<div id="XmasLayer2">
</div>
<div id="XmasLayer">
</div>
<div id="ChristmasTitle">
MERRY CHRISTMAS!
</div>
<div id="musicbox">
<audio controls src="https://puu.sh/sYriz/d619a961c9.mp3" />
</div>
</div>
</div>

 <div id="totaltitle">
 <u>D</u>i<u>G</u>i<u>TAL</u>
 </div>

</div>