html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
      background: #0f0c29;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      color: white;
    }

    canvas {
      position: absolute;
      top: 0;
      left: 0;
    }

    .center-text {
      position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  text-align: center;
	  z-index: 1;
	  opacity: 0;
	  animation: fadeInUp 1.5s ease-out forwards;
	  animation-delay: 0.1s;
    }

	@keyframes fadeInUp {
	  0% {
		opacity: 0;
		transform: translate(-50%, -40%);
	  }
	  100% {
		opacity: 1;
		transform: translate(-50%, -50%);
	  }
	}

    .title {
      font-size: 2.8em;
      font-weight: bold;
    }

    .subtitle {
      font-size: 1.2em;
      margin-top: 0.5em;
      opacity: 0.85;
    }

    .social-icons {
      position: absolute;
	  bottom: 30px;
	  left: 50%;
	  transform: translateX(-50%);
	  display: flex;
	  gap: 30px;
	  z-index: 1;
	  opacity: 0;
	  animation: fadeInUpIcons 1.5s ease-out forwards;
	  animation-delay: 1.2s;
    }

	@keyframes fadeInUpIcons {
	  0% {
		opacity: 0;
		transform: translate(-50%, 30px);
	  }
	  100% {
		opacity: 1;
		transform: translate(-50%, 0);
	  }
	}

    .social-icons a {
      color: white;
      font-size: 1.8em;
      transition: color 0.3s;
    }

    .social-icons a:hover {
      color: #9f7aea;
    }