@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
   margin: 0px;
   padding: 0px;
}

body {
   font-family: "Poppins", Arial, sans-serif;
   margin: 0;
   padding: 0;
   background-color: hsla(0, 0%, 0%, 0.8);
}

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

.header-content {
   background-color: rgb(30, 30, 30);
   color: #fff;
   padding: 1rem;
   text-align: center;
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
}

h1 {
   margin: 0;
   font-weight: 500;
}

.events-heading {
   margin-top: 20px;
   margin-bottom: 20px;
   color: white;
   background-color: rgb(39, 39, 39);
   padding: 1rem;
   border-radius: 12px;
   font-weight: 450;
   text-align: left;
}

.container {
   max-width: 800px;
   justify-content: center;
   align-items: center;
   margin: 0 auto;
}

.event {
   background: linear-gradient(60deg, #f3f3f3 13.4%, #50e8ff 86.6%);
   padding: 1rem;
   border: 1.5px solid black;
   border-radius: 12px;
   color: black;
   background-size: 150% auto;
   transition: all 0.5s ease;
   margin-top: 15px;
}

.event:hover {
   background-position: right center;
}

.event hr {
   margin-left: 12px;
   margin-right: 12px;
   border: 1px solid hsla(0, 0%, 9%, 0.4);
}

.event h2 {
   color: #333;
   font-size: 20px;
   font-weight: 600;
   padding-left: 20px;
   padding-right: 20px;
   transition: all 0.5s ease;
}

.event h2:hover {
   transform: scale(1.005);
}

.event p {
   color: #575757;
   margin-bottom: 10px;
   padding-left: 20px;
   padding-right: 20px;
   transition: all 0.5s ease;
}

.event p:hover {
   color: #2a2a2a;
   transform: scale(1.005);
}

a {
   color: #007bff;
   text-decoration: none;
}

a:hover {
   text-decoration: underline;
}

@keyframes animate {
   0% {
      transform: translateY(0) rotate(0deg);
      opacity: 1;
      border-radius: 0;
   }
   100% {
      transform: translateY(-1000px) 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;
}