button { cursor: pointer; }

.header {
  padding: 30px; margin: -10px;
  margin-top: -130px;
  display: grid; grid-template-columns: repeat(2, 1fr);
  background: linear-gradient(#7b96c9, #c5d1e8);
  width: 97%; padding-top: -112px;
  position: fixed;
}
.header > div > a { color: black; text-decoration: none; width: auto;}
.header > div > a:hover { color: #7d324c; text-decoration: underline; }

.new, .new_post{
  width: 97.8%;
  padding: 30px; margin-left: -20px; margin-top: 120px; margin-bottom: 20px;
  background-color: #d49bba;
}

.new { display: grid; grid-template-columns: repeat(2, 1fr); }
.new > h2 { margin: 0; }
.new > form { direction: rtl; }
.new > form > div > button, .new_post > div > button, .new_post > div > a { background-color: #7bbd57; padding: 5px; }
.new > form > div > button:hover, .new_post > div > button:hover, .new_post > div > a:hover { background: linear-gradient(#7b96c9, #577bbd); padding: 5px; }
.new > form > div > input { padding: 5px; }

.new_post { display: flex; gap: 20px; }
.new_post > textarea { width: 70%; }
.new_post > div { display: flex; flex-direction: column; gap: 10px; margin-left: 80px; }
.new_post > div > a { border: 2px solid black; text-decoration: none; text-align: center; color: black; font-size: 10pt; font-family: sans-serif; }

.post { width: 60%; background-color: #ebfcd4; border: 5px solid #7bbd57; border-radius: 20px; padding: 20px; }
.post > div { width: 100%; }

.menu > form:first-of-type > button { font-size: 18pt; background-color: inherit; border: none; }
.menu > form:nth-of-type(n+2) > button { background-color: #7bbd57; border-radius: 10px; width: 35px; height: 35px;}
.menu > form:first-of-type > button:hover { color: #7d324c; text-decoration: underline; }
.menu > form:nth-of-type(n+2) > button:hover { background: linear-gradient(#7b96c9, #577bbd); }

.green_button { background-color: #7bbd57; border-radius: 10px; }
.green_button:hover { background: linear-gradient(#7b96c9, #577bbd); }

.comments {
  width: 60%;
  margin-left: 14%; padding: 30px; margin-top: 30px;
  display: flex; flex-direction: column; gap: 30px;
  background-color: #d1dde6;
  border: 2px solid #8f8f8f; border-radius: 20px;
}

.comment > div > div > form > button, .comments > form > div > button, .update_comment > div > button, .back { background-color: #7bbd57; }
.comment > div > div > form > button:hover, .comments > form > div > button:hover, .update_comment > div > button:hover, .back:hover { background: linear-gradient(#7b96c9, #577bbd); }

.comments > form, .update_comment { display: flex; gap: 20px; border-radius: 20px; padding: 30px; }
.comments > form {  background-color: #c5d1e8; border: 2px solid #7b96c9; }
.comments > form > textarea, .update_comment > textarea { width: 70%; }
.comments > form > div, .update_comment > div { display: flex; flex-direction: column; gap: 10px; }
.comments > form > div > button { padding: 5px; }

.message { font-size: 15pt; }
.comment { width: 92%; background-color: #f2e1eb; border: 5px solid #d49bba; border-radius: 20px; padding: 20px;  display: flex;}
.comment > form > button { font-size: 18pt; background-color: inherit; border: none; }
.comment > form > button:hover { color: #7d324c; text-decoration: underline; }
.comment > div > div > form > button { border-radius: 10px; width: 35px; height: 35px; }

.update_comment { width: 60%; background-color: #f2e1eb; margin: 30px; margin-left: 14%; border: 5px solid #d49bba; }

.back { font-size: 13pt; padding: 10px; margin-bottom: 20px; border-radius: 20px; }

.user {
  display: grid; grid-template-columns: repeat(2, 1fr) 50px; gap: 20px;
  width: 50%;
  font-size: 14pt;
  margin-left: 7%; padding: 10px;
  background-color: #c1e3a8;
  border: 4px solid #488042; border-radius: 15px;
}

.user > form:first-of-type > button { font-size: 14pt; background-color: inherit; border: none; }
.user > form:last-of-type > button { background-color: #7bbd57; padding: 5px; }
.user > form:first-of-type > button:hover { color: #7d324c; text-decoration: underline; }
.user > form:last-of-type > button:hover { background: linear-gradient(#7b96c9, #577bbd); }