body { margin: 60px auto 100px; width: 70%; font-family: 'Lato', sans-serif;}

nav a { text-decoration: none; color: #999; }
nav a:hover { text-decoration: underline; }

a { color: #333; }

p, ul { font-size: 1.1em; line-height: 1.4em; color: #333 }
p { text-align: center; text-align: center;
max-width: 850px;
display: block;
margin: 20px auto;
}

.note {
    font-size: 0.95em;
    text-align: center;

margin-top: 10px;
}

h1, h2, h3, h4 { text-align: center; 
    font-family: 'Playfair Display', serif;
    margin-bottom: 0;
    padding: 0;
}
h1 { font-size: 3em;  }
h2 { font-size: 2.5em; margin-top: -5px;
font-weight: initial;
}
h3 { font-size: 2.3em; }
h4 { font-size: 1.9em; }

nav ul, footer ul { font-size: 1.5em; font-family: 'Helvetica', 'Arial', 'Sans-Serif'; padding: 0px; list-style: none; font-weight: bold; }
nav ul li, footer ul li { display: inline; margin-right: 20px; }

footer { border-top: 1px solid #d5d5d5; font-size: .8em; }

img[alt="me"] {
  border-radius: 50%;
    width: 100%;
    max-width: 400px;
}

img[alt="star"] {
    width: 40%;
    margin: 0 auto;
    display: block;
}

table {
  border-collapse: collapse;
  width: 100%;
}

table, th, td {
  border: 1px solid black;
  font-size: 1.05em;
  padding: 5px;
}

body {
  background: url(/night.svg);
  background-size: cover;
}

.container {
    background: #c1c0d2f2;
    outline: 5px solid #fffffff2;
    padding: 15px;
}

@media (max-width: 640px) {
    body { width: 85%;margin: 25px auto; }
      img[alt="star"] {
    width: 100%;
    }
    table  {   overflow-x: auto;
    display: block;
    border: 0;
    }
    h1 { font-size: 2.5em;  }
    h2 { font-size: 2.2em; }
}