HTML CSS JSResult
.red-text{
    font-family:Pacifico;
    color: yellow;
    font-size: 46px;
    margin-top:120px;
    line-height: 150%;
  }
html,body{height:100%;margin:0;padding:0;background-image: url("back.jpg");}
ul,li{text-indent:0;text-decoration:none;margin:0;padding:0}
img{border:0}
body{background-color:#000;color:#999;font:100%/28px helvetica, arial, sans-serif}
canvas{cursor:crosshair;display:block;left:0;position:absolute;top:0;z-index:20}
#header img{width:100%; height:20%;}
#bg img{width:100%; height:80%;}
#header,#bg{position:fixed;left:0;right:0;z-index:10}
#header{top:0}
#bg{position:fixed;z-index:1;bottom:0}
audio{position:fixed;display:none;bottom:0;left:0;right:0;width:100%;z-index:5}

/* Style for the wishing message */
.wish-message {
  font-family: 'Pacifico', cursive;
  font-size: 3em; /* Adjust size as needed */
  line-height: 1.2;
  padding: 20px;
  background: rgba(0, 0, 0, 0.3); /* Optional: background for better readability */
  border-radius: 15px; /* Optional: rounded corners */
  color: #fff; /* Text color */
  text-align: center;
}
/* Start hidden and set transition for fade-in */
.wish-message {
  opacity: 0;
  transition: opacity 2s ease-in;
}
/* Footer */

.footer{
  position: fixed;
  top: 0;
  height: 40px;
  width:100%;
  padding:20px;
  color: #fff;
  background-color: rgba(0,0,0,0.3);
}

.socialIcons{
  color:#fff;
  padding:8px;
  font-size:25px;
  text-align:center;
}

Resources