.parent {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
}

.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 5 / 6; }
.div3 { grid-area: 2 / 1 / 3 / 2; }
.div4 { grid-area: 3 / 1 / 4 / 2; }
.div5 { grid-area: 4 / 1 / 5 / 2; }
.div6 { grid-area: 5 / 1 / 6 / 2; }
.div7 { grid-area: 5 / 2 / 6 / 3; }
.div8 { grid-area: 5 / 3 / 6 / 4; }
.div9 { grid-area: 5 / 4 / 6 / 5; }
.div10 { grid-area: 5 / 5 / 6 / 6; }

.body {
  background-color: #0F0B33;
	background-size: cover;
  font-size: 18px;
  font-family: Luminari, fantasy;
  margin: 0;
  padding: 0;
}

.layout {
  width: 100%;

  display: grid;
  grid:
    ". body body body body" 1fr
    ". body body body body" 1fr
    ". . . . ." 1fr
    / 1fr 1fr 1fr 1fr 1fr;
  gap: 8px;
}

p {
  color: #171105;
  line-height: 1em;
}

hr {
  border: solid #171105;
  border-width: 2px;
}

img {
  max-width: 100%;
  height: auto;
  margin-top: 0;
  margin-bottom: 0;
}
.right {
  float: right;
  margin-left: 1em;
}
.left {
  float: left;
  margin-right: 1em;
}
.center {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.caption {
  margin-top: 0;
  font-size: 0.9em;
  font-style: italic;
}

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

h1, h2, h3, h4, h5 {
  font-family: Luminari, Fantasy;
  color: #171105
}

#container {
  margin: 0;
  width: 90%;
	max-width: 700px;
	background-color: #f1e3c9;
  color: #151515; 
  outline-width: 0;
  outline-offset: 0;
}