* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Segoe UI", "Myriad Pro", "Frutiger", Arial, sans-serif;
  }

  body {
    background: #eda8cc;
    background: radial-gradient(circle,rgba(237, 168, 204, 1) 0%, rgba(206, 51, 147, 1) 56%, rgba(113, 60, 140, 1) 100%);
    color: #2b2b2b;
    line-height: 1.6;
    overflow-x: hidden;
  }

  /* Header */
  .header {
    background: linear-gradient(to bottom, #ffffff, #e9efec);
    border-bottom: 3px solid #4aa3df;
    text-align: center;
    padding: 2.5rem 1rem;
  }

  .header h1 {
    font-size: 2.4rem;
    font-weight: 600;
    color: #1f3b57;
  }

  .header p {
    font-size: 1rem;
    color: #4a6a82;
  }

  /* Layout */
  main {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem;
  }

  section {
    margin: 1rem;
  }

  /* Panels */
  .mainPanel {
    --size: 9%;         /* Controls the size of the individual checker squares */
    --border-width: 15px; /* Controls the thickness of the entire border */
    --color-1: black;      /* First checker color */
    --color-2: #fff;      /* Second checker color */

    /* --- Core Logic --- */
    background-image: repeating-conic-gradient(
      var(--color-1) 0% 25%,
      var(--color-2) 25% 50%
    );
    background-size: calc(var(--size) * 2) calc(var(--size) * 2);

    border: var(--border-width) solid transparent; /* Set a transparent border to define the border area */
    background-clip: padding-box, border-box; /* Clip the background to the border area */
    background-origin: border-box; /* Start the background from the border edge */
    padding: 2.5rem;
  }

  .panel {
    background: #ffffff;
    border-radius: 10px;
    padding: 1.8rem;
    border: 1px solid #dce4e0;
  }

  /* Pricing cards */
  .pricing {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
  }

  .card {
    border-radius: 12px;
    padding: 1.5rem;
    background: #ffffff;
    border: 2px solid transparent;
  }

  .card h3 {
    font-size: 1.3rem;
    margin-bottom: 0.4rem;
  }

  .price {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
  }

  /* Accent colors (flat, optimistic) */
  .blue {
    border-color: #4aa3df;
  }

  .green {
    border-color: #5cb85c;
  }

  .orange {
    border-color: #f0ad4e;
  }

  /* Lists */
  ol {
    padding-left: 1.4rem;
  }

  li {
    margin-bottom: 0.4rem;
  }

  /* Footer */
  footer {
    text-align: center;
    padding: 1.5rem;
    font-size: 0.9rem;
    color: #000000;
  }

  .box {
    border-style: solid;
    border-width: 5px;
    border-color: black;
    background-color: #be289e;
    background-image: url('img/picgifs-emo-113390.gif');
    background-size: 25%;
}

.profile-pic-wrapper {
    width: 150px !important;
    height: 150px;
    border-radius: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-pic {
    height: 100%;
    object-fit: cover;
}

.content{
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center ;
}

.info p, h1 {
    background-image: url('img/wiXBWvV.gif');
    -webkit-background-clip: text;            /* 2. Clip the background to the text shape */
    background-clip: text;                    /* Standard property */
    color: transparent;                       /* 3. Make the actual text transparent */
    font-weight: bold;
    margin-left: 5%;
    color: transparent;
    /* Shorthand for width and color */
    -webkit-text-stroke: 1px #ffffff;
    /* Longhand properties (optional) */
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #ffffff;
}

hr.custom-hr {
    /* Reset default styles */
    border: none;
    height: 2px;
    background-color: #ff1cce; /* Dark gray color */
    /* Control width and center it */
    width: 50%;
    margin: 20px auto;
  }

  .socials{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center ;
  }

  .art{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center ;
  }

  a{
    width: 50%;
  }

  button{
    width: 100%;
    padding: 1rem;
    margin: 1%;
    background-image: url('img/stars-sparkles.gif');
    background-size: 100%;
    color:#ff1cce;
    font-size: 100%;
    font-weight: bold;
  }

  .artBox{
    width: 50%;
    padding: 1.8rem;
    border: 1px solid #dce4e0;
    background-image: url('img/A8Ka.gif');
    background-color: #be289e;
    background-size: 100%;
    background-position: center;
    color: #e9efec;
  }

  .will{
    color: transparent;
    /* Shorthand for width and color */
    -webkit-text-stroke: 1px #66ff00;
    /* Longhand properties (optional) */
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #66ff00;
  }

  .wont{
    color: transparent;
    /* Shorthand for width and color */
    -webkit-text-stroke: 1px #ff0000;
    /* Longhand properties (optional) */
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #ff0000;
  }