body {
  margin: 0;
}

.container {
  font-family: Helvetica;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 100px;
  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;
  white-space: pre-line;
}

.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;
}

.error {
  border: 1px solid red;
  animation: pulse 0.5s;
}

@keyframes pulse {
  0% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.5;
  }
}

.loading {
  text-align: center;
  padding: 40px;
  color: #ffffff;
  font-size: 18px;
}

.error {
  text-align: center;
  padding: 40px;
  color: #ff6b6b;
  font-size: 18px;
  background: rgba(255, 107, 107, 0.1);
  border-radius: 10px;
}

.add-form-button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
  opacity: 0.7;
}

.add-form-button:disabled:hover {
  opacity: 0.7;
}