@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

* {
  box-sizing: border-box;
}
body {
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  font-family: "Inter", sans-serif;
}
a {
  text-decoration: none;
}

main {
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 40px;
  border-radius: 26px;
  min-height: 95vh;
  position: relative;
  background-image: url(../images/bg.jpeg);
  background-size: cover;
  background-position: top;
}

.header {
  display: flex;
  justify-content: space-between;
}
.header .action {
  background-color: #ffffff0f;
  border-radius: 55px;
  padding: 0 8px;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.header .action button {
  border: solid 0.72px #f6f6f6;
  background-color: #ffffff1a;
  width: 34px;
  height: 34px;
  border-radius: 50px;
  color: #fff;
}

.header .logo .title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 150%;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.header .logo .sub {
  font-size: 12px;
  color: #f5f6f7;
}

.text-8 {
  font-size: 8px;
}
.text-10 {
  font-size: 10px;
}
.text-12 {
  font-size: 12px;
}

.text-sm {
  font-size: 12px;
}

.text-14 {
  font-size: 14px;
}
.text-18 {
  font-size: 18px;
}
.text-20 {
  font-size: 20px;
}
.text-34 {
  font-size: 34px;
}

.text-green {
  color: #40ff8c;
}
.text-green2 {
  color: #00ffb7;
}

.text-blue {
  color: #2b8fff;
}

.btn-one,
.btn-one:hover {
  background-color: #ffffff33;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  border-radius: 40px;
  padding: 10px 24px 10px 24px;
  z-index: 1;
}

.btn-one:hover {
  background-color: #ffffff5f;
}

.btn-two,
.btn-two:hover {
  background-color: #2b8fff;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  border-radius: 40px;
  padding: 10px 24px 10px 24px;
  z-index: 1;
  border: 1px solid;

  border-image-source: linear-gradient(
    274.14deg,
    rgba(201, 255, 228, 0.0352) 4.46%,
    rgba(8, 101, 54, 0.16) 106.75%
  );
  position: relative;
  overflow: hidden;
}

.btn-two:hover {
  background-color: #0077ff;
}

.btn-two::after {
  content: "";
  width: 71px;
  height: 28px;
  background-color: #fff;
  filter: blur(20px);
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20px;
  margin-left: auto;
  margin-right: auto;
}

footer {
  background: linear-gradient(180deg, #122132 0%, #111d2a 100%);
  box-shadow: 0px 12px 40px 0px #10182833;
  border-top: solid 0.8px #2b8fff;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  display: flex;
  justify-content: space-around;
  padding-top: 14px;
  padding-bottom: 20px;
  width: calc(100% + 40px);
  max-width: 440px;
  margin-left: -20px;
  margin-right: auto;
  position: fixed;
  bottom: 0;
  z-index: 9;
}

footer a {
  color: #d0d5dd;
  font-size: 12px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

footer a img.active {
  display: none;
}

footer a.active img {
  display: none;
}

footer a.active img.active {
  display: inline-block;
}

.btn-trans {
  background-color: transparent;
  border: 0;
}

.text-light2 {
  color: #888e9c;
}

.text-light3 {
  color: #c1c4cc;
}

.text-light4 {
  color: #dfe0e4;
}
.white80 {
  color: #ffffffcc;
}
.white70 {
  color: #ffffffb2;
}
.neutral {
  color: #f5f6f7;
}

.gray300 {
  color: #d1d5db;
}

.relative {
  position: relative;
}

.middle-shape {
  width: 400px;
  height: 400px;
  border-radius: 99px;
  left: -55px;
  position: absolute;
  left: 0;
  top: auto;
  bottom: 0;
  z-index: 0;
  transform: rotate(90deg);
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(0, 118, 255, 0.24) 0%,
    rgba(132, 171, 255, 0) 100%
  );
}

.depo-card {
  background-color: #ffffff0d;
  border-radius: 16px;
  border: solid 1px #ffffff0f;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.user {
  width: 44px;
  height: 44px;
  border-radius: 44px;
}

.empty {
  background-color: #144e922e;
  border-radius: 24px;
  padding: 34px 24px;
  color: #fff;
  text-align: center;
}

.btn-empty {
  border-radius: 10px;
  width: 250px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  outline: solid 2px #126cd2;
  height: 48px;
  background: linear-gradient(
    92.99deg,
    #2b8fff 14.34%,
    #56a6ff 22.07%,
    #3695ff 29.79%
  );
  box-shadow: 0px 2px 4px 0px #ffeeee1a inset;
  box-shadow: 2px 0px 10px 0px #ffffff1a inset;
}