*,
  *::after,
  *::before {
      margin: 0;
      padding: 0;
      box-sizing: border-box;

      --orange: #cc531a;
      --yellow: #ffcc00;
      --red: #e63946;
      --transparent-red: #e6394753;
      --blue: #0033cc;
      --light-blue: #00c5cc;
  }


  /* Dummies Regular Font */
  @font-face {
      font-family: 'Dummies Regular';
      src: url('../asset/font/Dummies\ Regular.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
  }


  /* Myriad Pro Font */
  @font-face {
      font-family: 'Poppins';
      src: url('../asset/font/Poppins/Poppins-Bold.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
  }

  /* Helvetica Font */
  @font-face {
      font-family: 'Helvetica';
      src: url('../asset/font/HelveticaNeueLight.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
  }




  html {
      background-color: #33070a
  }

  body {
      background-image: url(../asset/img/brick_wall.png);
      background-size: contain;
      color: white;
      font-size: 16px;
      font-family: Helvetica;
  }


  .container {
      max-width: 650px;
      width: 90%;
      padding-block: 3rem;

      /* border: 2px solid orange; */
  }

  .center-block {
      margin-inline: auto;
  }

  .center-inline {
      text-align: center;
  }

  .capital-text {
      text-transform: capitalize;
  }

  .uppercase-text {
      /* text-transform: uppercase; */
  }

  .lowercase-text {
      text-transform: lowercase;
  }

  img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 10px;
  }

  .header img {
      border-radius: 0px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
  }

  .header-text {
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
  }

  h1,
  h2,
  h3,
  p,
  ul,
  ol,
  article,
  span,
  button {
      margin-block: 0.5em;
  }


  h1,
  h2,
  h3 {
      font-family: Poppins;
  }

  h1 {
      text-align: left;
      font-size: 2.3em;
      font-weight: 900;
  }

  p,
  span,
  button {
      font-size: 1.5em;
      font-weight: 500;
      line-height: 1.4;
      margin-block: 1.5em;
      overflow-wrap: break-word;
  }


  .header-text {
      font-size: 1rem;
      background-color: black;
      padding: 1.5rem;
  }

  section {
      margin-block: 5rem;
      background-color: rgb(243, 241, 236);
      color: black;
      padding: 1.5rem;
      border-radius: 10px;
      font-size: 1rem;
  }

  section:last-child {
      margin-block-end: 0;
  }


  h2,
  h3 {
      font-size: 2em;
      font-weight: 900;
      text-transform: capitalize;
      margin-block-end: 0.5em;
  }

  h3 {
      font-size: 1.5em;
      font-weight: 500;
  }


  ul {
      list-style: none;
  }

  ul li {
      padding: 0.5em;
      padding-inline: 2em;
      border-left: 3px solid black;
      margin-block: 1em;
      font-size: 1.5em;
  }

  li:hover {
      /* background-color: antiquewhite; */
  }


  section strong {
      font-style: italic;
      font-weight: bolder;
  }

  a {
      display: inline-block;
      /* text-decoration: none; */
      color: #e63946;
      padding-block: 1px;
      padding-inline: 5px;
  }

  a:hover {
      color: rgb(2, 93, 251);
      /* background-color: #33070a; */
  }

  article {
      background-color: rgb(239, 235, 235);
      padding: 2em;
      margin-block: 5rem;
      border-radius: 10px;
  }

  article:last-child {
      margin-block-end: 0;
  }

  article ul {
      list-style-type: disc;
  }

  article ul li {
      border-left: none;
      list-style-position: inside;
      padding-left: 0;
  }

  .image-container {
      display: flex;
      flex-direction: row;
      /* overflow: hidden; */
      flex-wrap: nowrap;
      /* padding: 1em; */
      /* background-color: red; */
  }

  .image-container .image {
      flex-basis: 0;
      flex-grow: 1;
      flex-shrink: 1;
      /* background-color: #0033cc; */
      padding: 0.5em;
  }


  .image-container .image img {
      width: 100%;
      height: auto;
  }


  @media (max-width: 600px) {
      body {}

      h1 {
          font-size: 1.5em;
      }

      h2 {
          font-size: 1.2em;
      }


      h3 {
          font-size: 1em;
      }

      p,
      span,
      button {
          font-size: 0.9em;
      }

      ul li {
          font-size: .9em;
      }


      section {
          margin-block: 3rem;
          padding: 1rem;
      }


      article {
          margin-block: 3rem;

          padding: 1em;
      }

  }



  @media (max-width: 768px) {

      .image-container {

          flex-direction: column;

      }
  }



  /* main page */

  .header-title {
      font-family: "Poppins";
      font-size: 10vw;
      line-height: 1;
      color: var(--orange);
      -webkit-text-stroke-color: var(--yellow);
      -webkit-text-stroke-width: 0.025em;
      user-select: none;
      text-align: center;
      position: relative;
      /* for the pseudo-element positioning */

      /* Default for all browsers — includes big blur */
      text-shadow:
          var(--light-blue) 0.035em 0.025em 0.025em,
          var(--blue) 0.07em 0.05em 0.025em,
          var(--light-blue) 0.105em 0.075em 0.025em,
          /* var(--yellow) 0.125em 0.095em 0.005em, */
          var(--red) -0.035em -0.025em 0.5em;
  }


  @media (max-width: 1000px) {

      .header-title {
          font-size: 13vw;

          /* border: 2px solid orange; */
      }

  }

  /* Safari-specific override */
  .is-safari .header-title {
      /* Remove big blur from main shadows */
      text-shadow:
          var(--light-blue) 0.035em 0.025em 0.025em,
          var(--blue) 0.07em 0.05em 0.025em,
          var(--light-blue) 0.105em 0.075em 0.025em;
      /* var(--yellow) 0.135em 0.105em 0.010em; */
  }

  /* Add big blur via pseudo-element (no stroke so Safari blurs properly) */
  .is-safari .header-title::before {
      content: attr(data-text);
      position: absolute;
      inset: 0;
      color: var(--red);
      -webkit-text-stroke-width: 0;
      text-shadow: var(--transparent-red) -0.035em -0.025em 0.5em;
      z-index: -1;
      pointer-events: none;
  }

  .tagline {
      /* font-size: 2em; */
      /* font-weight: bolder; */
  }

  .contract-box {
      padding-block: 1em;
      display: flex;
      background-color: black;
      width: fit-content;
      max-width: 90%;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      border-radius: 10px;
  }


  .contract-box span {
      display: inline-block;
      color: white;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: normal;
      align-self: center;

      margin-block: 0;

  }

  .contract-box #copybutton {
      margin-block: 0;

      outline: none;
      display: inline-block;
      background-color: var(--red);
      color: white;
      /* line-height: 1; */
      border: none;
      padding-inline: 0.9em;
      padding-block: 0.5em;
      border-radius: 10px;
      margin-inline-start: 1em;
      transition: all 0.4s ease;
  }

  .contract-box #copybutton:hover {
      background-color: var(--light-blue);
      transform: scale(1.02);
  }

  .description {
      background-color: transparent;
      color: white;
  }

  .description>p {
      margin: 0;
      text-align: center;
  }

  .safe {
      background-color: transparent;
      width: 80%;
  }

  .safe img {
      box-shadow: var(--red) -0.035em -0.025em 0.5em;
      transition: all 0.4s ease;
  }

  .safe img:hover {
      box-shadow: #6afffa -0.035em -0.025em 1em 0.4em;
  }


  .link {
      background-color: transparent;
      /* border: 2px solid orange; */
  }


  .link article {
      background-color: transparent;
  }



  .link a {
      text-decoration: none;
      display: block;
      transition: all 0.2s ease;
  }

  .link a:hover {
      transform: scale(1.02);
      outline: none;
  }


  /* card */
  .link .card {
      background: #ffcc00;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
      padding: 0;
      /* margin-block-start: 0px; */
  }

  .link>a:first-child .card {
      margin-block-start: 0px;

      /* border: 2px solid red; */
  }


  .link .card-top {
      padding: 2em;
      padding-block-end: 0px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      flex-wrap: nowrap;
  }


  .link .card-top header {
      font-family: "Dummies Regular";
      font-size: 1.4rem;
      color: black;
      margin: 0;
      text-align: center;
      transform: rotateZ(-4deg);
      align-self: flex-start;
      margin-inline-start: auto;
      margin-inline-end: -15px;
      padding-block-end: 10%;
  }


  .link .card-top header .first {
      font-family: "Poppins";
      font-size: 6.5vw;
      line-height: 0.8;
      color: var(--red);
      -webkit-text-stroke-color: var(--yellow);
      -webkit-text-stroke-width: 0.025em;
      text-shadow: var(--light-blue) 0.035em 0.025em 0.025em,
          var(--blue) 0.07em 0.05em 0.025em,
          var(--light-blue) 0.105em 0.075em 0.025em;
      user-select: none;
  }

  .link .card-top header .second {
      font-size: 3vw;
      padding: 0.5em;
  }

  .link .card-top header .third {
      font-size: 8vw;
  }

  .link .card-icon {
      display: block;
      width: 20%;
      margin: 0;
      display: flex;
      align-items: baseline;
      flex-basis: 1;
      flex-shrink: 0;
      margin-top: 20px;
  }

  .link .card-icon img {
      width: 100%;
      height: auto;
      border-radius: 0;
  }

  .link .card-bottom {
      background: #000;
      color: #fff;
      padding: 30px;
      font-size: 2vw;
      font-weight: 900;
      line-height: 1.3;
  }

  .link .card-bottom>h2 {
      font-family: Helvetica;
      margin-block-end: 0.5em;
      line-height: 1;
      font-size: 4.5vw;
  }

  .link .card-bottom>p {
      font-weight: 300;
      font-size: 3.5vw;
      margin-block-end: 0;
  }



  @media (min-width: 768px) {

      .link .card-top header .first {
          font-size: 3.5rem;

      }

      .link .card-top header .second {
          font-size: 1.5rem;

      }

      .link .card-top header .third {
          font-size: 4rem;

      }


      .link .card-bottom {
          padding: 30px;
      }


      .link .card-bottom>h2 {
          line-height: 1;
          font-size: 2rem;
      }

      .link .card-bottom>p {
          font-size: 1.5rem;
      }
  }