(or early birthday, depending)

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

<div class="balloons1" id="balloons1"></div>
<div class="balloons2" id="balloons2"></div>
<div class="confetti" id="confetti"</div>
<script>
//change this to the date you want.
//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()){
//only change these if you add more images or change an id
document.getElementById("balloons1").style.opacity = 1;
document.getElementById("balloons2").style.opacity = 1;
document.getElementById("confetti").style.opacity = 1;
}}
</script>

Add these images somewhere on your site (or use your own!):

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


.balloons1 {
background: url("balloons.url.goes/here.png") no-repeat;
background-size: 100%!important;
position: fixed;
right: 0px;
top: 0px;
width: 274px;
height:400px;
opacity: 0;
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

.balloons2 {
background: url(balloons.url.goes/here.png) no-repeat;
background-size: 100%!important;
position: fixed;
left: 0px;
top: 0px;
width: 274px;
height:400px;
opacity: 0;
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

.confetti {
background: url(confetti.url.goes/here.gif) no-repeat;
background-size: 100%!important;
position: fixed;
left: 0px;
right:0px;
bottom: -50px;
height: 350px;
width: 100%;
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); }


Use it for yourself, your pets, or your character shrines! Go wild! 😁