body {
    margin: 0;
  }

  .container {
    font-family: Helvetica;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 80px;
    padding-bottom: 200px;
    background: #202020;
    min-height: 100vh;
  }

  .comments,
  .comment {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .comment,
  .add-form {
    width: 596px;
    box-sizing: border-box;
    background: radial-gradient(
      75.42% 75.42% at 50% 42.37%,
      rgba(53, 53, 53, 0) 22.92%,
      #7334ea 100%
    );
    filter: drop-shadow(0px 20px 67px rgba(0, 0, 0, 0.08));
    border-radius: 20px;
  }

  .comments {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .comment {
    padding: 48px;
  }

  .comment-header {
    font-size: 16px;
    display: flex;
    justify-content: space-between;
  }

  .comment-footer {
    display: flex;
    justify-content: flex-end;
  }

  .comment-body {
    margin-top: 32px;
    margin-bottom: 32px;
  }

  .comment-text {
    font-size: 32px;
  }

  .likes {
    display: flex;
    align-items: center;
  }

  .like-button {
    all: unset;
    cursor: pointer;
  }

  .likes-counter {
    font-size: 26px;
    margin-right: 8px;
  }

  .like-button {
    margin-left: 10px;
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='20' viewBox='0 0 22 20' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M11.11 16.9482L11 17.0572L10.879 16.9482C5.654 12.2507 2.2 9.14441 2.2 5.99455C2.2 3.81471 3.85 2.17984 6.05 2.17984C7.744 2.17984 9.394 3.26975 9.977 4.75204H12.023C12.606 3.26975 14.256 2.17984 15.95 2.17984C18.15 2.17984 19.8 3.81471 19.8 5.99455C19.8 9.14441 16.346 12.2507 11.11 16.9482ZM15.95 0C14.036 0 12.199 0.882834 11 2.26703C9.801 0.882834 7.964 0 6.05 0C2.662 0 0 2.6267 0 5.99455C0 10.1035 3.74 13.4714 9.405 18.5613L11 20L12.595 18.5613C18.26 13.4714 22 10.1035 22 5.99455C22 2.6267 19.338 0 15.95 0Z' fill='%23BCEC30' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
  }

  .-active-like {
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='20' viewBox='0 0 22 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.95 0C14.036 0 12.199 0.882834 11 2.26703C9.801 0.882834 7.964 0 6.05 0C2.662 0 0 2.6267 0 5.99455C0 10.1035 3.74 13.4714 9.405 18.5613L11 20L12.595 18.5613C18.26 13.4714 22 10.1035 22 5.99455C22 2.6267 19.338 0 15.95 0Z' fill='%23BCEC30'/%3E%3C/svg%3E");
  }

  .add-form {
    padding: 20px;
    margin-top: 48px;
    display: flex;
    flex-direction: column;
  }

  .add-form-name,
  .add-form-text {
    font-size: 16px;
    font-family: Helvetica;
    border-radius: 8px;
    border: none;
  }

  .add-form-name {
    width: 300px;
    padding: 11px 22px;
  }

  .add-form-text {
    margin-top: 12px;
    padding: 22px;
    resize: none;
  }

  .add-form-row {
    display: flex;
    justify-content: flex-end;
  }

  .add-form-button {
    margin-top: 24px;
    font-size: 24px;
    padding: 10px 20px;
    background-color: #bcec30;
    border: none;
    border-radius: 18px;
    cursor: pointer;
  }

  .add-form-button:hover {
    opacity: 0.9;
  }