@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

* {
   margin: 0px;
   padding: 0px;
}
body {
   background-color: hsl(0, 0%, 15%);
   font-family: "Poppins", Arial, Helvetica, sans-serif;
}
.navbar {
   background-color: hsl(0, 0%, 8%);
   color: white;
   padding: 1rem;
   font-size: 20px;
   font-weight: bold;
   border-bottom-left-radius: 15px;
   border-bottom-right-radius: 15px;
   align-items: center;
   justify-content: center;
   text-align: center;
   display: flex;
}

.navbargradient {
   position: relative;
   background: linear-gradient(90deg, #3d73eb 13.4%, #de8fff 86.6%);
   padding-bottom: 10px;
   border-bottom-left-radius: 15px;
   border-bottom-right-radius: 15px;
}

@keyframes animate {
   0% {
      transform: translateY(-1000px) rotate(0deg);
      opacity: 1;
      border-radius: 0;
   }
   100% {
      transform: translateY(100vh) rotate(720deg);
      opacity: 0;
      border-radius: 50%;
   }
}

.background {
   position: fixed;
   width: 100vw;
   height: 100vh;
   top: 0;
   left: 0;
   margin: 0;
   padding: 0;
   background: #000000;
   overflow: hidden;
   z-index: -1;
}
.background li {
   position: absolute;
   display: block;
   list-style: none;
   width: 20px;
   height: 20px;
   background: rgba(255, 255, 255, 0.2);
   animation: animate 19s linear infinite;
}

.background li:nth-child(0) {
   left: 87%;
   width: 192px;
   height: 192px;
   bottom: -192px;
   animation-delay: 1s;
}
.background li:nth-child(1) {
   left: 39%;
   width: 169px;
   height: 169px;
   bottom: -169px;
   animation-delay: 3s;
}
.background li:nth-child(2) {
   left: 65%;
   width: 163px;
   height: 163px;
   bottom: -163px;
   animation-delay: 7s;
}
.background li:nth-child(3) {
   left: 43%;
   width: 199px;
   height: 199px;
   bottom: -199px;
   animation-delay: 3s;
}
.background li:nth-child(4) {
   left: 67%;
   width: 106px;
   height: 106px;
   bottom: -106px;
   animation-delay: 5s;
}
.background li:nth-child(5) {
   left: 75%;
   width: 160px;
   height: 160px;
   bottom: -160px;
   animation-delay: 1s;
}
.background li:nth-child(6) {
   left: 80%;
   width: 146px;
   height: 146px;
   bottom: -146px;
   animation-delay: 18s;
}
.background li:nth-child(7) {
   left: 10%;
   width: 107px;
   height: 107px;
   bottom: -107px;
   animation-delay: 17s;
}
.background li:nth-child(8) {
   left: 1%;
   width: 142px;
   height: 142px;
   bottom: -142px;
   animation-delay: 5s;
}
.background li:nth-child(9) {
   left: 19%;
   width: 127px;
   height: 127px;
   bottom: -127px;
   animation-delay: 30s;
}
.background li:nth-child(10) {
   left: 18%;
   width: 127px;
   height: 127px;
   bottom: -127px;
   animation-delay: 12s;
}
.background li:nth-child(11) {
   left: 85%;
   width: 175px;
   height: 175px;
   bottom: -175px;
   animation-delay: 43s;
}
.background li:nth-child(12) {
   left: 29%;
   width: 155px;
   height: 155px;
   bottom: -155px;
   animation-delay: 16s;
}
.background li:nth-child(13) {
   left: 23%;
   width: 189px;
   height: 189px;
   bottom: -189px;
   animation-delay: 45s;
}
.background li:nth-child(14) {
   left: 67%;
   width: 154px;
   height: 154px;
   bottom: -154px;
   animation-delay: 38s;
}

.container {
   border: 2px solid white;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-left: auto;
   margin-right: auto;
   margin-top: 50px;
   max-width: 700px;
   overflow: hidden;
   backdrop-filter: blur(5px);
   border-radius: 20px;
}
.content {
   color: white;
   padding: 20px;
}

.content h2 {
   margin-bottom: 10px;
   font-family: "Poppins", Arial, Helvetica, sans-serif;
}

.content p {
   margin-top: 10px;
   font-family: "Poppins", Arial, Helvetica, sans-serif;
}