:root {
  --background-color: white;
  --text-color: #363737;
  --accent-color: #67A0FC;
}

body {
  padding: 1em;
  color: var(--text-color);
  background-color: var(--background-color);
  font-family: "Georgia", "Lora", "Times", serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-size: 12px;
}
h1, h2, h3, h4, h5, h6, p, ul {
  margin: 0;
}
h1, h2 {
  font-family: "Lora", "Times", serif;  
  font-weight: 400;
}

a:link, a:visited {
  color: var(--accent-color);
}

h1 > a:link, h2 > a:link, h1 > a:visited, h2 > a:visited, footer a:visited, footer a:link {
  color: var(--text-color);
}

a:hover, h1 > a:hover, h2 > a:hover, footer a:hover {
  color: #A1C5FF;
}

a:active, h1 > a:active, h2 > a:active, footer a:active {
  color: #eef4ff;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 4em;
  
}

input {
  border-radius: 0px;
  padding: .5em 1em;
  border: 1px solid var(--text-color);
  height: 100%;
}

input:focus {
  outline: none;
  border: 1px solid var(--accent-color);
}

input[type=submit] {
  border: none;
  color: white;
  background-color: var(--accent-color);
}

input[type=submit]:hover {
  background-color: #A1C5FF;
}

input[type=submit]:active {
  background-color: #eef4ff;
}

#container {
  width: 100%;
  display: grid;
  grid-template-columns: 1;
  max-width: 400px;
  gap: 4em;
}

header {
  margin-bottom: 4em;
}

nav {
  display: grid;
  grid-template-columns: 1;
  gap: 1em;
}

nav > h1 {
  margin: 0;
}

footer {
  margin-top: auto;
  padding-bottom: 1em;

}

footer ul {
  list-style: none;
  padding: 0px;
  display: flex;
  flex-direction: column;
  gap: 2em;
}

footer ul div {
  display: grid;
  grid-template-columns: 1;
  gap: .5em;
}
footer ul li {
  width: 100%;
  text-align: center;
}

.section {
  display: grid;
  grid-template-columns: 1;
  gap: 1em;
}

.section > ul {
  padding: 0 1em;
}

.section > div {
  display: grid;
  grid-template-columns: 1;
  gap: 2em;
}

.section > div > article {
  display: grid;
  grid-template-columns: 1;
  gap: .5em;
}

#toc {
  display: grid;
  grid-template-columns: 1;
  gap: 1em;
}

#post {
  display: grid;
  grid-template-columns: 1;
  gap: 2em;
}

#post > #intro {
  padding: 1em;
  border: 1px solid var(--text-color);
}

#post > #content {
  display: grid;
  grid-template-columns: 2;
  gap: 2em;
}

#post > #content > p:first-of-type::first-letter {
  font-size: 2.5em;
  font-family: "Lora", "Times", "serif";
  font-weight: 500;
}

footer > ul > div:first-of-type > li:first-of-type {
  font-family: "Lora", "Times", "serif";
  font-weight: 500;
}

.newsletter {
  background-color: blue;
}

.accent {
  color: var(--accent-color);
}
@media screen and (min-width: 768px) {

  body {
    font-size: 16px;
    padding: 2em;
  }

  footer > ul {
    flex-direction: row;
  } 
  footer > ul > div {
    width: 33%
  }

  #container {
    max-width: 700px;
  }

}

@media screen and (min-width: 1100px) {
  #container {
    max-width: 900px;
  }

}