:root {
  --color1: #323e43;
  --color2: #8beacf;
}

body {
  background-color: var(--color1);
  color: var(--color2);
  margin: 0;
  /*center*/
  display: grid;
  place-items: center;

}

#header {
  max-width: 100vw;
}

#counter {
  margin: 1em;
}

#blogposts-wrapper {
  /*center*/
  display: grid;
  place-items: center;

  max-width: 40%;
}

#blogposts-wrapper>* {
  padding: 0.5em 1.8em;
  margin: 10px;
  /*bordered*/
  border: thin solid;

  max-height: 22em;
  overflow: hidden;

  &:hover {
    max-height: none;
  }
}

a {
  font-size: x-small;
  color: rgb(from var(--color2) r g b / 60%);

  &:hover {
    color: var(--color2)
  }
}

#new-post-form {
  display: grid;
  padding: 0.8em;
  margin: 0.3em;
  background-color: rgb(from lightgreen r g b / 10%);

  &>* {
    margin: 0.5em;
    background-color: lightgreen;
    border: green dotted 0.1px;
  }
}