@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Lato');

* {
  box-sizing: border-box;
}

body {
  margin: 0;

  font-family: 'Lato', sans-serif;

  background-color: rgb(40, 40, 50);
  color: rgb(230, 230, 230);
}

/* remove default styling from some common tags */
h1 { all: unset; display: block; }
h2 { all: unset; display: block; }
h3 { all: unset; display: block; }

a { text-decoration: none; }




/* ---------------------------------- */
/* Navigation bar                     */
/* ---------------------------------- */

#nav {
  position: fixed;
  top: 0em;
  width: 100%;

  display: flex;
  flex-wrap: wrap;
  align-items: center;

  background-color: rgb(10, 10, 10);
}

#nav a, #nav .version {
  display: block;

  padding: 0.2em 0.7em 0.3em 0.7em;

  border-bottom-style: solid;
  border-bottom-width: 0.2em;
  border-bottom-color: rgba(0, 0, 0, 0);
  padding-bottom: 0.1em;
}

#nav a {
  font-family: 'Open Sans Condensed', sans-serif;
  text-transform: uppercase;
  color: rgb(254, 254, 254);
}

#nav a.home {
  color: rgb(208, 208, 254);
}

#nav a:hover {
  border-bottom-color: rgb(208, 208, 254);
  background-color: rgba(250, 250, 250, 0.2);
}

#nav .version {
  font-size: 0.8em;
  font-style: italic;
  color: #889;
}

#nav .spacer {
  flex-grow: 1;
}



/* ---------------------------------- */
/* Cover image and title text         */
/* ---------------------------------- */

#cover {
  height: 55vh;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;

  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

#cover-title {
  color: rgb(254, 254, 254);
  background-color: rgba(30, 30, 70, 0.8);
}

#cover-title h1 {
  margin: 0; /* remove default margin in Edge */

  font-family: 'Open Sans Condensed', sans-serif;
  text-transform: uppercase;
  font-size: 4rem;
  font-weight: bold;
}

#cover-title h2 {
  margin: 0; /* remove default margin in Edge */

  font-family: 'Open Sans Condensed', sans-serif;
  text-transform: uppercase;
  font-size: 3rem;
  font-weight: bold;
}

#cover-title h3 {
  margin: 0; /* remove default margin in Edge */

  padding-bottom: 1em;
  font-size: 1.2rem;
  font-weight: normal;

  color: rgb(222, 222, 254);
}


/* ---------------------------------- */
/* Body content                       */
/* ---------------------------------- */

.content-width, 
.content-section {
  max-width: 60rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.content-section {
  padding-top: 1em;
  padding-bottom: 1em;
}

.content-section a {
  text-decoration: underline;
  color: rgb(180, 180, 254);
}

em {
  font-style: inherit;  /* adopt italic/non-italic nature of surrounding text */
  font-weight: lighter;
  color: rgb(150, 200, 254);
}




/* ---------------------------------- */
/* Footer                             */
/* ---------------------------------- */

#footer {
  margin-top: 2em;
  padding: 1em;

  background-color: rgb(20, 20, 20);

  font-size: 0.8rem;
  font-style: italic;
  color: rgb(80, 80, 100);
  text-align: center;
}


/* ---------------------------------- */
/* Layout for narrow viewpoints       */
/* ---------------------------------- */

@media only screen and (max-width: 40rem) {
  #cover-title {
    text-align: center;
  }

  #cover-title h1 {
    font-size: 3rem;
  }
}