@keyframes rotating {
    from {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(30deg);
    }
    75% {
        transform: rotate(-30deg);
    }
    to {
        transform: rotate(0deg);
    }
}

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;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: space-between;
}

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

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

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

.like-button,
.del-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");
}

.-loading-like {
    animation: rotating 2s linear infinite;
}

.del-button {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Capa_1' fill='%23BCEC30' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='22px' height='22px' viewBox='0 0 774.266 774.266' style='enable-background:new 0 0 774.266 774.266;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath d='M640.35,91.169H536.971V23.991C536.971,10.469,526.064,0,512.543,0c-1.312,0-2.187,0.438-2.614,0.875 C509.491,0.438,508.616,0,508.179,0H265.212h-1.74h-1.75c-13.521,0-23.99,10.469-23.99,23.991v67.179H133.916 c-29.667,0-52.783,23.116-52.783,52.783v38.387v47.981h45.803v491.6c0,29.668,22.679,52.346,52.346,52.346h415.703 c29.667,0,52.782-22.678,52.782-52.346v-491.6h45.366v-47.981v-38.387C693.133,114.286,670.008,91.169,640.35,91.169z M285.713,47.981h202.84v43.188h-202.84V47.981z M599.349,721.922c0,3.061-1.312,4.363-4.364,4.363H179.282 c-3.052,0-4.364-1.303-4.364-4.363V230.32h424.431V721.922z M644.715,182.339H129.551v-38.387c0-3.053,1.312-4.802,4.364-4.802 H640.35c3.053,0,4.365,1.749,4.365,4.802V182.339z'/%3E%3Crect x='475.031' y='286.593' width='48.418' height='396.942'/%3E%3Crect x='363.361' y='286.593' width='48.418' height='396.942'/%3E%3Crect x='251.69' y='286.593' width='48.418' height='396.942'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  width: 22px;
  height: 22px;
}

.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-name:not(:first-child) {
  margin-top: 12px;
}

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

.add-form-row {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

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