body {
  background-color: rgb(238, 237, 237);
  padding-bottom: 40px;
  padding-top: 94px;
}

.notice_card {
  background-color: rgb(29, 149, 29);
  z-index: 300;
  padding: 10px;
  border-radius: 5px;
  color: white;
  position: fixed;
  font-size: 1.0rem;
  top: 20px;
  right: 50%;
  display: none;
  transform: translateX(50%);
  animation: slideDown 0.6s ease forwards;
  transition: all 0.3s ease;
}

.notice_card.show {
  display: block;
}

@keyframes slideDown {
  from {
    transform: translate(50%, -200px);
  }
}

.container {
  background-color: rgb(255, 255, 255);
  height: 100vh;
  overflow-y: scroll;
  scrollbar-width: none;
}

.top {
  background-color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 94px;
  position: fixed;
  right: 0;
  left: 0;
  z-index: 100;
  padding: 15px 20px;
  top: 0;
}

.top h2 {
  color: rgb(197, 193, 193);
  font-size: 1.28rem;
}

.close_btn {
  color: green;
  background-color: transparent;
  border: none;
  padding: 5px 8px;
  font-size: 1.0rem;
  font-weight: 500;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.close_btn:hover {
  background-color: rgba(255, 255, 255,.2);
}

.comments_container {
  margin: 10px 8px;
  background-color: rgb(255, 255, 255);
  border-radius: 8px;
  column-gap: 15px;
  row-gap: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.comment {
  display: flex;
  flex-direction: column;
  background-color: rgb(255, 255, 255);
  padding: 8px;
  border-radius: 6px;
  font-size: 1.0rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
}

.top_card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.profile {
  display: flex;
  align-items: center;
  padding: 5px;
  gap: 8px;
}

.image_card {
  width: 35px;
  height: 35px;
  background-color: rgba(2, 7, 46,.7);
  font-weight: 600;
  color: white;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  display: flex;
  font-size: 1.0rem;
}

.name a {
  color: hsla(0, 0%, 20%, 0.7);
  font-weight: 500;
  font-size: 0.96rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.name a:hover {
  color: rgba(2, 7, 46,.9);
  text-decoration: underline;
  font-size: 0.98rem;
}

.role {
  color: hsl(357, 92%, 10%);
  font-size: 0.96rem;
  font-weight: 500;
}

.middle_text_card {
  padding: 2px 3px;
  color: hsl(0, 0%, 20%);
  margin: 10px 2px;
  margin-bottom: 40px;
}

.date_card {
  padding: 8px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.reactions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.like, .dislike {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
}

.tooltip {
  position: absolute;
  bottom: 125%;
  padding: 5px 8px;
  border-radius: 8px;
  display: none;
  transition: all 0.3s ease;
  font-size: 1.0rem;
  background-color: hsla(0, 1%, 23%, 0.8);
  color: rgb(232, 228, 228);
}

.like:hover .tooltip, .dislike:hover .tooltip {
  display: block;
}

#like_btn, #dislike_btn, .show_replies_btn {
  border: none;
  font-size: 1.04rem;
  background-color: transparent;
  cursor: pointer;
  padding: 5px;
  transition: all .3s ease;
  color: hsla(0, 0%, 20%, 0.7);
}

.show_replies_btn {
  text-decoration: none;
  font-size: 1.0rem;
  margin-left: 10px;
}

#like_btn:hover, #dislike_btn:hover, .show_replies_btn:hover {
  background-color: hsla(0, 0%, 20%, 0.1);
  border-radius: 5px;
}

#like_btn.change_color, #dislike_btn.change_color {
  color: red;
  transition: all 0.3s ease;
  animation: growOut 0.8s ease forwards;
}

#dislike_btn.change_color {
  color: black;
}

@keyframes growOut {

  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(360deg) scale(1.5);

  }
}

.counter {
  font-size: 1.0rem;
  font-weight: 600;
}

.date {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.96rem;
  color: hsla(0, 0%, 0%, 0.4);
}

.date p:nth-of-type(1) {
  font-style: italic;
}

.empty_card {
  font-size: 1.0rem; 
  margin: 5px; 
}

.more_action_btn {
  position: relative;
}

.reply_delete {
  position: absolute;
  display: none;
  flex-direction: column;
  border-radius: 2px;
  box-shadow: 0 0 5px rgba(0,0,0,.2);
  right: 40px;
  width: 70px;
  font-size: 1.0rem;
  top: -30px;
  background-color: white;
  transition: all 0.3s ease;
}

.reply_delete.showCard {
  display: flex;
}

.reply_delete form {
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 100%;
}

.reply_delete button, .reply_link {
  background-color: transparent;
  border: none;
  font-size: 1.0rem;
  padding: 8px 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
  width: 100%;
}

.reply_link {
  text-decoration: none;
  color: black;
}

.reply_delete button:hover, .reply_link:hover {
  background-color: hsla(0, 0%, 20%, 0.1);
}

.more_action_btn .actions_btn_more {
  cursor: pointer;
  background-color: transparent;
  transition: all 0.3s ease;
  font-size: 1.04rem;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.more_action_btn .actions_btn_more:hover {
  background-color: hsla(0, 0%, 20%, 0.1);
}

footer {
  text-align: center;
  padding: 8px;
  position: fixed;
  bottom: 0;
  z-index: 100;
  left: 0;
  right: 0;
  background-color: rgb(2, 7, 46);
  height: 40px;
  justify-content: center;
  display: flex;
  align-items: center;
}

footer a {
  padding: 8px 10px;
  text-decoration: none;
  color: white;
  font-weight: 600;
  font-size: 1.0rem;
  transition: all 0.3s ease;
}

footer a:hover {
  color: green;
}

footer.active {
  display: flex;
}

@media (max-width: 768px) {
  .empty_card {
    text-align: center;
  }

  .comments_container {
    grid-template-columns: 1fr;
  }
}