@import "https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap";

    * {
      padding: 0;
      margin: 0;
      font-family: Rubik, sans-serif;
      font-weight: 600;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
      outline: none;
      scroll-behavior: smooth;
    }

    ::-webkit-scrollbar {
      display: none;
    }

    ::selection {
      background: var(--main-theme-color);
      color: var(--txt-cl_1);
    }

    :root {
      --main-bg-color: #000000c9;
      --main-bg-dark: #000000;
      --main-theme-color: #6f1fb1;
      --main-white: #FFFFFF;
      --txt-cl_1: #FFFFFF;
      --txt-cl_2: #000000;
      --norm_red-color: #FB5B5B;
      --norm_green-color: #18B660;
      --norm_secondary-color: #FEAA57;
      --norm_purple-color: #c58ce9;
      --norm_blue-color: #6EA8F4;
    }

    body {
      background: var(--main-bg-color);
      display: flex;
      justify-content: center;
    }

    #app {
      width: 100%;
      max-width: 400px;
      height: 100vh;
      background: var(--main-bg-dark);
      transition: all .3s ease;
    }

    @media screen and (min-width: 601px) {
      #app {
        animation: shrinkTo400 .5s ease forwards;
      }

      @keyframes shrinkTo400 {
        0% {
          max-width: 100%;
        }

        to {
          max-width: 400px;
        }
      }
    }

    @media screen and (max-width: 600px) {
      #app {
        max-width: 100%;
      }
    }

    .nav_Header {
      max-width: 400px;
    }

    @media (max-width: 600px) {
      .nav_Header {
        max-width: 100%;
      }
    }

    .nav_Header span {
      font-size: 18px;
      font-weight: 600;
    }

    .home_page {
      position: relative;
      background: radial-gradient(180% 125% at 50% 10%, var(--main-bg-dark) 40%, var(--main-theme-color) 70%, var(--main-white) 100%);
      width: 100%;
      height: 100vh;
      padding: 20px;
    }

    .home_index_img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .blend_img_cc {
      position: absolute;
      top: 90px;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      border-radius: 50%;
    }

    .blend_home_img {
      opacity: .15;
      max-width: 80%;
      height: auto;
      object-fit: contain;
      position: relative;
    }

    .blend_img_cc:before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 80%;
      background: linear-gradient(to top, var(--main-bg-dark), transparent);
      pointer-events: none;
      z-index: 1;
      mix-blend-mode: multiply;
    }

    .startUp_area_container {
      color: var(--txt-cl_1);
      text-align: center;
      position: relative;
      top: 30%;
      font-size: 40px;
      z-index: 1000;
    }

    .home_action_area {
      border-radius: 10px;
      margin-top: 20px;
      padding: 20px;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

    .btn_animated {
      position: relative;
      overflow: hidden;
      color: var(--txt-cl_1);
      font-weight: 600;
      padding: 15px 30px;
      border-radius: 50px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      transition: all 0.3s ease;
      width: 45%;
      background: linear-gradient(to right, var(--main-theme-color), var(--norm_purple-color));
      cursor: pointer;
      text-align: center;
      display: inline-block;
      border: none;
    }

    .btn_animated:hover {
      background: linear-gradient(to right, var(--norm_purple-color), var(--main-theme-color));
      transform: translateY(-2px);
    }

    .btn_animated:focus {
      outline: none;
      box-shadow: 0 0 0 2px var(--norm_purple-color);
    }

    .btn_animated .svg-container {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 50px;
    }

    .btn_animated svg {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 50%;
      preserveAspectRatio: none;
    }

    .btn_animated span {
      position: relative;
      z-index: 10;
    }

    .fade-in {
      animation: fadeIn 0.5s ease-in forwards;
    }

    @keyframes fadeIn {
      0% {
        opacity: 0;
        transform: translateY(20px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .startUp_notice {
      color: var(--main-white);
      font-size: 25px;
      margin-top: 20px;
      font-weight: bold;
      animation: textGlow 2s infinite alternate;
    }

    @keyframes textGlow {
      0% {
        color: #ccb9ec;
      }

      25% {
        color: #c550e2;
      }

      50% {
        color: #4e2277;
      }

      75% {
        color: #c573df;
      }

      100% {
        color: #b388ff;
      }
    }

    .glow-text {
      font-size: 2rem;
      font-weight: bold;
      animation: textGlow 2.5s infinite alternate;
    }