/* Global */
* {
  box-sizing: border-box;
}

body, html {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
  background-color: #063643; /* matches main content border */
  background-image: url("images/header-bg.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

/* Header */
#header {
  background-color: #063643;
  color: #D8CE9C;
  opacity: 90%;
  padding: 20px;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 3;
}

.header-inner {
  max-width: 1100px;
  margin: auto;
  text-align: center;
}

/* Main content area */
.main {
  max-width: 1000px;
  min-height: 500px;
  margin: 100px auto 0px auto; /* top margin = space for header + top tile, bottom margin = space for bottom tile */
  padding: 2em;
  background-color: #259B9D;
  border: 2px solid #133F40;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  border-radius: 4px;
  position: relative;
}