/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  color: black;
  font-family: 'Times New Roman', Times, serif;
  margin: 0;
  padding: 0;
  background-color: #000;
  background-image: url('/backgrounds/stars2.png');
  background-attachment: fixed;
}

/* NAV */

nav {
  overflow-x: hidden;
}

nav ul {
  padding: 0;
}

nav ul > li {
  list-style-type: none;
  background: #642;
  padding: 3px;
  border-radius: 3px;
  color: white;
  display: inline-block;
  margin: 3px;
}

nav a,
nav a:visited {
  display: inline-block;
  width: 120px;
  text-decoration: none;
  color: white;
}

/* rearrange things on screens that are large enough to have the nav and content
 * side-by-side */
@media only screen and (min-width: 600px) {
  nav {
    position: fixed;
    height: 100%;
    border-right: 2px solid #444;
    width: 120px;
    background: url('/paisley_120.jpg'), #464;
    background-blend-mode: multiply;
  }

  nav ul > li {
    display: block;
  }

  .content {
    position: absolute;
    left: 120px;
  }
}

/* CONTENT */

.content {
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 100px;
  max-width: 900px;
  background-color: #e0ffcc;
  border: 6px solid #042;
  box-shadow: 2px 2px inset #ff8, -2px -2px inset #ff8;
}

.content.bordered {
  border: 4px solid #98f;
  padding: 2em;
  box-sizing: border-box;
  max-width: 900px;
  margin: 100px 0;
  display: block;
  background: #e8f0ff;
}


h1, h2, h3 {
  color: #642;
  border-bottom: 1px solid gray;
}

h2:before {
  content: '❖ ';
  font-size: 0.8em;
  color: #b65;
}

blockquote {
  margin: 0;
  padding: 0.5em;
  background: #0c02;

  font-size: 1.1rem;
  font-style: italic;
}

.frame {
  background-color: #642;
  padding: 6px;
}

.right {
  float: right;
  margin-left: 12px;
}

.center-text {
  text-align: center;
}

.block {
  display: block;
  /* padding-left: 1em; */
  /* max-width: 400px; */
}