Happy Birthday!

(to you or your favorite character!)

And if it's a birthday then you'll need some balloons! Luckily I have some right here. Add this to the end of whatever html file you want the balloons on:

<div class="balloons" id="balloons1"></div>
<div class="confetti" id="balloons2"></div>
<script>
//change this to change the character's birthday.
//I.e. For a character born on December 25, change the date inside the '' marks to December 25
const birthday = new Date('Febuary 3');
//here's the logic, don't mess with it unless you know what you're doing
const date = new Date();window.onload = function(){if(birthday.getMonth == date.getMonth && birthday.getDate == date.getDate){document.getElementById("balloons1").style.opacity = 1;document.getElementById("balloons2").style.opacity = 1;}
</script>

Add these images somewhere on your site:

And add this to your <style> tags or css file:

.balloons {
background: url(https://whiteheartrainbowsoul.neocities.org/images/clipart257181.png) no-repeat;
background-size: 100%!important;
position: fixed;
right: 0px;
top: 0px;
height: 258px;
width: 274px;
opacity: 0;
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

.confetti {
background: url(https://whiteheartrainbowsoul.neocities.org/images/clipart404435.png) no-repeat;
background-size: 100%!important;
position: fixed;
left: 0px;
bottom: 0px;
height: 258px;
width: 274px;
opacity: 0;
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

@keyframes floating {
0% { transform: translate(0, 0px); }
50% { transform: translate(0, 15px); }
100% { transform: translate(0, -0px); }
}