body {
  max-width: 1000px;
  margin: 0 auto;
  color: var(--text-fg);
}

* {
  /* border: 1px red solid; */
}

.grid-content {
  /* max-width: 1200px; */
  height: 100%;
  display: grid;
  margin: 0 20px;
  /* margin-right: 25%; */
  column-gap: 20px;
  row-gap: 20px;
  grid-template:
    "aside header"
    "aside main" /
    1fr 2fr;
}

@media (max-width: 800px) {
  .grid-content {
    grid-template:
      "aside"
      "header"
      "main" /
      1fr;
  }
}

aside,
header {
  background-color: white;
  border-radius: 20px;
}

aside {
  grid-area: aside;
  max-height: calc(100vh - 80px);
  padding: 0 10px;
}

#blog-tags {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.5em;
}

input {
  /* appearance: none; */
  display: none;
}

#blog-tags label {
  background-color: lightpink;
  border-radius: 20px;
  border: 2px transparent solid;
  padding: 0.4em 0.8em;
}

#blog-tags label:has(input:checked) {
  background-color: #5BDEFA;
}

#blog-tags label:hover {
  border: 2px red solid;
}

#blog-tags label::before {
  content: "#";
}

header {
  grid-area: header;
  padding: 10px 20px;
}

main {
  grid-area: main
}

header,
aside,
article,
.blog-status {
  background-color: white;
  border-radius: 20px;
  box-shadow: 3px 4px #aaa;
}

.blog-status {
  background-color: var(--index-bg);
  margin: 10px 0px;
  padding: 1px 20px;
  border-radius: 20px;
  box-shadow: 3px 4px #aaa;
}

.blog-status h3 {
  margin-bottom: 0;
}

.blog-status p {
  margin-top: 0;
  box-sizing: border-box;
  background-color: #9BfEFA;
  border: 1px red solid;
  border-radius: 20px;
  padding: 0.5em 0.8em;
}

article {
  /* border: 3px lightpink solid; */
  /* border-radius: 20px; */
  /* margin: 20px 0; */
  padding: 5px 20px;
}

.post-details {
  display: flex;
  justify-content: space-between;
  border-bottom: 6px lightpink dotted;
}

.post-content p {
  /* padding: 5px 20p; */
  /* background-color: var(--index-bg); */
  /* border-radius: 20px; */
  /* padding: 10px; */
  padding-bottom: 20px;
  border-bottom: 6px lightpink dotted;
}