* {
  border-radius: 1vmax;
}

body {
  display: flex;
  flex-flow: column;
  gap: 1vmax;

  font-family: Tahoma;
  text-align: center;

  color: #fff;
  background-color: #9df;
  background: url(media/fort.png) center fixed no-repeat, linear-gradient(#9df, #8cf) center fixed no-repeat, #9df;
  background-size: cover;

  padding: 0.5vmax;
}

header {
  display: flex;
  flex-flow: column;
  gap: 1vmax;
  flex: 1;

  background-color: #c84c;
  background-size: contain;

  padding: 0.5vmax;
}

#middle {
  display: flex;
  gap: 1vmax;
  flex: 6;
}

.spacer {
  flex: 0;
}

nav {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 1vmax;
  flex: 1;

  background-color: #8428;
  background: url(media/wall.png), #8428;
  background-size: 100%;

  padding: 0.5vmax;
}

a {
  display: flex;
  justify-content: center;
  /* align-self: center; */

  background-color: #3108;
  border: 0.5vmax #c64;
  border-style: none solid;
  color: #fff;
  text-decoration: none;

  padding: 0.5vmax;
}

a:hover {
  background-color: #c64;
}

main {
  display: flex;
  flex-flow: column;
  align-items: start;
  gap: 1vmax;
  flex: 6;

  text-align: left;

  background: url(media/paper.png) center;
  background-size: cover;

  padding: 1vmax;
}

article {
  display: flex;
  flex-flow: column;

  gap: 1vmax;

  padding: 0.5vmax;
}

article > img {
  align-self: center;
}

table, th, td {
  align-self: center;

  border: 0.0625vmax solid #fff;
  border-collapse: collapse;
  text-align: center;

  padding: 0.375vmax;
}

aside {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 1vmax;
  flex: 1;

  background-color: #8428;
  background: url(media/wall.png), #8428;
  background-size: 100%;

  padding: 0.5vmax;
}

aside > * {
  display: flex;
  background-color: #421;

  padding: 0.5vmax;
}

footer {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 1vmax;
  flex: 1;

  background-color: #8648;
  background: url(media/steps.png) center, #8648;
  background-size: cover;

  padding: 0.5vmax;
}