/* root */
html, body {
  padding: 0;
  margin: 0 auto;

  max-width: 1000px;

  align: center;
  color: black;
  background-color: black;
}

/* fragments */
#banner {
  width: 100%;
  height: auto;
}

#calendar {
  width: 100%;
}

dfn {
  outline-color: grey;
  outline-style: dotted;
  outline-width: thin;
}

/* container */
main {
  background-color: white;
}

/* article */
article {
  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
  grid-gap: 2em;

  padding: 0 1em;
  margin: 1em 0;

  font-family: sans-serif;
}

article h2 {
  font-family: monospace;
}

section:before {
  content: attr(lang);
  display: block;

  padding: 0.3em;

  background-color: black;

  color: white;
  font-style: italic;
  font-family: serif;
  font-size: 0.7em;
  text-align: center;
}

section p {
  text-align: justify;
}

/* aside */
aside {
  padding: 0 1em;
  margin: 1em 0;
}

aside:before {
  content: "agenda";
  display: block;

  padding: 0.3em;
  margin: 1em 0;

  background-color: black;

  color: white;
  font-style: italic;
  font-family: serif;
  font-size: 0.7em;
  text-align: center;
}

footer {
  padding-bottom: 1em;

  color: black;
  font-family: monospace;
  text-align: center;
}

footer a  {
  color: inherit;
}