html>* {
      letter-spacing: normal;
  }

  body {
      margin: 0px;
      padding: 0px;
      border: 0px;
      font: inherit;
      background-color: #fefefe;
      line-height: 1;
      display: block;
      font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, "Segoe UI", Tahoma, Arial, sans-serif;
  }

  *, ::before, ::after {
      box-sizing: inherit;
  }

  .wrapper {
      margin: 0px auto;
      height: 100%;
      width: 100%;
      max-width: 680px;
  }

  .header-inner {
      margin-top: 42px;
      margin-bottom: 32px;
      -webkit-box-align: center;
      align-items: center;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      padding-bottom: 15px;
  }

  .avatar {
      border-radius: 50%;
      width: 110px;
      height: 110px;
      display: block;
      object-fit: contain;
      object-position: initial;
      filter: none;
  }

  .main-text {
      margin: 15px 10px 0;
      font-weight: 700;
      font-size: 2.125rem;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      padding: 5px 15px;
  }

  .desc-text {
      color: #6e6e6e;
      font-size: 14px;
      text-align: center;
      line-height: 1.5;
      font-weight: 400;
      line-height: 1.4444;
      font-size: 1.125rem;
      padding: 0 15px;
  }

  main {
      display: flex;
      flex-direction: column;
  }

  .content {
      display: flex;
      align-items: center;
      gap: 10px;
  }

  .button-link {
      background-color: rgb(55, 145, 181);
      color: #fff;
      white-space: nowrap;
      flex-basis: auto;
      appearance: none;
      border: none;
      cursor: pointer;
      border-radius: 4px;
      text-align: center;
      font-weight: 700;
      line-height: 1.2857;
      letter-spacing: .8px;
      font-size: .875rem;
      text-transform: uppercase;
      text-decoration: none;
      padding: 9px 0;
      width: 95%;
      transition: 0.3s;
  }

  .button-link:hover {
      background-color: rgb(41, 110, 137);
      color: white;
  }

  .button-lable {
      text-align: center;
      cursor: pointer;

  }

  .button-wrapper a {
      text-decoration: none;
  }

  footer {
      color: #6b6b6b;
      font-size: 1.125rem;
      text-align: center;
      display: block;
      line-height: 1.5;
      padding: 20px 0;
  }
  /* dark mode style */

@media screen and (prefers-color-scheme: dark) {
    body {
        background-color: #282828;
    }

    h1 {
        color: #ffffff;
    }
    
    .desc-text {
        color: #a0a0a0;
    }
    
    .button-link {
        background-color: #205627;
        color: #ccc;
    }
    
    .button-link:hover {
        background-color: #353535;
        color: #eee;
    }
    
    footer {
        color: #888;
    }
}