@font-face {
  font-family: "poppins";
  font-display: swap;
  src: url("../fonts/Poppins-Regular.woff2");
  font-weight: 100;
}

@font-face {
  font-family: "poppins";
  font-display: swap;
  src: url("../fonts/Poppins-Regular.woff2");
  font-weight: 200;
}

@font-face {
  font-family: "poppins";
  font-display: swap;
  src: url("../fonts/Poppins-Regular.woff2");
  font-weight: 300;
}

@font-face {
  font-family: "poppins";
  font-display: swap;
  src: url("../fonts/Poppins-Regular.woff2");
  font-weight: 400;
}

@font-face {
  font-family: "poppins";
  font-display: swap;
  src: url("../fonts/Poppins-Medium.woff2");
  font-weight: 500;
}

@font-face {
  font-family: "poppins";
  font-display: swap;
  src: url("../fonts/Poppins-SemiBold.woff2");
  font-weight: 600;
}

@font-face {
  font-family: "poppins";
  font-display: swap;
  src: url("../fonts/Poppins-Bold.woff2");
  font-weight: 700;
}

@font-face {
  font-family: "poppins";
  font-display: swap;
  src: url("../fonts/Poppins-Bold.woff2");
  font-weight: 800;
}

@font-face {
  font-family: "poppins";
  font-display: swap;
  src: url("../fonts/Poppins-Bold.woff2");
  font-weight: 900;
}

@font-face {
  font-family: "Inter";
  font-display: swap;
  src: url("../fonts/Inter-Regular.woff2");
  font-weight: 100;
}

@font-face {
  font-family: "Inter";
  font-display: swap;
  src: url("../fonts/Inter-Regular.woff2");
  font-weight: 200;
}

@font-face {
  font-family: "Inter";
  font-display: swap;
  src: url("../fonts/Inter-Regular.woff2");
  font-weight: 300;
}

@font-face {
  font-family: "Inter";
  font-display: swap;
  src: url("../fonts/Inter-Regular.woff2");
  font-weight: 400;
}

@font-face {
  font-family: "Inter";
  font-display: swap;
  src: url("../fonts/Inter-Medium.woff2");
  font-weight: 500;
}

@font-face {
  font-family: "Inter";
  font-display: swap;
  src: url("../fonts/Inter-SemiBold.woff2");
  font-weight: 600;
}

@font-face {
  font-family: "Inter";
  font-display: swap;
  src: url("../fonts/Inter-SemiBold.woff2");
  font-weight: 700;
}

@font-face {
  font-family: "Inter";
  font-display: swap;
  src: url("../fonts/Inter-SemiBold.woff2");
  font-weight: 800;
}

@font-face {
  font-family: "Inter";
  font-display: swap;
  src: url("../fonts/Inter-SemiBold.woff2");
  font-weight: 900;
}

:root {
  font-family: poppins, -apple-system, ".SFNSText-Regular", "San Francisco",
    BlinkMacSystemFont, ".PingFang-SC-Regular", "Microsoft YaHei", "Segoe UI",
    "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body,
*,
*::before,
*::after {
  font-weight: 400;
  font-family: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

#bg1,
#bg2 {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: opacity 1s;
  z-index: -2;
}

#bg1 {
  background: linear-gradient(to bottom, rgb(215, 224, 220), rgb(8, 7, 60));
}

#bg2 {
  opacity: 0;
  background: linear-gradient(to bottom, rgb(48, 5, 43), rgb(221, 18, 252));
}

#particleGenerator {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0; /* Ensures particles are below the button */
}

.particle {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  opacity: 0;
  animation: particleAnim 3s ease-in-out infinite;
}

@keyframes particleAnim {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-1500%);
  }
}

button,
a {
  cursor: pointer;
}

button {
  cursor: pointer; /* Changes cursor to a hand icon */
  padding: 10px 20px;
  font-size: 16px;
  border: 1px solid #333;
  border-radius: 8px;
  background-color: #3388ee;
  color: white;
  transition: background-color 0.3s ease;
  z-index: 2;
}

button:hover {
  background-color: #2266bb; /* Darkens button on hover */
}