body {
  padding: 0;
  margin: 0;
  font-family: 'ClashDisplay-Variable';
  height: 100vh;
}

:root {
  /* --color-accent: #03A8FF; */
}

.layout {
  max-width: 630px;
  padding: 80px 15px 5px;
  margin: 0 auto;
}

.section {
  margin-bottom: 40px;
  width: 100%;
  position: relative;
}

.section-name {
  color: #000;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-bottom: 12px;
  text-align: center;
  display: flex;
  width: 100%;
  justify-content: center;
}

@media screen and (max-width: 900px) {
  .layout {
    padding: 20px 15px 0;
  }

  .section {
    margin-bottom: 20px;
  }

  .section-name {
    font-size: 32px;
  }
}

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.logo {
  width: 83px;
  height: 72px;
  position: relative;
  cursor: pointer;
}

.header-name {
  font-size: 64px;
  font-style: normal;
  font-weight: 700;
  line-height: 56px;
  margin-left: 32px;
}

@media screen and (max-width: 900px) {
  .header-name {
    font-size: 38px;
    line-height: 28px;
    margin-left: 32px;
  }
}

.description {
  text-align: center;
  font-size: 28px;
  font-style: normal;
  font-weight: 500;
  line-height: 36px;
  margin-bottom: 32px;
}

@media screen and (max-width: 900px) {
  .description {
    text-align: left;
  }
}

.buy {
  display: flex;
  gap: 12px;
  position: relative;
}

.buy-before, .buy-after {
  display: block;
  content: "";
  position: absolute;
  top: 15px;

  path {
    fill:var(--color-accent);
  }
}

.buy-before {
  left: -98px;
}

.buy-after  {
  right: -98px;
}

.buy:hover .buy-before {
  transform: translateX(10px);
}

.buy:hover .buy-after {
  transform: translateX(-10px);
}

.button {
  display: flex;
  padding: 16px 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex: 1 0 0;
  border-radius: 16px;
  background: var(--color-accent);
  color: #FFF;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px;
  text-decoration: none;
  cursor: pointer;
}

.button--square {
  max-width: 72px;
  width: 72px;
}

.button:hover {
  text-decoration: none;
  opacity: .85;
  box-shadow: 3px 3px 1px #000;
}

@media screen and (max-width: 900px) {
  .button {
    font-size: 24px;
  }

  .buy-before, .buy-after {
    display: none;
  }
}

.quote {
  display: flex;
  padding: 24px 24px 26px 24px;
  gap: 40px;
  border-radius: 24px;
  background: #FFF;
}

.quote-text {
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
}

.quote-comma {
  color: var(--color-accent);
  font-size: 124px;
  font-style: normal;
  font-weight: 600;
  line-height: 94px;
}

.details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.details-block {
  border-radius: 24px;
  background: #FFF;
  display: flex;
  padding: 16px 32px 16px 24px;
  align-items: center;
  gap: 32px;
  align-self: stretch;
}

@media screen and (max-width: 900px) {
  .details-block {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
}

.details-block-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

@media screen and (max-width: 900px) {
  .details-block-row {
    display: flex;
    flex-direction: column;
  }
}

.details-block--half {
  flex: 1 0 0;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
}

@media screen and (max-width: 900px) {
  .details-block--half {
    flex: 1 1 auto;
  }
}

.details-block--half .details-number {
  font-size: 48px;
  line-height: normal;
}

@media screen and (max-width: 900px) {
  .details-block--half .details-number {
    font-size: 42px;
    line-height: 50px;
  }
}

.details-number {
  color: var(--color-accent);
  font-size: 64px;
  font-style: normal;
  font-weight: 700;
  line-height: 72px; /* 112.5% */
}

@media screen and (max-width: 900px) {
  .details-number {
    font-size: 42px;
    line-height: 50px;
  }
}

.details-text {
  color: #000;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 133.333% */
}

.details-block--last {
  flex: 1 1 auto;
  flex-direction: row;
  gap: 0;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-right: 16px;
}

.details-block--last .details-text {
  flex-grow: 1;
}

.bird {
  margin-left: auto;
  width: 60px;
  height: 48px;

  path {
    fill:var(--color-accent);
  }
}

.money {
  margin-left: auto;
  height: 50px;
  width: 57px;

  path {
    fill:var(--color-accent);
  }
}

.pool {
  display: flex;
  padding: 24px 32px 24px 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border-radius: 24px;
  background: #FFF;
  width: 100%;
}

.pool-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  border-bottom: 1px solid #FF5E2B;
  padding-bottom: 12px;
}

.pool-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.pool-name {
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  flex: 1 0 0;
}

.pool-price {
  text-align: right;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.image-bag {
  margin-left: 8px;
  width: 43px;
  height: 50px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAABTCAMAAAACyRFXAAAAP1BMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACzJYIvAAAAFHRSTlMAECAwQFBgb3B/gI+Qn6Cvv8/f7xHFuM0AAAPOSURBVFjDrVjZgqsgDC3rUBRZ//9brwoqaECxNy/TseWY9STh8+kUrp2zCn/+g2ATonx/x0IubOJ+Vk6FQ6wYlBTkvZERxmeQwfFfFJvtIy6HM68MRuvZ5Sgu0Cx6AcaWkyoaXKDJF2DjcpCmf6jgjLIpOvGFamazMhPi8zf0gp0frrrxl2Bni+TycOgH04CZUbPQX6xrABik2Yvq4kUaUMXzcjWdYCQ7hNT2EUdDg+hEW9LAs6W2kZ0/jpvGq3Kus86TRU4RW8QCeyg0bSsLtii8NPWCleVYpr3pBVtzQM0IZIywW9ojOqwF2qEX1oeTcUwuxoTSdjNePSExKtR+IMhE01s+ZHJrJeLm5PU5lPGUOD2/SzM6+ACJWV1fvuKGhKgJVdEYHY3K6bEPylljjL2CcoZvWXYNXeprRrDdt4RNrpJqVfnbfOUAA7jtiOAHJQu9qryYu/CUdlKH9bLuDJyUu50N/uLvxqZfkX2k2Tf+6u6dCU08wKp0aJRpGymsGc4Vy9Pq3GI4LhpCsDdY1z6DGed01srF5M85rD5mwFg8ZYozJdVEQ2tjBoOw8KWGaNkxYdXWNznc5v28CcWOCRPs8pXHN7xfvI5XA/qF8kYB9ONI8X6IrjH0HMFstu8AotJ8HRRIepBrzhU7GvLQkBXN52B8k8qF94a8+UpIMQ1PKmvZZ0pGTdGhwznVOMx0aEsMz1MoXDlgc2h0d5UmKg/2TkkmC4bCwKRHa/mCTnk2v1DMsF6UQ2jwpEwn+2RaIesjiy+6H9mOGtN3gRZTCjVnWt5qNDkaOJuIsrnoJp3naN9PPUryGFXlo44Mo02Z2+htb57aaCnmZt8VIMLkLGeHBho9Ym1giiNmSx9yO4hNqejioHXJMjQcAT+xGqkt777cOy4h9OxkZSXwsdkknjE1vph9lDyibWOQEgmMg+kossEwQaDGXI0TmIRVH69dyVwa1CE5mG0mV0xwEhpgLgNznzs0cwy5tg4WvYOa1HhhtRpYpF7WnDerG1ixioYtC0a4xqeHim3RRM1p5moqePPDE1h70LoMCPCwu1VAarUeV9fyy9pUUcwdDGMbO4Hmo1JqFLhJxurArWyfeFlw2KObSJxZHFQlCFw9WQo2ZfY7hjcXfpfDewfqv37dlrYsgDua413a7WtpPiAcV8NL6B7e+iFhgNk00mFWiGagN4CYD6Z1u3oqRG+0FIwSXF5vUC4G7R7c++IJpgnvosBf1hdTrn3oEXN3cTCaZ0BePQsVYVIbV8dxeuS9GY7p7G+5FLmZRc9/pRSc1u4y/gEtRJ+WgRFFPQAAAABJRU5ErkJggg==);
}

.boomerang {
  position: absolute;
  left: -60px;
  top: 25px;

  path {
    fill:var(--color-accent);
  }
}

.shoe {
  position: absolute;
  right: -80px;
  top: 125px;

  path {
    fill:var(--color-accent);
  }
}

@media screen and (max-width: 900px) {
  .boomerang, .shoe {
    display: none;
  }
}

.chart {
  height: 100%;
  min-height: 780px;
  border-radius: 8px;
  overflow: hidden;
}