/* Minecraft font */
 @font-face { font-family: seven; src: url("./assets/seven.ttf"); }

.pagetitle{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

/* Header text for page title only! */
h1 {
  color: white;
  text-align: center;
  font-family: seven, sans-serif;
}

/* Sign graphic for navigation bar */
.nav {
  width: 93.75%;
  margin: auto;
  background: brown url("./assets/oak_sign.webp") repeat-x;
  height:96px;
  line-height:84px;
  color: black;
  font-family: seven, sans-serif;
  font-size:32px;
}

.nav ul { list-style: none; }

.nav li{
  float: left;
  padding-left: 32px;
  padding-right: 32px;
}

/* Trying to make my page look like an amethyst geode! */

/* Body (outermost) - smooth basalt */
body {
  background: grey url("./assets/smooth_basalt.webp") repeat;
  background-size: 64px;
  color: black;
  font-family: Georgia, serif;
}

/* Container (outer border) - calcite */
.container {
  width: 93.75%;
  margin: auto;
  margin-top: 32px;
  margin-bottom: 96px;
  background: white url("./assets/calcite.webp") repeat;
  background-size: 64px;
  min-height: 1rem;
}

/* reset h1 to normal for the rest of the page! */
.container h1{
  color: black;
  text-align: start;
  font-family: Georgia, serif;
}

/* Content Border (inner border) - amethyst */
.contentborder {
  width: 93.75%;
  margin: auto;
  margin-top: 1rem;
  margin-bottom: 1rem;
  background: darkviolet url("./assets/amethyst.webp") repeat;
  background-size: 64px;
  min-height: 1rem;
}

.content {
  width: 95%;
  margin: auto;
  /*margin-left: 32px;*/
  /*margin-right: 32px;*/
  /*margin-top: 32px;*/
  /*margin-bottom: 32px;*/
  padding: 8px;
  /*border-image: url("./assets/amethyst_border.png");*/
  /*border-image-slice: 160;*/
  /*border-image-repeat: round;*/
  /*border-width:32px;*/
  /*border-style:solid;*/
  background-color: plum;
}


/* Header: subheading space within upper calcite layer */
.headerdiv {
  width: 100%;
  margin: auto;
}

.headerdiv h1 {
  text-align:center;
  color:darkviolet;
  padding: 16px;
}

.headerdiv ul {
  list-style: none;
  margin-bottom: 4rem;
}

.headerdiv li{
  float: left;
  padding-left: 32px;
  padding-right: 32px;
  font-family: seven, sans-serif;
  font-size:28px;
  color:indigo;
}


/* Footer: extra stuff to go in the lower calcite layer (eg. buttons?) */
.footerdiv {
  text-align:center;
  color:black;
  padding: 8px;
}

img {
  max-width: 100%;
  height: auto;
}

/* Flex box for side by side images */
.row {
  display: flex;
}

.column {
  flex: 33.33%;
  padding: 5px;
}

hr{
  color:indigo; border-style:solid;
}