/* system layout */
html {
  box-sizing: border-box;
  margin: 0 auto;
  font-size: 20px;
}

*,
::before,
::after {
  box-sizing: inherit;
}

a {
  color: inherit;
}

body {
  font: normal 1em Arial, sans-serif;
  min-width: 800px;
  /* max-width: 3600px; */
}

header {
  width: 100%;
}

main {
  width: 95%;
  margin: 0 auto;
  padding: 0 0;
}

footer {
  width: 100%;
}

/* banner */
.banner {
  width: 100%;
  height: auto;
  
  background: url('../image/cube-1472804_1280.png') no-repeat 100%;
  background-size: 100% auto;
  filter: brightness(1.08);

  padding: 0.4em 0 0.4em 10%;
  margin: 0 auto;

  font-weight: bold;
  font-size: 3.3em;

  text-decoration: none;
  color: #000000;
  border-bottom: 4px solid black;
}

.banner p {
  margin: 0 auto;
}

/* navigation */
nav ul {
  width: 100%;
  margin: .1em 0 3em 0;
  padding: 0 0 0 0;

  display: flex;
  flex-direction: row;
  list-style-type: none;

  border-bottom: 4px solid;
}

nav li {
  width: 100%;
  margin: .1em 1em;
  padding: .3em .4em .3em .4em;
  flex: 1 1 0%;

  background-color: #e1e1e1;
  color: black;
  font-size: 1.2em;
}

nav li:hover {
  background-color: #004080;
  color: white;
}

/* closing words */
.closing {
  width: 100%;
  height: auto;
  background: white;
  margin-top: 4em;
  padding: 1em 5% 1em 5%;
  color: black;
  border-top: 4px solid;
}

.closing p {
  margin: 0 auto;
}