same old winter Digi

var audio = document.getElementById("myaudio");
  audio.volume = 0.1;

<style>

@font-face{
 src: url(https://u4556289.dl.dropboxusercontent.com/s/d9ihnqs25298288/somepx.ttf?dl=0);
 font-family: 'bodyfont';
}

*{cursor: url(https://puu.sh/ChorX/938ade60e6.png), default !important;}
*{cursor: url(https://puu.sh/ChorX/938ade60e6.png), default !important;}
* { cursor:url(https://img.icons8.com/dusk/20/000000/cursor.png), default !important;
}


#whole{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-image:url(https://www.transparenttextures.com/patterns/asfalt-light.png);
background-color: #4a608f;
-webkit-transition: all 2s 4s;
transition: all 2s 4s;}

#StartXmas:checked ~ #whole{
background-image:url(https://www.transparenttextures.com/patterns/3px-tile.png);
background-color: #281281;}

#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;
background-image:url(https://www.uxfree.com/wp-content/uploads/2016/08/large-winter-snowflakes-motion-background-4k.jpg);
background-size: cover;
background-repeat: no-repeat;}

#digicenter{
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background-image:url(https://puu.sh/ERbkE/a76e84386b.png);
background-size: auto 90%;
background-position: bottom right;
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://u4556289.dl.dropboxusercontent.com/s/ug8w89tqdlm03yj/Liva.ttf?dl=0);}

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

/*
 -webkit-text-fill-color: transparent;
 -webkit-background-clip: text;
 background-image:url(https://media.giphy.com/media/LvlEOYGcZueNa/giphy.gif);
 background-size: cover;
*/

}

#ChristmasTitle:hover{
cursor: default;}

#ChristmasTitle b{
-webkit-transition: all .5s;
transition: all .5s;}

#ChristmasTitle:hover b,
#StartXmas:checked ~ #whole #ChristmasTitle b{
color: #80dffa;}

#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;
-webkit-transition: all 1s 4.5s;
transition: all 1s 4.5s;
}

#StartXmas:checked ~ #whole #totaltitle{
color: silver;
    text-shadow: 0px 0px 7px #94c7db;
}

#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: 1%;
bottom: 1px;
left: 1px;
opacity: 0;
position: fixed;

}

@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;}
}

#dropbar{
position: absolute;
    top: 116px;
    left: 48px;
    height: 5px;
    width: 322px;
border-radius: 3px;
background: #97f6ff;
opacity: 0;
-webkit-transition: all 1s;
transition: all 1s;}

#dropbar.b2{
top: 133px;
width: 272px;
background: #c0f9ff;
-webkit-transition: all 1s .5s;
transition: all 1s .5s;
}

#contentbar{
position: absolute;
top: 152px;
width: 222px;
height: 5px;
left: 48px;
border-radius: 3px;
background: white;
-webkit-transition: all 1s 1s, height 2s 1.5s, border-radius 1s 1.5s, box-shadow .5s 3.5s;
transition: all 1s 1s, height 2s 1.5s, border-radius 1s 1.5s, box-shadow .5s 3.5s;
opacity: 0;
overflow: auto;
color: transparent;
line-height: 17px;}

#StartXmas:checked ~ #whole #ChristmasTitle{
z-index: 0;
}

#StartXmas:checked ~ #whole #dropbar,
#StartXmas:checked ~ #whole #dropbar.b2{
opacity: 1;}

#StartXmas:checked ~ #whole #contentbar{
opacity: 1;
height: 400px;
border-radius: 2px;
box-shadow: 4px 4px 2px 2px silver;
background-color: #eaedf3;
left: 50px;
color: #3e2faf;
font-family: 'bodyfont', Times;
    font-size: 24px;
    letter-spacing: -0.8px;
box-sizing: border-box;
padding: 10px;
overflow: hidden;
z-index: 20;}

#contentbar i{
font-style: normal;
margin-left: 20px;}

#contentbar i.b3{
margin-left: 50px;}

</style>

<input type="checkbox" name="Xmass" id="StartXmas">

<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>
<label id="ChristmasTitle" onclick="document.getElementById('myaudio').play()" for="StartXmas">
<b>I</b>T'S <b>S</b>TILL <b>W</b>INTER <b>!</b>
</label>
<div id="musicbox">
<audio id="myaudio2" controls src="https://puu.sh/ChmIk/b6fcb9b812.mp3" />
<audio id="myaudio" src="https://puu.sh/ERbG3/29d253f324.mp3" loop />
</div>

<div id="dropbar"></div>
<div id="dropbar" class="b2"></div>
<div id="contentbar">
alias.<br>
<i>DiGiTAL.</i><br><br>
eyes.<br>
<i>blue + hexagonal pupils.</i><br><br>
hair and fur.<br>
<i>blonde + blue.</i><br><br>
height.<br>
<i>five'nine".</i><br><br>
age (physical approx.)<br>
<i>mid 20's.</i><br><br>
shrgn.<br>
<a target="_blank" href="http://roleplay.chat/profile.php?user=Tashyra" target="_blank"><i>TaShyRA</i></a>.<br><br>

<u>OOC</u> - <br>
<i class="b3">Mostly tired.</i><br>
<i class="b3">Taken OOC.</i><br>
<i class="b3">Rarely RPs.</i>
</div>

</div>
</div>

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

</div>