<template>
  <div class="event">
    <div class="event-title">
      <p class="center">The CounterFire x Bitget Wallet Campaigns has been successfully concluded.</p>
    </div>
    <div class="event-text">
      <p>The team would like to express its gratitude to all participants whose achievements have been properly recorded. </p>
      <p>We will send rewards to your Bitget exchange account later.</p>
      <p>Bitget LaunchPool is commencing soon,please stay tuned.</p>
    </div>
    <div class="to-list">
      <li>
          <img
            src="data:image/png;base64,[encoded data, 18696 characters]"
            alt
          />
        <a href="https://discord.com/invite/counterfire" target="_blank">
          https://discord.com/invite/counterfire
        </a>
      </li>
      <li class="x-img">
          <img
            src="data:image/png;base64,[encoded data, 21480 characters]"
            alt
          />
        <a href="https://x.com/playCounterFire" target="_blank">
          https://x.com/playCounterFire
        </a>
      </li>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  mounted() {}
};
</script>

<style lang="scss" scoped>
.event {
  color: #fff;
  h5 {
    color: #fff;
    font-size: 28px;
    text-align: center;
  }
  .event-title {
    width: 400px;
    margin: 0 auto;
    p {
      font-family: 'Poppins-SemiBold';
      font-size: 18px;
      text-align: center;
      color: #37ffff;
    }
  }
  .event-text {
    width: 400px;
    // width: 390px;
    margin: 0 auto;
    p {
      font-family: 'Poppins';
      font-size: 16px;
      margin: 20px 0;
      color: #fff;
    }
    
  }
  .to-list {
    width: 400px;
    // display: flex;
    // justify-content: center;
    margin: 50px auto;
    li {
      display: flex;
      align-items: center;
      margin-top: 10px;
      color: #fff;
      img {
          width: 25px;
          height: 25px;
        }
      a {
        display: inline-block;
        // width: 30px;
        // height: 30px;
        font-size: 17px;
        margin: 0 10px;
        color: #fff;
        
      }
    }
    // .x-img {
    //   img {
    //     width: 25px;
    //     height: 25px;
    //     // margin-right: 5px;
    //   }
    // }
  }
}
</style>