<html>
  <head>
    <meta charset="utf-8">
    <title>Happy-Birthday Confetti CSS Effect</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
  </head>
  <body>
    <div class="main_container">
      <p>🎂 Happy Birthday! 🎂</p>
      <span>CodePen won't let me use files! Check out the project <a href="https://replit.com/@FazePlaysGamesP/Happy-Birthday-Confetti-CSS-Effect" target="_blank">here</a>.</span>
    </div>
  </body>
</html>
body{
  background: #232323;
  color: white;
  text-align: center;
}

p{
  font-family: 'Lobster', cursive;
  font-size: 5rem;
  margin-top: 0px;
  margin-bottom: 20px;
}

.main_container{
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  position: absolute;
  width: 100%;
}

span{
  font-family: Arial;
}
// Sad 😟

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.