.tokenomics {
  width: 100%;
  background-color: #ffc634;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;

  flex-direction: column;

  padding: 40px 80px;
}

.tokenomics .text-wrapper {
  -webkit-text-stroke: 4px #000000;
  font-family: "Bangers", Helvetica;
  font-weight: 400;
  color: #ed3a23;
  font-size: 90px;
  letter-spacing: 1.8px;
  line-height: 85.5px;

  word-wrap: break-word;
  width: 100%;
  text-align: center;
}

.tokenomics .wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;

  flex-wrap: wrap;
}

.tokenomics .wrapper .controls {
  display: flex;
  gap: 20px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  flex: 1;
}

.tokenomics .wrapper .controls-left {
  align-items: flex-start;
}

.tokenomics .wrapper .controls-right {
  align-items: flex-end;
}

.tokenomics .wrapper .controls .image {
  width: 190px;
  cursor: pointer;
}

.tokenomics .wrapper .diagram {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tokenomics .wrapper .diagram .image {
  height: 100%;
  width: auto;
}

.tokenomics .ton-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  width: 100%;
  justify-content: center;
}

.tokenomics .ton-wrapper .img {
  position: relative;
  width: 60px;
  height: 60px;
}

.tokenomics .ton-wrapper .text-wrapper {
  position: relative;
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: #000000;
  font-size: 20px;
  letter-spacing: -0.8px;
  line-height: 26px;
  word-wrap: break-word;
  -webkit-text-stroke: 0;

  /* flex: 1; */
  width: fit-content;
  max-width: calc(100% - 60px - 28px - 32px);
}

.tokenomics .ton-wrapper .edit-copy {
  position: relative;
  width: 28px;
  height: 28px;
  cursor: pointer;
}

@media (max-width: 1242px) {
  .tokenomics {
    gap: 60px;
    padding: 80px 16px;
  }

  .tokenomics .wrapper {
    gap: 20px;
  }

  .tokenomics .wrapper .diagram {
    flex: none;
    max-height: none;
    order: 3;
    width: 100%;
  }

  .tokenomics .wrapper .diagram .image {
    width: 100%;
    height: auto;
    max-width: 600px;
  }

  .tokenomics .wrapper .controls-left {
    order: 1;
    align-items: flex-end;
  }
  
  .tokenomics .wrapper .controls-right {
    order: 1;
    align-items: flex-start;
  }
}

@media (max-width: 432px) {
  .tokenomics .wrapper .controls-left {
    align-items: center;
  }
  
  .tokenomics .wrapper .controls-right {
    align-items: center;
  }
}

.shaking {
  animation: tilt-shaking 0.3s infinite;
}

@keyframes tilt-shaking {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(5px, -5px) rotate(5deg); }
  50% { transform: translate(0, 0) rotate(0eg); }
  75% { transform: translate(5px, -5px) rotate(-5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}