* {
      text-align: center;
      box-sizing: border-box;
    }

    body {
      background-color: #0e0f12;
      font-family: Arial, Helvetica, sans-serif;
      color: white;
      overflow-x: hidden;
      margin: 0;
    }

::-webkit-scrollbar {
  width: 10px; 
}


::-webkit-scrollbar-track {
  background: #2a2a2a; 
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to top, #9d4edb, #e060a6);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #e060a6, #9d4edb);
}

    h1, h2, h4 {
      text-shadow: 2px 2px 2px black;
    }

    h1 {
      margin-top: 40px;
    }

    a {
      text-shadow: 2px 2px 2px black;
      font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    }

    .fade-in {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }

    .btn {
      display: inline-block;
      background-color: #00BFFF;
      padding: 10px 20px;
      cursor: pointer;
      color: white;
      border-radius: 5px;
      text-decoration: none;
      box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
      transition: transform .2s, opacity .2s;
    }

    .btn:hover {
      transform: scale(1.05);
      opacity: .9;
    }

    .btn-no {
      display: inline-block;
      background-color: #5c5d5e;
      cursor: not-allowed;
      padding: 10px 20px;
      color: white;
      border-radius: 5px;
      text-decoration: none;
      box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
      transition: transform .2s, opacity .2s;
    }

    .fade-in.visible {
      opacity: 1;
      transform: translateY(0);
    }

    img {
      border-radius: 10px;
    }

    section {
      margin: 80px 0;
    }