:root {
  --font: Arial, Helvetica, sans-serif;
  --primaryColor: #000000;
  --primaryBg: #ffffff;
  --accentBg: #aaaaaa;
  --spacing-2: 0.5rem;
  --defaultTransition: 200ms linear background-color;
  --shadow-md: var(--accentBg) 1px 1px 4px;
}

html {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  height: 100%;
  display: flex;
  flex-direction: column;
}

header {
  display: flex;
  justify-content: space-between;
  box-shadow: var(--shadow-md);
  a {
    text-decoration: none;
    color: inherit;
    display: inline-block;
    padding: var(--spacing-2);
    &.active {
      background-color: var(--accentBg);
    }
    &:hover,
    &:focus {
      background-color: var(--accentBg);
    }
    transition: var(--defaultTransition);
  }
  ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
  }
}

main {
  flex: 1;
  padding-inline: var(--spacing-2);
}

footer {
  padding: var(--spacing-2);
  text-align: center;
  box-shadow: var(--shadow-md);
}

.posts {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}